[第三者コードの影響を抑えてください]はGoogleAdSenseの遅延読込みでページ表示速度を改善する方法

GoogleのWebパフォーマンス改善ツールの「PageSpeed Insights（ページスピードインサイト）」でモバイルスコア66⇒98へ改善した方法を紹介します。

改善前後

改善前

改善後

第三者コードの影響を抑えてください

このメッセージが表示される理由は、Googleadsenceの自動広告が原因となっていました。

詳細を見るとGoogleと書かれていますね。

この自動広告コードの方法を変えるだけで評価数が全く変わります。

手順１コードの削除

現在は、以下の【外観】＞【テーマエディター】＞【</head>】直前に入れていた自動広告コードを全削除を行い保存します。

<script data-ad-client=”ca-pub-××××××××××××××××” async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>

手順２コードの追加

新しく</body>直前にコードを追加します。

1. 下記のコード中の××××××××××××××××を手順１で保存した番号に直してください。
2. 下記コード全てを保存して【外観】＞【テーマエディター】＞【</body>】直前にコードを追加して保存して下さい。

<script>
(function(window, document) {
function main() {

var ad = document.createElement(‘script’);
ad.type = ‘text/javascript’;
ad.async = true;
ad.dataset.adClient = ‘ca-pub-××××××××××××××××;
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() {

if (window.pageYOffset) {
onLazyLoad();
}
});
})(window, document);
</script>

出典元・引用文献：https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html

「事前接続」＆「事前読み込み」設定

「header.php」にコードを追加します。

<!– GoogleAdSensecDNS プリフェッチ –>
<meta http-equiv=”x-dns-prefetch-control” content=”on”>
<link rel=”dns-prefetch” href=”//pagead2.googlesyndication.com”>
<link rel=”dns-prefetch” href=”//googleads.g.doubleclick.net”>
<link rel=”dns-prefetch” href=”//tpc.googlesyndication.com”>
<link rel=”dns-prefetch” href=”//www.gstatic.com”>
<link rel=”dns-prefetch” href=”//adservice.google.com”>
<link rel=”dns-prefetch” href=”//adservice.google.ca”>
<link rel=”dns-prefetch” href=”//www.google.com”>
<link rel=”dns-prefetch” href=”//stats.wp.com”>
<link rel=”dns-prefetch” href=”//cse.google.com”>
<link rel=”dns-prefetch” href=”//www.googletagmanager.com”>

<!– 第三者コードの影響を抑える –>
<link rel=’preconnect dns-prefetch’ href=”www.google.com/analytics/analytics/”>
<link rel=’preconnect dns-prefetch’ href=”developers.google.com/speed/libraries/”>
<link rel=’preconnect dns-prefetch’ href=”developers.google.com/apis-explorer/#p”>
<link rel=’preconnect dns-prefetch’ href=”www.bootstrapcdn.com/”>
<link rel=’preconnect dns-prefetch’ href=”marketingplatform.google.com/about/tag-manager/”>
<link rel=’preconnect dns-prefetch’ href=”fontawesome.com/”>
<link rel=’preconnect dns-prefetch’ href=”www.doubleclickbygoogle.com/”>