お問い合わせはコチラから

アドセンス自動広告でPage Speed Insightのモバイルの点数が低い時の対処方法

サイト運営

個人的にはPage Speed Insightの点数は気にしないことにしています。というのも数値と体感速度が一致しないのと、判定基準や項目が変わるたびにモバイルではやたらと点数が低く出るからです。

テンプレート単体の時にPage Speed Insightで高得点が出るテーマがほとんどですが、外部サイトからのファイル読み込みが入ってくると一気に点数が落ちる傾向があります。

例えば、FacebookやTwitterなどの埋め込みウィジェットやアドセンスなどです。

アドセンスはasync属性が付いているので実際の表示には影響はないはずなのですが、Page speed Insightでは点数が落ちます。特にアドセンスの自動広告を使っていると第三者コードによりブロックされていますの項目で極端に数値が悪化します。

この記事では、アドセンスの自動広告でPage Speed Insight で点数が上がらなくて諦めモードだったところに遅延読み込みを導入して数値が改善した時の方法をご紹介いたします。

PSIでモバイルで24点だった時の状況

  • レンダーブロッキング
  • 画像フォーマットの最適化
  • 第三者コードによるブロック(アドセンス自動広告が支配的)

PSIでモバイル70点を超えるところまで改善

  • レンダーブロッキング
    • Autoptimize導入
    • preload導入
  • 画像フォーマットの最適化
    • webP導入
  • 第三者コードによるブロック
    • アドセンス遅延読み込み

レンダーブロッキングの回避

Autoptimizeで良くある設定で対応します。残ってしまうブロッキング要素はpreloadで対応します。

画像フォーマットの最適化

WebPへの変換と未対応ブラウザへの対応は、EWWW optimizerを使いました。

第三者コードによるブロック

自動広告のコードの読み込みを以下のコードを/body直前に書くことで遅延させました。

(function(window, document) {
  function main() {
    // GoogleAdSense読込み
    var ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    // 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す
    //ad.dataset.adClient = 'ca-pub-XXXXXXXXXXXXXXXX';
    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, document);

参考記事https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html

まとめ

色んなものが埋め込まれたサイトの場合、数値を上げるのは容易じゃないので、多分無理だろうなと思っていましたが、そこそこいいレベルまで点数が上がりました。

外部javascriptを読み込んでしまうとそこから何が起きても制御できないので、読み込むのを遅らせる、しかもアドセンス、というのがポイントでした。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました