【Cocoon + AdSense】コアウェブバイタル対応的爆速化！

はじめに

kengenius.comの環境は以下のようになっています。

 

• サーバー：さくらインターネット・スタンダードプラン
• CMS：Wordpress 5.5
• WordPressテーマ：Cocoon
• 広告：Google Adsense、時々Amazonアフィリエイト・楽天アフィリエイト

 

ここまでの改善策

先日、設定やファイルを見て、出来る限りの改善をしました。

 

 

改善したつもりでした。

数日後、以下の3点が引き続き気になるようになっていました。

 

新たなる課題

以下の新たなる課題を見つけてしまったので、解決するしかありません。

 

1. 表示体感速度
2. Google AdSense利用併用時の表示速度改善
3. コアウェブバイタル（FID・CLS・LCP）改善

 

先日の記事に書いた内容を以ってしても、コアウェブバイタルのうち、CLSに関しては改善がされませんでした。しかも、59件も！！

 

CLSは、0.35でした。

 

そのため、更に踏み込んでこの課題に取り組むことにしました。

 

コアウェブバイタル（FID・CLS・LCP）とは？

Googleが発表した、今後の検索結果の指標です。具体的には、以下3つの指標から成り立ちます。

• FID：Largest Contentful Paint
• CLS：初回入力遅延
• LCP：Cumulative Layout Shift

 

良い検索結果は、これらの指標において基準を満たす必要があるということになります。それぞれの項目説明は、Googleの公式のページをご覧ください。

 

 

原因

これらの3つの問題は、JavaScriptやCSSの読み込み、Wordpressで外部から広告を表示するシステム（アフィリエイトやGoogle AdSenseなど）を利用していることに起因します。

 

ブログにアクセスがあった場合、

 

1. ブログへのアクセス
2. アクセスしたユーザーへデータを送信
3. 受け取ったデータ（コード）をブラウザで実行
4. ブラウザが表現すると、データ（コード）を順番に表示するための処理をする

 

という流れがあります。

 

ですが、「上記4.で、広告等を含めて外部別サービスからデータを取得する処理や、スクリプト処理が発生した場合、データ受信とその表現、スクリプト処理がそれぞれ終了するまで次の処理に進まない」ということになります。言い換えれば、表示するまでの時間がかかる（=遅い）という評価となり、ユーザーが多く離脱してしまうブログとなってしまいます。

 

事実、Google Speed Insightのモバイルでも、案の定「使用していないJavaの削除」が一番大きい要素になっていました。

 

対策

Google AdSenseを利用した際の速度改善対策の前に、自動広告・手動広告それぞれ共通に設定した項目を先に記載します。

 

1. Google reCAPTCHA設定解除
2. Google AdSense用コードを含む、Java Script遅延読み込み
3. Google AdSense用コードの変更

 

1. Google reCAPTCHA設定解除

まず最初に、Google Speed Insightで「使用していないJavaの削除」に表示される項目のうち、気になるJavaScriptファイルに、Google reCAPTCHAらしき表示がありました。

 

そう、プラグイン：Contact Form7のスパム対策としてGoogle reCAPTCHAを設定していました。Contact Form7をご利用されていない方には関係のない項目となりますので、読み飛ばしてください。

 

お問い合わせメニューのインテグレーションにあるインテグレーションのセットアップを開き・・・

 

reCAPTCHAにあるキーを削除を実行します。

 

2. Google AdSense用コードを含む、JavaScript遅延読み込み

難しそうな話ですが、JavaScriptの遅延読み込みを行うことは、上記原因の4. で発生する「広告等を含めて外部別サービスからデータを取得する処理」を後回しにすることです。つまり、外部別サービスからのデータは遅延読み込みを行う、ということ。

 

先読み vs 遅延読み込み

早く表示したいのであれば、先読みでは？と思うのですが、上述のコアウェブバイタル（FID・CLS・LCP）では、「ページの表示開始から（外部サービスの遅延読み込みが残っていても）ページ全体が表示されたとGoogleに評価される時間は短くなる」ため、結果として良いページとして認識されます。これが上述の「3. コアウェブバイタル（FID・CLS・LCP）改善」となります。

 

