個人的には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を読み込んでしまうとそこから何が起きても制御できないので、読み込むのを遅らせる、しかもアドセンス、というのがポイントでした。