こんにちはゆんです。
今回はサイトの表示スピードが遅い場合の対処法をまとめています。
・ブログの表示速度を上げたい方
・PageSpeed Insightsの数値がレッドゾーンの方
・色々試したけど表示速度が改善しない方
私の場合、PageSpeed Insights でスピードを測定すると、下記のような数値でした。
| モバイル | 17 |
| デスクトップ | 78 |
７ヶ月間ドメインパワーがずっと０だったのもこの低速が原因だったかもしれません。
さまざまな記事を参考にさせていただき、いくつも対策を行いました。
その結果、下記の数値まで上げることができました。
| モバイル | 17 → 73 |
| デスクトップ | 78 → 92 |
また、ドメインパワーもこのタイミングで0を脱出することができました。
本記事ではこの対策内容をまとめております。表示スピードを上げたい方はぜひご参考ください。
対策のみ知りたい方は目次からジャンプしてくださいね。
それではどうぞ！
PageSpeed Insightsのモバイルが遅い原因
概ね以下のポイントが遅くなる原因と考えられます。
・JavaScript
・CSS
・プラグイン
・アドセンス
下図のようにPageSpeed Insightsの結果でも遅い原因が書かれていますよね。
それぞれの項目をGoogle検索で意味を調べて対策を色々調べるのは大変ですよね。
しかも効果があったりなかったり・・・そこで具体的な対処法を下記にまとめています。
※効果があったものと薄かったものがありますが、あくまで個人的な評価です。
環境によっては結果が異なる場合もありますのでご承知おきください。
PageSpeed Insightsのモバイル改善案
◎効果が高かった対策
1.ヘッダー画像無くす
対策前：50 → 対策後：69
ヘッダー画像の容量が大きいと非常に重たくなってしまいます。
削除もしくは圧縮させて表示スピードを上げましょう。
ブログトップページから「カスタマイズ」→「ヘッダー画像設定」で設定変更できます。
2.youtube埋め込み削除
対策前：38 → 対策後：51
上記の赤線部分<iframe title・・・/iframe>を削除してください。
記事の中にYoutubeの埋め込みをすると非常に遅くなってしまいます。
埋め込むのではなく、画像を貼ってリンクさせるとか、単にリンク先を設定するようにしてください。
3.デフォルトフォントへの変更
対策前：17 → 対策後：28
私の場合はJINを使っているのですが、カスタマイズでフォントスタイルを選択できます。
デフォルト以外だと処理に時間がかかってしまうので、絶対ゴシックがいい！という場合以外はデフォルト表示をおすすめします。
ブログトップページから「カスタマイズ」→「サイト基本設定」で設定変更できます。
4.WP Super Cacheインストール
対策前：49 → 対策後：55
WP Super Cacheをインストール後、上の図のようにキャッシングを利用するにチェックを入れて保存ください。
その他の設定は無視でOKです。
プラグインWP Super Cacheは溜まったキャッシュを自動で削除してくれるものです。
それにより負荷が軽くなりサイト表示が速くなります。
5.サーバーのキャッシュ削除
対策前：37 → 対策後：43
ConoHaのサーバーを例にとります。
上の図の手順でサーバーのキャッシュを削除できるのでお試しください。
△効果が薄かった対策
6.WP-Optimizeインストール
対策前：31~40 → 対策後：40
WordPressでは保存や更新するたびに古いファイルが蓄積してしまうため、プラグインWP-Optimizeがそれらをまとめて削除してくれます。
削除と言っても投稿内容が消えるわけではないのでご安心ください。
過去に一時保存したデータのみが消えるので、今表示されている投稿内容には関係ないです。
7.Disable/Remove Google Fontsインストール
対策前：34 → 対策後：34~45
Google Fontsが非常に重いため無効化する（読み飛ばす）プラグインを導入しましたが、振れ幅が大きく安定しませんでした。
インストールされる方は有効化するだけで設定は不要です。
8.アドセンス広告のJavascriptを削除
対策前：38 → 対策後：40
アドセンスはサイト表示速度を遅くさせる原因の一つです。
広告を貼り付ける場所にコードが貼られていると思いますが、その一部を削除すると少しだけ早くなりました。
広告収益がなくなることはないのでご安心を！
9.テーマフッターに遅延読み込みソースコードを追加
テーマエディターのコードをいじるので不慣れな方にとってはハードルが高いですが、遅延読み込みのソースコードは試す価値があると思います。
下のソースコードをテーマフッター（</body>の直前）にコピペして貼り付けてください。
<!– Adsense遅延読み込み追加 –>
<script>
var lazyloadads = false;
window.addEventListener(“scroll”, function() {
if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 &&lazyloadads === false)) {
(function() {
var ad = document.createElement(‘script’);
ad.type = ‘text/javascript’;
ad.async = true;
ad.src = ‘https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js’;
var sc = document.getElementsByTagName(‘script’)[0];
sc.parentNode.insertBefore(ad, sc);
})();
lazyloadads = true;
}
}, true)</script>
<!– Adsense遅延読み込み追加 終わり–>
10.使ってないアドセンス広告設定を消す
対策前：39 → 対策後：39
広告が増えれば増えるほどサイトは重くなってしまいます。
上記のような広告を貼り付ける場所があると思いますので貼り付けすぎないようにしてください。
私は１ページに２箇所くらいまでにしてます。
サイトに訪問された方が見やすくなるように、広告は最小限にしましょう。
11.アニメーション機能の無効
対策前：39 → 対策後：39
私のブログではアニメーションを使用していないので特に変化はありませんでした。
上の図にある通り、アニメーションを使用されている方は無効にしてみてください。
ブログトップページから「カスタマイズ」→「サイト基本設定」で設定変更できます。
✖️逆に遅くなった対策
12.プラグインa3 Lazy Loadインストール
対策前：39 → 対策後：23
a3 Lazy Loadは記事内の画像を遅れて読み込ませることで記事自体の表示速度をあげてくれるプラグインです。
私は遅くなってしまいましたがこの設定で速くなった方もいらっしゃるのでお試しください。
インストール後、上の図のように設定してください。
13.プラグインautoptimizeの導入
対策前：39 → 対策後：20
多くの記事でおすすめされているautoptimizeですが、私の場合は効果がなく、むしろかなり遅くなってしまいました。
ただ、速度が上がる方もいらっしゃるのでぜひ一度お試しください。
あとがき
以上が、私が試したpagespeed insightsで数値を上げる方法です。
細かいものも含めるともっとあるのですが、本記事では主要なもののみピックアップしました。
2022年３月１日追記
ドメインパワーの数値は16.8まで上がりました！
みなさんもぜひ上述した対策を行なってみてください！
2022年9月7日追記
半年ほど特に設定を変更しておりませんが、モバイルの値は80までアップしています。
もし気になることがあればお気軽にコメントください。
SEO対策をもっと強化するために、有料のWordpressテーマを使ってみたいけどお金を払うのはちょっと……という方はお試しでテンプレートを使ってみてください。
無料お試しはこちらから↓
集客できるWordPressテーマなら「New Standard」まずは無料体験
１３回目の申請でアドセンス合格した経緯はこちら
https://yun-yun-blog.com/pass-adsense/
ではまた！
にほんブログ村