というわけで、Google Adsenseも含めたJavaScriptの遅延読み込み設定を行うことにしました。

 

JavaScript遅延読み込み設定

さて、JavaScriptの遅延読み込みともなれば、コードを書かなければ・・・

と思ったところに素晴らしい記事を発見いたしました。Google Adsenseも含めて、JavaScript遅延読み込みを行い、マウス操作やページスクロールが行なわれる、もしくは、操作が何もない状態から3秒経過したらJavaScriptの読み込みを開始する、というコードが書かれていました。

 

簡単に言うと、欲しかったものがそのままったのです！

 

これを、アクセス解析・認証タブにあるその他のアクセス解析・認証コード設定のフッター用コードに設定します。「ca-pub-XXXXXXXXXXXXXXX」はご契約のGoogle Adsense 固有IDに変更してください。

JavaScript遅延読み込み用コード

JavaScript遅延読み込み用コードは、以下のとおりです。

WordPress5.5からLazyLoadが導入されましたが、この設定と干渉することはなさそうです。

<script type="text/javascript">
(function(window, document) {
  function main() {
    // GoogleAdSense読込み
    var ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    // 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す
    ad.dataset.adClient = 'ca-pub-XXXXXXXXXXXXXXX';
    ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    var sc = document.getElementsByTagName('script')[0];
    sc.parentNode.insertBefore(ad, sc);
  }
 
  // 遅延読込み
  var lazyLoad = false;
  function onLazyLoad() {
    if (lazyLoad === false) {
      // 複数呼び出し回避 + イベント解除
      lazyLoad = true;
      window.removeEventListener('scroll', onLazyLoad);
      window.removeEventListener('mousemove', onLazyLoad);
      window.removeEventListener('mousedown', onLazyLoad);
      window.removeEventListener('touchstart', onLazyLoad);
      window.removeEventListener('keydown', onLazyLoad);
      main();
    }
  }
  window.addEventListener('scroll', onLazyLoad);
  window.addEventListener('mousemove', onLazyLoad);
  window.addEventListener('mousedown', onLazyLoad);
  window.addEventListener('touchstart', onLazyLoad);
  window.addEventListener('keydown', onLazyLoad);
  window.addEventListener('load', function() {
    // ドキュメント途中（更新時 or ページ内リンク）
    if (window.pageYOffset) {
      onLazyLoad();
    }
  //何もアクションがないときは指定秒数後に読み込み開始（ミリ秒）
  window.setTimeout(onLazyLoad,3000)
  });
})(window, document);
</script>
<!--/ Adsense 遅延読み込み -->

 

JavaScriptのasyncをdeferに変更する等も検討したのですが、deferでもHTMLパーサを停止しない（遅延処理にならなず、並列処理になる）ので、この手法を選択しました。

 

3.Google AdSense用コードの変更

さて、最後にGoogle AdSense用コードの変更です。Google AdSenseを自動広告として設置するか、はたまたCocoonの機能でそれぞれ個別に手動で設定するか、ということによって手順が分かれます。

 

ご利用方法に応じて、続きは以下でご覧ください。

 

Google AdSenseを自動広告で設置する

 

Google AdSenseを手動広告で設置する

 

 

 

さいごに

ブログはコンテンツの中身が重要なのはもちろんですが、コンテンツが良くても日の目を見るには、環境も大切です。Wordpress + Cocoonをご利用の方、さくらインターネット・スタンダードプランでご利用の方、他のテーマやその他の環境であっても、この記事が参考になれば幸いです。

 

Cocoonフォーラムでの共有

本件についてはCocoonのフォーラムでも共有させていただきました。

 

続報はしばらく時間がかかりそうですが、わいひらさんにご認識いただけただけでも今後のリリースには何かしらの反映があるかもしれません。それまではこの記事を元に、自己責任でご判断いただければと思います。