【Cocoon】コアウェブバイタルのためにやっておくべきCLS・LCP対応

当サイトはCocoonを使用しておりますが、PageSpeedInsightで合格を出すためにちょろっとだけカスタマイズをしています。備忘録として記事化しておきます。

アイキャッチ画像のpreload
アイキャッチのlazyloadを無効化
フッターロゴのwidthとheightの指定
Adsense認証コード遅延読み込みのコメントアウト

アイキャッチ画像のpreload

LCP改善のために、投稿ページではアイキャッチ画像をいち早く表示できるように画像をpreloadしています。

子テーマのfunction.phpに下記記述。

////LCP対策・アイキャッチpreload
function head_preload_tag() {
if(is_single()){
  if (has_post_thumbnail()) {
    // アイキャッチ画像のIDを取得
    $thumbnail_id = get_post_thumbnail_id();
    // fullサイズの画像内容を取得（引数にfullをセット）
    $eye_img = wp_get_attachment_image_src( $thumbnail_id , 'full' );
    $img_src = $eye_img[0];
  } else {
    $url = get_singular_eyecatch_image_url();
    $img_src = $url;
  }
echo '<link rel="preload" href="'.$img_src.'" as="image">';
}
}
add_action( 'wp_head', 'head_preload_tag', 99);

アイキャッチのlazyloadを無効化

WordPressでは、loading属性によるネイティブlazyloadが実装されていますが、当サイトではアイキャッチ画像がファーストビューで表示されるため、lazyloadが入っているとPageSpeedInsightで注意が出ます。

親テーマのtmp/eye-catch.phpの17行目～26行目

    // fullサイズの画像内容を取得（引数にfullをセット）
    $eye_img = wp_get_attachment_image_src( $thumbnail_id , 'full' );
    $url = $eye_img[0];
    $width = $eye_img[1];
    $height = $eye_img[2];
    $size = $width.'x'.$height.' size-'.$width.'x'.$height;
    $attr = array(
      'class' => "attachment-$size eye-catch-image",
    );

ここの$attrにloading=eager（遅延読み込み無し）させるよう記述

    // fullサイズの画像内容を取得（引数にfullをセット）
    $eye_img = wp_get_attachment_image_src( $thumbnail_id , 'full' );
    $url = $eye_img[0];
    $width = $eye_img[1];
    $height = $eye_img[2];
    $size = $width.'x'.$height.' size-'.$width.'x'.$height;
    $attr = array(
      'class' => "attachment-$size eye-catch-image",
	  'loading'=> "eager",
    );

フッターロゴのwidthとheightの指定

ヘッダーロゴでwidthとheightを指定してもなぜかフッターで適用されず、CLSに影響を与えかねないので修正。

親テーマのlib/html-forms.phpの398行目～409行目

  //ロゴの幅設定
  $site_logo_width = get_the_site_logo_width();
  $width_attr = null;
  if ($site_logo_width && $is_header) {
    $width_attr = ' width="'.$site_logo_width.'"';
  }
  //ロゴの高さ設定
  $site_logo_height = get_the_site_logo_height();
  $height_attr = null;
  if ($site_logo_height && $is_header) {
    $height_attr = ' height="'.$site_logo_height.'"';
  }

上記の幅と高さのif文から「&& $is_header」を削除して下記のように書き換え

  //ロゴの幅設定
  $site_logo_width = get_the_site_logo_width();
  $width_attr = null;
  if ($site_logo_width) {
    $width_attr = ' width="'.$site_logo_width.'"';
  }
  //ロゴの高さ設定
  $site_logo_height = get_the_site_logo_height();
  $height_attr = null;
  if ($site_logo_height) {
    $height_attr = ' height="'.$site_logo_height.'"';
  }

Adsense認証コード遅延読み込みのコメントアウト

tmp/footer-javascript.phpの13～24行目の以下のコードが、私の環境だと不要なようです。

PageSpeedInsightで「使用していない JavaScript の削減」と怒られてしまうのでコメントアウトしています。

  <?php //AdSense非同期スクリプトを出力

  //広告の存在を確認するグローバル変数
  global $_IS_ADSENSE_EXIST;

  //アドセンス共通スクリプトコード
  define('ADSENSE_SCRIPT_CODE', '<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client='.get_adsense_data_ad_client().'" crossorigin="anonymous"></script>');
  //if ($_IS_ADSENSE_EXIST && !is_customize_preview() && !is_cocoon_settings_preview()) {
  if ($_IS_ADSENSE_EXIST && !is_customize_preview()) {
    echo ADSENSE_SCRIPT_CODE;
  } //AdSense非同期スクリプトを出力
  ?>

代わりに、Cocoon設定の「アクセス解析・認証」から、「フッター用コード」に以下のコードを挿入してAdsenseコードの遅延読み込みしています。

<script>
//<![CDATA[
//lazy load ads
var lazyloadads = false;
window.addEventListener("scroll", function() {
    if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {

        (function() {
            var ad = document.createElement('script');
            ad.type = 'text/javascript';
            ad.async = true;
            ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
            var sc = document.getElementsByTagName('script')[0];
            sc.parentNode.insertBefore(ad, sc);
        })();

        lazyloadads = true;
    }
}, true)
//]]>
</script>

結果は以下のとおり。