【効果抜群】AdSense遅延ロードでモバイルスコアを80に改善

コアアップデートによりアクセス数が激減しましたが、おかげでいろいろと見直す気になりました。次の記事に、PageSpeed Insightsの情けないスコアに対応した内容と効果を書きました。

河童のインデックス投資

【実録】アクセス数激減を機にPageSpeed Insightsスコアを71から97に改善しました

2020年1月13日に始まったGoogle January 2020 Core Updateによって、僕のブログの検索流入は激減してしまいました。ようやく検索パフォーマンスが底打ちしたところです。回復の兆しはまったくありません。そのコアアップデートで、僕のブログの検索パフォーマンスがとんでもない悪影響を受けたことは、納得はできないものの、相手は（人間が作り出した）神のアルゴリズムなので、受け入れるか、諦めるしかありません。でも、ここで諦めるわけには行きません。よって、いずれ回復すると信じて、従来と変わらずコンテンツに集中していま...

その過程で存在に気付いていた、Google AdSenseの遅延ロードを取り入れました。これまた努力の成果をブログで公開して頂けている先達のおかげで、短時間で実現できました。僕もその感動をみなさんと共有したいです。

改善前のモバイルスコア

この記事にある改善を適用する前のモバイルスコアです。

改善後のモバイルスコア

この記事にある改善を適用した後のモバイルスコアです。変動が大きいですが、まあこれぐらいです。

その効果に大変満足しています。2日前は、こんなスコアにできるとは夢にも思いませんでした。

対策した問題

次はPageSpeed Insightsの指摘です。「第三者コードの影響を抑えてください」とあります。

赤枠で囲ったのが、AdSense広告を貼ることで生じた、第三者コードによる影響です。PageSpeed Insightsのスコアを上げるには、できるだけ短時間でコンテンツを可視状態にすることが求められますが、AdSense広告がそれを遅くしてしまいます。かと言って広告を外すことはできません。

AdSenseを遅延ロードする方法

こちらのブログで公開されているコードを利用させて頂きました。

トイレのうず／ブログ

遅延読み込みでGoogle AdSenseを貼っていてもPageSpeed Insightsの点数を上げる

PageSpeed Insights にて Google AdSense を遅延読み込みさせ、モバイルのスコアを 80 から 98 に上げた話です。サイトのデザインを新しくしてページの読み込み速度を早...

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のスコアを大きく改善できるはずです。