SEOに影響を与える表示速度改善【Adsense編】
Adsenseは表示速度に大きく影響
以前の記事で、ページの表示速度は表示順位に影響するというお話や、表示速度の改善がユーザビリティの向上につながるというお話をしました。
他にも、『サイトスピードチェック』の方法なども記載しているので、こちらの記事と合わせて読んでいただければと思います。
『表示順位』や『ユーザーエクスペリエンス』に関係する表示速度ですが、前回は画像の容量を改善する方法を記載しました。
今回は、アフィリエイトをしている方で利用されている方も非常に多い『GoogleAdsense』と表示速度のお話をしていきたいと思います。
まずはこちらの表をご覧ください。
私のこのブログ記事のとあるページの表示速度を計測したデータです。
どの記事も同じテンプレートを使い、同じように私が書いた記事です。
上4行のページデータは『GoogleAdsense広告を掲載』しているページ、下2行が『GoogleAdsense広告を未掲載』のページのデータです。
都合の良いデータを抜粋しているわけではなく、全ページで同じようなデータ内容となっており、モバイル速度点数において明らかにAdsense広告が影響しているのがわかるかと思います。
SEO対策のため、ユーザーエクスペリエンス向上のため、GoogleAdsense広告が原因で速度遅延が起こっているページは何らかの対策を行いましょう。
広告表示方法の違い
画面表示の仕組み
具体的な対策方法をご説明する前にブラウザ上で、ページ内容を表示する際の仕組みを『大雑把』に簡略化してご説明したいと思います。
まず、検索エンジンなどから検索し、開きたいページをリクエストします。
そうすると、リクエストを受けたサーバーは、ブラウザ(Chrome・Edge・safariなど)にHTMLファイルを渡します。
HTMLファイルがわからない方はPCでページを表示し、『右クリック ⇒ ページのソースを表示』とする事で開いているページのHTMLを見る事ができます。
<html>
<head>
～～～～～～～～～～～～～～～～～
～～～～～～～～～～～～～～～～～
</head>
<body>
～～～～～～～～～～～～～～～～～
～～～～～～～～～～～～～～～～～
～～～～～～～～～～～～～～～～～
～～～～～～～～～～～～～～～～～
</body>
</html>
ブラウザは1行1行順番に解析していき、解析を終えるとデータを整理し、画面に配置・描画していきます。
もの凄く簡単に言うと、『解析 ⇒ 整理 ⇒ 描画』という順で処理していきます。
まずはこの3ステップを覚えておきましょう。
default・async・遅延読込の違い
それでは、GoogleAdsense広告のブラウザ上での読込みに関する具体的な話に入ります。
以前のスクリプト
以前のGoogleAdsenseのスクリプトは下記のようなものでした。
<script type="text/javascript">
google_ad_client = "ca-pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "1234567890";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script type="text/javascript" src="https://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
このコードを広告を挿入したい箇所に貼り付ければ、Adsense広告が表示されるわけですが、ブラウザがHTMLファイルの中身を上から順に『解析』していく中で、上記コードのところにさしかかった場合、上記コードの最後の行で『JSファイルをダウンロード』します。
上記のような記述は、『同期処理』と言われ、JSファイルをダウンロードし、内容を解析している間、他の作業はストップしている状態(ダウンロード・解析を終えるのを待っている状態)となります。
そのため、単純にGoogleAdsenseのスクリプトファイルをダウンロードし解析する時間分画面が描画される迄の時間が長くなります。
async付のスクリプト
以前のスクリプトでは、画面描画されるまでに時間がかかってしまうため、新たに登場したのが『async』を用いた『非同期処理』です。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="1234567890"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
このコードは現在、GoogleAdsenseで取得できるコードで、こちらも広告を挿入したい箇所に上記コードを貼り付ければ、広告を掲載する事ができます。
ブラウザがHTMLファイルの中身を上から1行1行解析していく中で、上記コードにさしかかった際、上記コードの1行目で『JSファイルをダウンロード』します。
しかし、『async』の効果により、JSファイルをダウンロードしている最中も、次の行の解析は並行して行われます。
ダウンロードしている間、待機していた先ほどの処理とは異なり『並行』して作業を行う分、解析時間が速くなります。
古いスクリプトコードで、『同期処理』でAdsense広告を表示している方は、『非同期処理』のスクリプトコードへ変更するだけでも速度が改善される可能性があります。
遅延読込
上にあげた2つの方法は、
・1行1行順番に『解析』を行っていく方法(JSファイルのダウンロード・解析を待つ)
・1行1行順番に『解析』を行っていきダウンロード中も並行して解析を行う
という方法で、『解析 ⇒ 整理 ⇒ 描画』の3ステップのうち『解析』の部分で解析速度に差が出ます。
最後にご紹介するのが『遅延読込』という方法で、『解析』段階ではGoogleAdsenseのJSファイルはダウンロードせず描画し、ユーザーが対象箇所(広告表示箇所)にスクロールするとダウンロードを開始します。
例えば、Adsense広告をページの一番最下部に設置していた場合、ページの半ばでページから離れた場合、JSファイルは読み込まれません。
今回はGoogleAdsenseの広告のお話ですが、他にも画像に対して有効な表示を高速化する仕組みです。
・無駄な通信を削減できる
・表示速度を改善できる
といったメリットがあります。
ブラウザの画面領域内に広告掲載カ所が入ってくる段階で表示処理を開始するため、アフィリエイトをやっている方には重要な広告の表示が若干遅れるというデメリットもあるため、良く理解してから使いましょう。
変更前(『async』を用いた非同期処理)と変更後(遅延読込)の速度変化は当ブログでは上記のようになりました。
明らかにモバイル表示速度点数が改善された事がわかるかと思います。
広告表示の速度改善方法
01『async』の使い方
『async』を使った非同期処理による速度改善は、既にGoogleAdsenseから最新のコードを発行して、貼り付けている方は対応が完了している状態のため、特に何もする必要はありません。
古いコード(同期処理)になっている方は、最新のコードに置き換えましょう。
古いコードと最新のコード(同期処理コードと非同期処理コード)の同一ページ内での併用はGoogleAdsenseが公式に非推奨と掲載しているため、どちらかのコードに統一するよう注意して下さい。
また、同一ページ内でAdsense広告を複数設置している方は、
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="1234567890"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
上記コードの1行目部分は、1回の記載でOKです。
一度読み込んだJSファイルは、キャッシュされているため、一度読み込めばその後は使いまわしが可能なためです。
全広告挿入箇所に赤字部分のコードを記入しても、記入しなくても明確な速度変化は見られませんでした。
既にキャッシュされているものは再度ダウンロードされないよう上手く動いくれているおかげですが、『ファイルに変更がないかの確認』は裏で行われるため、無駄な処理、無駄なソースを作らないためにも、赤字部分の記載は一カ所にしましょう。
その際、一番最初に表示される広告部分に読込コード(赤字部分)を付けるようにしましょう。
2番目以降に赤字部分のコードを付けた場合、上手く広告が表示されない可能性もあるため、気を付けましょう。
02『遅延読込』方法
次は『遅延読込』させるための方法です。
『Lazy Load』というJavaScriptライブラリを使います。
まずは、ページ内でAdsense広告を表示している全カ所のコードから、『JSファイル読込コード』を削除します。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="1234567890"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
上記ソースの1行目部分です。
これにより、解析段階でJSファイルのダウンロード処理が発生しなくなります。
各ページのHTMLコードの</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>
このブログページでも、Adsense広告を遅延読込させているため、PCでこのページを開き、『右クリック ⇒ ページのソースを表示』から確認可能です。
ページの表示速度に大きな変化があるかと思いますので、正常に動作しているか確認すると共に、速度の変化も計測してみて下さい。
『遅延読込』はGoogleAdsense公式の方法ではないため、よく動作を検証し、自己判断でのご利用をお願いします。
また、ページ内に複数の画像を表示している方は、画像に対しても有効な技術であるため(むしろ画像に対して使うような技術)、画像にも利用してみると良いかもしれません。