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

はじめに

kengenius.comの環境やこれまでの改善、コアウェブバイタル対応に至った経緯は以下の記事で記載しています。

これから紹介するGoogle AdSense自動広告用コードの設置は、CocoonとGoogle AdSense自動広告を併用した際、コアウェブバイタルで良いスコアを得るための方法です。上記記事で紹介しているJavaScript遅延読み込み設定を行っていない場合には、ご一読ください。

Google AdSense用コード変更：自動広告用

Google AdSense用コードですが、Cocoon公式サイトで紹介されているGoogle AdSense広告設定とは異なる方法となります。

設定方法

広告タブの設定を無効化

Cocoon設定の広告タブを開き・・・

すべての項目を無効化します。

そのため、Google AdSenseの自動広告設定は、Cocoon設定の広告タブではなく、アクセス解析・認証タブで設定します。

自動広告コード設定

まず、ご利用のGoogle AdSense管理コンソールで自動広告をOnにし・・・

自動広告用のコードを取得します。

このコードを書き換え、以下のようなコードにします。「ca-pub-XXXXXXXXXXXXXXX」はご契約のGoogle Adsense 固有IDに変更してください。

<script data-ad-client="ca-pub-XXXXXXXXXXXXXXX"</script>

上記のコードを、Cocoon設定の広告タブではなく、アクセス解析・認証タブにある、その他のアクセス解析・認証コード設定のヘッド用コードに設定します。

以上で設定はすべて完了となります。

設定変更の効果はいかに？

ここまでの設定を終え、Google Speed Insightsを再度実行しました。

ぱんぱかぱんぱんぱーん！！

モバイル

モバイルで95点、いただきました！

パソコン

パソコンは99点！気分は最高です！

GTmetrix

GTmetrixでも計測してみました。

AとB！！

Google Adsenseを有効化していてもこの数値となるのは、やはり嬉しいですね！

最後にもう一度！

ぱんぱかぱんぱんぱーん！！

ただし・・・

この方法だとGoogle AdSenseの自動広告に任せっきりになり、ご自身が設置したい場所への広告設置が色々難しくなります。

ですので、kengenius.com では、以下の記事で紹介している通り、Google AdSenseは手動広告にて設定しています。

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

さいごに

これでようやくCocoonの本領を発揮できます。さくらインターネット・スタンダードプランでも問題なく95点以上を取れるということもわかりましたね！

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

Cocoonフォーラムでの共有

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

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