コアアップデートによりアクセス数が激減しましたが、おかげでいろいろと見直す気になりました。次の記事に、PageSpeed Insightsの情けないスコアに対応した内容と効果を書きました。
その過程で存在に気付いていた、Google AdSenseの遅延ロードを取り入れました。これまた努力の成果をブログで公開して頂けている先達のおかげで、短時間で実現できました。僕もその感動をみなさんと共有したいです。
改善前のモバイルスコア
この記事にある改善を適用する前のモバイルスコアです。
改善後のモバイルスコア
この記事にある改善を適用した後のモバイルスコアです。変動が大きいですが、まあこれぐらいです。
その効果に大変満足しています。2日前は、こんなスコアにできるとは夢にも思いませんでした。
対策した問題
次はPageSpeed Insightsの指摘です。「第三者コードの影響を抑えてください」とあります。
赤枠で囲ったのが、AdSense広告を貼ることで生じた、第三者コードによる影響です。PageSpeed Insightsのスコアを上げるには、できるだけ短時間でコンテンツを可視状態にすることが求められますが、AdSense広告がそれを遅くしてしまいます。かと言って広告を外すことはできません。
AdSenseを遅延ロードする方法
こちらのブログで公開されているコードを利用させて頂きました。
WordPressユーザーが簡単に実装できるよう、functions.phpにコードを追加すればいいようになっていたのでものすごく楽でした。(僕の場合)子テーマのfunctions.phpをいじるのは抵抗なくできますが、他のテーマファイルは触りたくないです。なお、僕はトップページにも広告を貼り付けていたので、is_singleの判定は外しました。
結果だけ書くと、変更したのは次の2点です。
- 複数の方法でHTMLに挿入させている広告コードから、次の行を削除します。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
ひとつでも残っているとダメです。忘れていた方法で挿入していたのもありました。 - functions.phpにコードを2種類追加します。AdSenseを遅延ロードさせるものと、DNSのプリフェッチを行わせるものです。
効果の確認過程で、モバイル用のキャッシュが邪魔をしてイライラしました。(既知の問題ですが)僕の環境だと、モバイルのキャッシュが素直に消えてくれないことが多々あります。
AdSenseを遅延ロードした効果
PageSpeed Insightsは第三者のコードの影響なしと判断しました。この項目は「診断」から「合格した監査」に移動しました。次はその内容です。
体感的には検知できない程度の改善だと思いますが、また、AdSense広告が遅れて表示されることに人間は違和感を覚えるかも知れないわけですが、これがスコアを大きく改善します。言わば、偏差値が60から80に上がるようなものです。そして、程度は不明なものの、GoogleはWebページの表示速度を気にしているのは確かです。
効果抜群です
実現方法が、比較的実施しやすい形で公開されているので、わずかなやる気があれば対応できると思います。その効果は抜群です。PageSpeed Insightsのスコアを大きく改善できるはずです。