モバイルページのスピード対策(Adsense広告対策)
モバイルファースト
ページの読込速度が検索順位に影響をもたらすという事はご存知の方が多いと思います。
以前までは、PC上でのページの読込速度の評価がアルゴリズムに用いられていましたが、現在はモバイル上でのページ読込速度の評価がアルゴリズムに対し適用されています。
私がブログ更新をサボりだす前はまだPC上でのページ読込速度が適用されていたように思うのですが、私のブログの各ページではパソコン上での表示スピードはほとんどのページで90点近くあったため特に気にしていませんでした。
プログ更新を再開し、モバイルスピードを計測するとかなり遅いという結果になってしまっていました。
上記記事で、読込速度の重要性や速度の計測方法、画像の圧縮サイトの紹介などしておりしっかりと対策していたのですが、まだまだモバイルページに対しては対策不足のようです。
読込速度が遅いと、検索順位に悪影響をもたらし、SEO上良くないのですが、その他にも読込速度が遅くなかなかページが表示されない事により、ユーザーの離脱にもつながってしまいます。
早急に対策しなければいけません。
読込速度が遅い原因
現在私のサイトには、122記事と固定ページがありますが、いくつかのページを抜粋して計測してみました。
ある程度速度対策はしているつもりですが、対策をしていないものがありました。
私のこのブログサイトでは、ほとんどのページにGoogleAdsenseの広告を貼っています。
しかし、上の表でモバイルページの速度でも90点台を出している2ページは、タバコ関連の記事を書いているため、GoogleAdsenseは規約違反になってしまうため、GoogleAdsenseの広告を貼っていません。
i-mobileさんの広告を貼っています。
つまりは、対策無しに貼ったGoogleAdsenseの広告がページ読込速度の遅延の原因である事がわかりました。(私のサイトの場合)
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXX" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
対策前は、上記のように、GoogleAdsenseから指示されたコードをそのまま貼っていました。
1ページに複数個所Adsense広告を貼っていますが、全ての箇所に上記コードを書いています。
Adsense広告読込速度改善対策
01スクリプト読込を一回に
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXX" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
1ページ内に複数のAdsense広告を貼っている場合、上記赤字部分は1ページ内の最初の広告部分にのみ記載すればOKです。
2箇所目以降は赤字部分は削除しても広告は表示されます。
私のブログではほとんどのページで3箇所にGoogleAdsenseの広告を貼っているので、1箇所のみスクリプト読込コードを残して他は削除してみました。
PageSpeed Insightsで速度を計測する際、サーバーや回線の状況によって毎回スコアは変わるため正確な値を取得する事ができないのが難点です。
サンプルも4件と少ないため、あまり精度の高い情報ではないですが、速度測定結果は上表のようになりました。
モバイルの読込速度に関しては、速くなっているページもありますが、逆に遅くなっているページさえあります。
パソコンの速度は全てのページにおいて削除前より値が良くなっています。
毎回値が違うため、精度の高い試験結果は得られていませんが、スクリプトの読込コードの不要部分を削除しても大きな変化は無いのではないでしょうか。
02スクリプトを遅延読込
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXX" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
まずは、上赤字部分のスクリプト読込コードを全て削除します。
次に、ページの</body>(bodyタグ)のすぐ上に下記コードを貼付け、スクリプトコードを遅延読込させます。
<script>
//<![CDATA[
//lazy load ads -> https://blog.zdienos.com/2019/03/mempercepat-loading-blog-yang-terpasang-iklan-google-adsense.html
var lazyloadads = false;
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>
上記対策を取った際のスコアは下記のようになりました。
まだ90点台には届かないページもありますが、モバイルの読込速度が大幅に改善された事が確認できるかと思います。
ちなみに今回の遅延読込の対策は、コチラのページを参考にさせていただきました。
最後に
私が現状、読込速度を上げるために行っている対策は、画像を圧縮する事や、CSSの整理くらいで、後は不要なファイルを読み込まない等気を付けている程度です。
PC上の読込速度はそれでも90点台とまずまずのスコアですが、モバイルの読込に関しては悲惨なスコアでした。
今回のGoogleAdsenseのスクリプト読込を遅延させる事で、モバイルの読込速度に関してもかなり改善されたかと思います。
まだそれだけでは、90点台に到達していないページもあるので、もう少し速度を改善して全てのページで90点台を取れるよう対策していきたいと思います。
また、今回の修正で検索順位やPVに大きな影響が出ればまた追記して報告したいと思います。