ブログ運営で一番と言っていいほど大事になってくるのが「SEO対策」です。Webサイトが検索エンジンに気に入ってもらえるようにするための対策ですね。
そんなSEO対策ですが、Googleが云うには「ページの表示速度が評価に関わってくる」とのことで、ページを開いてからとにかく早くユーザーに記事が見えるようにしなければならないとのこと。 そこで結構大きな障壁になってくるのが「Google広告」と「Googleアナリティクス」のスクリプトの読み込みです。これらの二つのGoogleサービスはブロガーには必須なものではあるのですが、このスクリプトの読み込みがページの表示を阻害してしまっているみたいなのです。
今回は、これらのスクリプトを遅延読み込みして、ページ表示速度を高める方法を紹介していきます。
ページの表示速度とSEO
SEO対策。ブロガーだったら一度は聞いたことがあると思います。 最終的に記事を閲覧するのは人間かもしれませんが、数多くあるWeb上の記事を人間に提案するのは検索エンジンの仕事です。 そのため、Webサイトの投稿が検索エンジンに好かれないとそもそも人間に読んでもらう機会を作ること自体が難しいのが、この情報で溢れかえっている現代の一つの特徴ですね。
そして検索エンジンは人間ではなく、人工知能ですので、「人間」というよりはまず「人工知能」に好かれる記事を作らないといけないということですね。
そしてGoogleはページの表示速度が大事と述べていて、実際にGoogleが行った調査によると表示速度が1秒から3秒に落ちるだけで、そのページの読み込みをあきらめて他のサイトに行ってしまう人が32%も上昇したとのことです。 そういう背景があるからこそ、Googleは正式に検索エンジンの評価アルゴリズムに表示速度要素も組み込んだと発表しましたので、しっかり対策しないといけません。
正直ページの表示速度が遅かったとて、サイトの内容によっては別にユーザーが読み込みをあきらめることはないだろうとは思うのですが、検索順位に影響すると言われてしまったらそれは改善するしかないですよね。
Google広告、アナリティクスと表示速度
さて本題です。 ページの表示速度等のスコアを算出してくれるGoogleが提供しているサービスがあるのですが
これですね。「web.dev」というGoogleが作ったWebサイト分析サイトの中の一つの機能です。このサービスでURLを入力するだけですぐに分析してくれます。
ここで、BableTechのとあるそこそこ長い記事のスピードを測ってみました。そしたらパフォーマンスというタブでそこそこ低い点数が… パソコン向けの評価だと100点だったのですが、モバイル向けでは結構厳しいらしく、黄色やら赤色やらの文字がずらずらと…
これでもプラグインを減らしたりテーマを編集したりしてかなり頑張っていたつもりなのですが80点にも乗っかってないとはかなり萎えますね。
そして点数が出るだけでなく、「点数が低い原因として考えられるもの」が下に表示されます。
ここのスクリーンショットはちょっと撮り忘れてしまったのですが、そこに「Google Tag Manager」やら「Google Ads（Google DoubleClickみたいなやつ）」やらの文字が見えました。
これはGoogleアナリティクスのためのスクリプトやGoogle広告を表示するためのスクリプトのことを指しています。 つまりGoogleが提供しているサービスのスクリプトが重いぞってGoogleのサービスから怒られてる感じですね…苦笑
しかも二つとも、ブログ運営には欠かせないサービスで「削除する」という手段を取りたくないものです。そこで、どうにかして影響を抑えられないものかと、いろいろ考えて実践してみました。
スクリプトの読み込みを遅らせる方法
これらのスクリプトのタグにはもともと「async」というプロパティがついています。これについては以下の記事でめちゃくちゃ丁寧に解説してくださっていました。
https://qiita.com/phanect/items/82c85ea4b8f9c373d684
asyncというのは「非同期」という意味で、このスクリプトが実行されている間もページの読み込み処理を続ける（同時に処理する）というものです。 と聞いてみると、同時に処理できるから速そうみたいに思えますが、ページの読み込み時に重たいスクリプトが同時に実行されてしまっているとそりゃページの表示速度が遅くなってしまいます。
また、deferというプロパティを付けたら、ページ内HTMLコードの解釈が全部終わったタイミングで実行されるようになるわけですが、ページレンダリング（表示）の後に実行してくれるわけではないので、これもページの表示を阻害してしまう様です。
そのため、完全にページの表示処理を阻害しないようにするためには、ページが表示された後にスクリプトを実行する必要があります。そこで、JavaScriptの「window.onload」みたいなイベントを使ってスクリプトを実行するという手法がありますが、広告スクリプトやアナリティクスのスクリプトは外部スクリプトで、その中の処理を任意のタイミングで関数内で実行するというのは難しいです。
そこで、これらのスクリプトを読み込むためのHTMLタグ自体をページ表示後に挿入するようにすれば強制的にスクリプト読み込みタイミングを遅らせられるのではないかと考えました。
スクリプトを読み込むための関数を定義
まずは、スクリプトを読み込むHTMLタグを挿入するための関数を定義しましょう。ページ表示と共に読み込まれるスクリプトファイルの中に記載していきます。
//アドセンスを読み込むスクリプト
lazyloadads = false;
function load_ads(){
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);
var gt = document.createElement('script');
gt.type = 'text/javascript';
gt.async = true;
gt.src = '[アナリティクスのスクリプトのURL]';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(gt,sc);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[アナリティクスのユーザーコード]');
lazyloadads = true;
}上のような形で挿入しました。 ざっと説明していくと、まず仮想のHTMLのscript要素を作って、そこに必要なプロパティを入れていきます。 そしてスクリプトを読み込むためのURLをsrc属性の中に突っ込んで、あとはそれをHTML内に適当に挿入しています。
最近ではGoogleアナリティクスの利用に「gtag」というものが必要で、それ用のスクリプトも併せて記述していますが、本当に必要なのかはよくわからないです…
そしてこの関数を実行してスクリプトの埋め込みが完了した時点で、「lazyloadads」というグローバル変数の値をtrueにしています。
スクリプト読み込み関数を実行
後はこれを任意のタイミングで実行するだけで、いつでも広告が表示できるということですね。ちなみにアナリティクスについては、この関数を実行するまでのログは残らないため、実行される前にユーザーが離脱してしまったらそもそも訪問しなかったことになりますのでご注意ください。
なお、あくまでもログ上での話ってだけで、アクセスされたという事実は変わりませんのでご安心ください。
//パソコンの時は、ページ読み込み完了後にすぐ広告読み込み
jQuery(function(){
if(jQuery(window).width() > 1000){
load_ads();
}
});
//スマホ、タブレットの場合は100ピクセルスクロールしたタイミングで表示
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() > 100 && lazyloadads === false){
load_ads();
}
});あくまでも私のサイト上での話ですが、パソコン表示だとファーストビューで広告が表示され、スマホ表示だと広告は表示されないので、そこら辺を条件分岐するようにしてみました。
上記はjQueryを使った例ですが、別にjQueryを使わなくてもバニラJSでいけますね。 当サイトではパソコンはウィンドウ（ビューポート）の横幅が1000ピクセルを超えているデバイスという定義ですので、その旨を条件にして、満たしていたらload_ads()を実行しています。
そしてスマホやタブレットの場合は、ユーザーがスクロールを開始して100ピクセル移動したタイミングで読み込まれるようにしています。100という数字に特に深い意味はありませんが、>0 という条件にしてしまうとスクロール開始したタイミングでなんかカクついてしまったりして気分が良いものではないかなと思い、なんとなく100にしました。あまり変わりませんが。
後は、全くスクロールせずにそのまま前のページに戻ったユーザーに対してそもそも広告を表示させないことで、もしかしたら質の低いアクセスが蓄積されて変にGoogleからの評価が下がってしまうということを防止できるのではないかなとかいう淡い期待に胸を膨らませています。
CLS大丈夫？
この手の遅延読み込みで発生してくるのがCLS問題です。 簡単に説明すると「ページが表示された後に要素の高さが急に変わったりしてガクッってなったら見にくいから直せよ」っていう感じです。
例えば広告についても、後から読み込んだ時に急に広告の高さ分本文がずれてしまうことになるので、不快感を与えかねないです。実際にこれはGoogleからの評価にも影響してくるとのこと。
そのため、Google広告の要素（insタグ）の親要素の高さを「280px」などに設定しておきましょう。基本的にGoogle広告に関しては、予め高さを指定することを推奨しています。
スマホとパソコンの広告配置
スマホの画面は基本的に小さいですので、ファーストビューで広告が表示されないような配置にしましょう。あくまでも記事の内容が主役ですので、最初に表示された画面の半分くらい広告ってのもなんか気分悪いですしね。
そしてスマホでは広告をファーストビューに表示しなかったら、ページを表示した直後に広告スクリプトを読み込む必要がなくなるので、動作を軽くすることができ、サイトパフォーマンスが向上しています。
対策後のスコア
対策を施したうえで、スマホやパソコンで試しに表示してみたら広告がちゃんと表示されていましたし、アナリティクスにちゃんと記録が残っていました。（なお、動作は保証できません）
とりあえず使えることは分かったので、ここで一度スコアを測ってみましょう。
パソコン表示が100点なのはいいとして、問題はモバイル表示…ですが
なんと99点でした！ モバイルの評価めちゃくちゃ低いのに、こんなに高い点数をとれたのは結構革命的ですね～
今後、どうやってここまでサイトを爆速化したのかについてBableTechではたくさん発信していきたいと思います。よろしくお願いします。
SEOスコアがかなり低い感じになっているので、これからもっと対策していきたいと思います…