cocoonテーマ使用中に、アドセンスadsense自動広告のまま使いたい、それでもPageSpeed Insightsの点数を改善したいと思う、欲張りなあなた向けの記事です。
Google Search Console（グーグルサーチコンソール）のページ エクスペリエンスが低くて困っている。
モバイルでのページ エクスペリエンス のページ エクスペリエンス シグナルで、ウェブに関する主な指標＞モバイルで不良、もしくは改善が必要となり、どんな対策をしていいかわからない
PageSpeed Insightsの点数が低くて困っている。
PageSpeed Insightsの原因がほぼアドセンス自動広告だということを突き止めたが、どうしても自動広告を変えたくない。
上記のような悩みに効いてきます。
事実、私は上記の課題を1週間以上悩み続けてPageSpeed Insightsのスコア改善に必要な方法論を見つけました。その結果、20点台だった PageSpeed Insightsのスコアが、80点台に劇的に改善しました。
振り返るとシンプルなフローにまとめられるのですが、悩んで手を動かした時間は15時間くらい・・
他に困っている人を迷わせたくない！と思って、ちゃんと記事にすることにしました。
Google Search Console（グーグルサーチコンソール）のページ エクスペリエンスが悪い？まずは状況理解
私の場合、サイトに優れたページ エクスペリエンスの URL が 3.4% 件あります。と記載されていて、過去ずっと90-100％だったのに、急激に良好URLの低下が見られて危機感を感じました。
これ、数値として低すぎじゃね？
そのままにしていたら、絶対SEOのランキング下がるわ・・。
どうしよう・・。
と悩んでいたわけなんですね。
色々ググって調べた結果、最近のグーグル先生はユーザーのページエクスペリエンスを重視する傾向にあり、SEO上位表示を考えるなら、絶対に避けて通れない課題だということを知りました。
そして、その課題を克服するのは実はシンプルな流れでどんどんクリックしていくと、何だか悪い点が見えるように作られているんですよね。
私の場合、下記のようにページエクスペリエンスシグナルの、ウェブに関する主な指標で、89件のURLが失敗していたようなんです。
ページエクスペリエンスの何が悪いのか調査する。
ナニコレ？って、100回くらいクリックしたと思います・・。
でまあ、よく見てみると、下記のような感じなんです。
ウェブに関する主な指標＞モバイルの中で、詳細、ステータスに、改善が必要な項目ってのが多い。
でよくよく調べると、
改善が必要 CLS に関する問題: 0.1 超（モバイル）
⇒CLSとは、ウェブバイタル（Web Vitals）＝ウェブで優れたユーザーエクスペリエンスを実現するために重要だと思われる品質シグナルの内の重要指標の一つで、Cumulative Layout Shiftの略で、「累積レイアウト変更」の意味です。平たく言うと、ページの視覚的な安定性を測る指標で、読み込みフェーズで予期しないレイアウトのズレがどのくらい発生したかを表します。
改善が必要 LCP の問題: 2.5秒 超（モバイル）
⇒LCPとは、Largest Contentful Paint の略で、ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。
ページは崩れてるし、読み込み遅いし！
このページはあかん！
って言われているってことですね。
ということで、怒られた分、反省して改良するんですが、どこをどうすればいいかというと、
上記URLの上でマウスクリックすると、右にタブがでてくるんですね。で、そこに書いてある、PageSpeed Insightsってのをクリックすると、表示速度などの評価をしてくれるサイトに遷移します。
PageSpeed Insights の点数が20点30点で遷移
で28点ってえらい低い・・。
このスコアの意味を理解しようと色々見ていると、さっき出てきたCLSと、LCPもそうなんですが、なんか色々調整するところがありそうです。そこで大事なのかラボデータなのです。
みて下さい、タイムトゥインタラクティブTimetoIntaractiveが14秒とか、トータルブロッキングタイムTotalBlockingTimeが4.7秒とか、何だかよくわからない数値がめっちゃ遅い。で、さっきサーチコンソールでの課題は、CLSとLCPでした。そして、このラボデータ内でLCPを改善するのが今回のミッションです。ラボデータは対策を打つとすぐに反映される数値です。
今現在の見ているURLの数値を示しているこのデータが、対策を行い、CSSのキャッシュをクリアするごとに変化します。
いま大事なこと言いましたので、もう一回いいますが、対策を行ったあとは、CSSキャッシュをクリアしないとこの数値は変わりません。なので、キャッシュエントリをパージするといいいますが、そのためのプラグインを入れる必要があります。
とりあえず、Lightspeed系のサーバーを使っているなら、以下のプラグインをいれましょう。サイト高速化と、適宜パージするために必要です。
で、話を元に戻すと、ラボデータの詳細をみると下記のような項目がアウト！って言われてるんですね。パージは、lightspeedcacheのツールボックスを押して、すべてをパージするというボタンを押すだけ。
サーバーがapacheだったり、私と環境が違う方は、サーバーキャッシュによるスピードアップ系プラグインのキャッシュをパージしながら対策結果を確認していきましょう。
第三者コードの影響を抑えてください 第三者コードによってメインスレッドが 3,290 ミリ秒間ブロックされましたの原因
上記調べていくと、どうやらサイトで自動広告を使用しているのですが、それが影響しているようなんです。
通常、グーグルアドセンスの広告は、ページ読み込み、グーグルアドセンスのジャバスクリプトJavaScript読み込み、その後、広告表示をしてから計測完了となります。
上記のスピード評価は、アドセンス広告を読み込み終了までの速度として評価されているので、読み込まないところまでを評価させるように、グーグルアドセンスgoogleadsense遅延読み込みをテーマに対策をすることが必要と分かったのです。
そもそも、毎回広告がかあるので、パージ、分析、対策、を繰り返していく以前に、2回目の実行時には全く違う結果がでてきます。これは、広告主が変わるから仕方ないということになります。
なので、全体スコアをトータルで大きく改善することを目標にしましょう。実際、この記事の通りにすれば、6秒⇒0.2秒とかに激速になるので、私と同じ環境の人（cocoon、アドセンス自動広告、サーバーは高速サーバーの Lightspeed 系）は安心してついて来てください。
環境が違う人は、それぞれ、ちょっと違いがあるので、違う点だけ個別に調べて対応していくといいでしょう。
調べ方は、 Cocoon アドセンス自動広告遅延読み込み とか、「ブログテーマ+アドセンス自動広告遅延読み込み」で調べるといいですよ。
Cocoonを使ってグーグルアドセンスgoogleadsense自動広告のまま、遅延読み込みする方法
いよいよ本題ですね。まずCocoonの、広告タブの全部をチェック外して広告コードも切り取り削除します。
アドセンス表示方法は自動広告のみ使用のラジオボタンそのままでいいです。
そして、保存をおしましょう。
次に、アクセス解析認証のタブで、
上記の、ヘッド用コード、フッター用のコードに、下記を入力します。XXXXXXは書きかえて下さいね。特に注意したいのは、ヘッド用コードに、元に記載していた、記述を残すとうまく機能しないので、下記シンプルなスクリプト１行に書きかえて下さい。
ヘッド用コード
<script data-ad-client="ca-pub-XXXXXXXX"></script>フッター用 コード
<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-XXXXXXXXXXXX';
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,4000)
});
})(window, document);
</script>
<!--/ Adsense 遅延読み込み -->// 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す の意味としては、
//ad.dataset.adClient = ‘ca-pub-XXXXXXXXXXXX’; の//を外して、
ad.dataset.adClient = ‘ca-pub-XXXXXXXXXXXX’; にしてください。っていう意味です。
コーディングが理解できない初心者には、こんな小さな点でひっかかるんですよね・・。
私もプロではないのでしんどいです。
はい、これだけです！！
なんど、これだけで自動配信のアドセンスと、cocoonが親和するんです！
window.setTimeout(onLazyLoad,4000) のところの4000は、
ユーザーが何も動作しない場合は、4秒遅らせてアドセンスを表示するってことなんですが、3000以上にすれば安定するらしいです。ここは変更可能です。
その後、さっき伝えてキャッシュをパージして、再度 PageSpeed Insights で分析すれば・・。
Cocoonを使ってグーグルアドセンスgoogleadsense自動広告のままでも PageSpeed Insights のスコアが劇的に改善！！
やったー！やりました。
80点いきゃもう、いいっす！大満足です。
ちなみにPCはというと、99点！！
感動！！
頑張ったかいがありましたー！！
で、ラボデータをちゃんと見てみると、全く数値がかわっていて、激速になったんです。
つまり、アドセンスでブロックされる時間を完全にコントロールできました！
やった！
ぜひ、この記事を参考にして、あなたのサイトも最適化してみてください。
下記の皆様のブログで勉強させてもらいました！感謝感謝です。
