ブログをはじめWEBサイトを運営していれば一度は気にしたことがあるであろうページの表示速度問題。
「表示速度が遅いほど、離脱する恐れがある」ということで、Googleの「PageSpeed Insights」などを使い改善に励んだ時もありました。もちろん、この数字が全てではないのですがポイントが高い方が安心感もありますしね。
しかし、改善対策はたくさんあるけど私の知識的にできないことの方が多く諦めて放置状態に。で、久しぶりに「PageSpeed Insights」使ってみたら「SP:24、PC:40」と想像以上に低かった!
ということで、今回重い腰を上げ色々と試してみた結果「アドセンスの遅延読み込み」が一番効果的だったので事象をまとめておこうと思います。
よく見る項目たち
影響していた項目は山ほどありまして、現在も未解決なものが多いです。ただ、色々調べて私でも対応できそう(コピペで解決!)なものもあり、先人の知恵に感謝です。
私が管理しているいくつかのブログで PageSpeed Insights を試してみたところ、よく見るのは以下の項目です。
- Google AdSense(pagead2.googlesyndication.comみたいなやつ)
- Font Awesome(use.fontawesome.comみたいなやつ)
- Google Fonts(fonts.googleapisみたいなやつ)
- 最初のサーバー応答時間を速くしてください
結論から言うと、アドセンスを遅延読み込みさせただけでかなり改善しました。
また、Google Fontsについても機能をoffにすることで改善しています。ただ、使用するメリットもあるのでお好みで。
Font Awesome については、デザイン上使い続けたかったので何もしていません。
④については以下の通りなので、いらないプラグインを削除する程度しか対応していません。使っていないプラグインがあれば削除推奨だと思うのでいくつか削除しましたが、表示速度のポイントには特に影響しませんでした。
ちなみに、私のサイトではこの④の影響も大きそうです・・・。
テーマ、プラグイン、サーバー仕様はすべてサーバーの応答時間に影響します。より最適化されたテーマを探す、最適化プラグインを慎重に選ぶ、サーバーをアップグレードすることをおすすめします。(PageSpeed Insights)
今回、アドセンスの遅延読み込みをさせただけで、「SP:24→70前後、PC:40→90前後」まで数字が上がったので本当に驚いています・・・。
ちなみに、過去「AMPプラグイン」を使用していましたが、表示速度だけでいえばその時が最速だったと思います。
ただ、使用しているテーマパークの良いところが機能しなくなってしまったので使用を断念という流れに。
改善方法と参考記事
アドセンスの遅延読み込みについて、少なくとも私のサイトでは良い効果が出ているのでご紹介します。
正直、私の知識では詳しいことは分かりませんが、アドセンスを設置するときに必ず入っている下記の部分を全て削除して、別途遅延読み込み用のスクリプトを</body>の直前に追加すると言うもの。
作業自体は、さほど難しいものではありませんでした。
▼削除するスクリプト
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
「アドセンス 遅延読み込み」で検索すると、「zdienosBLOGの記事(英語)」を参考に日本語で解説している記事が多く見つかり助かりました。(どの記事がどこまで正しいかまでは調べていないので、ご自身の判断で対応してください。)
注意点は、ファーストビューにアドセンスを設定している場合、遅延読み込みにすることで表示されないことがあると言うこと。
私のサイトはアドセンスをファーストビューに設定していませんので気にしていませんでしたが、下記の記事ではモバイルとの分岐設定も解説しているのでご参考に。
で、色々な記事でアドセンスの遅延読み込みについて書かれている中で、なぜこの方の記事をご紹介したかというと、なんと突然アドセンスアカウントが無効化されてしまったそうなんです。
その際の考察記事も書かれていまして「遅延読み込みは問題なさそう」という見解に。
今のところ私にも何も連絡は来ていないので、もし何かあったら書き足していこうと思います。
まとめ
対応すればするほどまだ先があって、もはやゴールが見えないですね・・・。
ただ、ポイントがかなり向上してくれたので、精神安定剤にはなっていると思います。笑
今後なにかエラーや問題が発生するようだったら随時更新していこうと思います。