Pagespeed Insightsの遅延問題、パフォーマンススコア62の原因と解決策を探る

10秒チェック

Pagespeed Insightsのパフォーマンススコアが低下している
使用しているWordPressテーマは軽量の【Cocoon Child】
複数のコードを導入してみるもパフォーマンスに大きな変化なし

パフォーマンスの課題、特にLCPのスコアが極めて悪い

パフォーマンスの課題、特にLCPのスコアが極めて悪い

PageSpeed Insightsの分析結果において、Webサイトのパフォーマンスが全体的に低評価となっており、特にLCP（Largest Contentful Paint）やレンダリングの遅延のスコアが著しく悪いことがわかりました。

LCPやレンダリングの遅延は、閲覧者がページ内のメインコンテンツを読み込むまでの時間を示しています。このスコアが悪い状態では閲覧者がWebページを閲覧するときの時間がかかったり、果ては検索順位への悪影響も考えられます。

PageSpeed Insightsでパフォーマンススコアが62！？

私のサイトではPageSpeed Insightsの計測で、パフォーマンスのスコアだけが「62」という驚きの結果が表示されました。これは表示速度の最適化において、重大なパフォーマンスの問題が発生している可能性を示しています。

使用している環境はWordPressで、テーマは人気のCocoon Childです。幸いにも定期的にバックアップを取得していたため、どのタイミングでスコアが悪化したのかを確認しながら、パフォーマンス改善に向けて検証を進めていきます。

WordPressの「Cocoon」は、使いやすさと高機能を兼ね備えた国産テーマ

「Cocoon」の子テーマである「Cocoon Child」を使用することで、functions.phpやheader.phpの編集など、高い自由度を活かして自分好みのサイトを構築できます。

完全無料でありながら、有料テーマ並みの機能が揃っている

特にSEO対策が充実しており、Googleが読み取りやすい構造になっています。具体的には、構造化データへの対応、メタタグの自動生成、パンくずリストの最適化などが標準装備されており、検索順位の向上にも期待が持てます。

デザインは初期状態でも洗練されており、シンプルで見やすい外観が特徴

もちろんCSSやウィジェットを活用すれば、自分の好みに合わせて細部までカスタマイズ可能です。さらに、吹き出し、ボックス、ランキング表など、装飾系のパーツが豊富に用意されており、投稿画面からワンクリックで呼び出せる手軽さも魅力です。

Google Adsenseやアフィリエイト運用にも強く、広告コードの一括管理が可能

特に全ページの<head>に挿入すべき広告タグも、Cocoonの管理画面から簡単に設定できます。広告収益を重視したサイト運営にもぴったりです。

ページ表示速度の速さ

高速化が施された設計により、LCP（Largest Contentful Paint）などのコアウェブバイタルにも好影響を与えるテーマ構成になっているようです。

そして何よりも心強いのは、開発者が日本人の「わいひらさん」であるという点です。公式フォーラムも日本語対応で、質問や不具合報告に対する対応も迅速です。アップデートも頻繁に行われ、セキュリティ面でも安心して利用できます。

当サイトもCocoonをテーマとして採用しており、その性能と使いやすさの恩恵を受けています。作成者のわいひらさんにはとても感謝しています。

HTMLをポチポチ打っていたときに比べて世界が変わったような気がします。

記事や画像を保持したままパフォーマンスを再計測してみました

以前のバックアップには投稿記事やメディアファイルがすべて残っているため、装飾等がほとんど無かった頃に近い状態でPageSpeed Insightsのスコアを測定してみました。

PageSpeed Insightsのパフォーマンススコアが非常に高く表示されるようになりました。他の指標も改善され、時間の経過とともに100に達しました。

また、一番スコアが低かった「おすすめの方法」に表示されていたメッセージとは、フロントページと最新の投稿にメタディスクリプションが設定されていなかったことが原因でした。header.phpに<meta>タグを追加することでこの問題は解消され、全体スコアも100に到達しました。

正しい表記かはわかりませんが、このコードを追加することで「おすすめの方法」は100になりました。

// メタディスクリプションを追加
<?php if ( is_front_page() && is_home() ) : ?>
<meta name="description" content="キーワードを含めた説明文">
<?php endif; ?>

なお、Cocoon Childテーマは初期状態で header.php を含んでいないため、カスタマイズを行う際は、レンタルサーバーなどにアクセスし、親テーマから header.php をコピーしておくことが必要です。

現在のデザインとの主な違いは、背景画像とロゴ画像が未設定である点です。ただし、これらの画像はWebP形式で圧縮されており、ファイルサイズはわずか6〜8KBと非常に軽量です。

この程度の軽量画像がないだけで、PageSpeed Insightsのパフォーマンススコア、特にLCP（Largest Contentful Paint）に大きな影響が出るとは考えにくいのが正直なところです。

背景画像とロゴ画像を追加してPagespeed Insightsでスコアを再計測

あえて違和感のある背景画像とロゴ画像を設定し、PageSpeed Insightsのパフォーマンス、特にLCPスコアへの影響を検証しました。デザイン要素の追加がページ表示速度やSEO評価にどう影響するのかを確認するためのテストです。

PageSpeed Insightsのスコアを見ると、LCP（Largest Contentful Paint）画像の読み込み遅延とレンダリング遅延がパフォーマンス低下の主な原因として挙げられていました。そこで、WordPressテーマ「Cocoon Child」のfunctions.phpをカスタマイズし、サイトの軽量化を試みましたが、大きな改善は見られませんでした。

対策として、以下のようなコードを適用しました：

絵文字機能の無効化
Googleフォントの読み込み停止
埋め込みJavaScriptの削除
スクリプトのdefer・async属性の追加

なお、これらのカスタマイズは表示崩れや不具合が発生する可能性があるため、必ず事前にバックアップを取得した上で作業を行うようにしてください。

// 不要なスクリプトやスタイルの読み込みを止める
function remove_unnecessary_scripts() {

  remove_action('wp_head', 'print_emoji_detection_script', 7);
  remove_action('wp_print_styles', 'print_emoji_styles');

  wp_deregister_script('wp-embed');
}
add_action('init', 'remove_unnecessary_scripts');

// Font Awesomeの読み込みを止める
function dequeue_fontawesome() {
  wp_dequeue_style('font-awesome');
}
add_action('wp_enqueue_scripts', 'dequeue_fontawesome', 100);

// Googleフォントを読み込まないようにする Cocoon Child
add_filter('cocoon_google_fonts_url', '__return_false');

// CSSやJSの読み込みをdeferまたはasyncに変更する
function add_defer_to_js($tag, $handle) {
  if (is_admin()) return $tag;

  if ($handle === 'some-script-handle') {
    return str_replace(' src', ' defer src', $tag);
  }

  return $tag;
}
add_filter('script_loader_tag', 'add_defer_to_js', 10, 2);

これだけカスタマイズしても、レンダリング遅延の改善効果はほとんど見られず、PageSpeed Insightsのパフォーマンススコアにも大きな変化はありませんでした。

むしろ、不要なコードの追加によってサイトが重くなるリスクもありました。header.phpにレンダリング遅延の原因かなと思うコードを最適化してみても効果はわずかでした。背景画像やロゴ画像などの容量は6〜8KBと非常に軽量であるため、画像最適化によるスコア改善も限定的といえます。

// 画像のプレロード
<head>
  <?php
    wp_head();
  ?>
  <link rel="preload" as="image" href="<?php echo get_template_directory_uri(); ?>/images/logo.webp" fetchpriority="high">
</head>

原因がわからなかったため、またバックアップから元に戻しました。

原因が判明

PageSpeed Insightsのパフォーマンススコアが92から一気に60台まで急落した原因が判明しました。問題はLCP（Largest Contentful Paint）ではなく、Google Adsenseにありました。

Google Adsenseのスクリプトは通常、<head>タグに配置することが推奨されていますが、このAdsenseコード自体が非常に重く、読み込み時に大きな遅延を引き起こしていたことが原因でした。

これまで、6KB〜8KBといった軽量なWebp形式の画像がLCPを引き下げているのではと考えていましたが、それが原因ではなかったとわかり、スッキリした気持ちです。

とはいえ、現在のPageSpeed Instightsスコアが62という現実は変わりません。今後の課題として、Google Adsenseのコードを貼ったままでも90台のスコアを維持できる方法を検討していきます。

今回の調査は根本的な解決には至りませんでしたが、パフォーマンス改善に向けた大きなヒントを得られたことは確かです。今後、Adsenseコードを維持したままスコア改善に成功した際は、この記事に追記する予定です。

追記: 2025年4月20日

何もしていませんが、61から84に上がりました。何が効いたのかわかりませんが、パフォーマンスが上がったことで良しとすることにしました。90には届きたかったと思います。

LCPが84に戻りました。謎です。

次はheader.phpに次のコードを追加してみて効果をみたいと思います。

// Google AdsenseのJavaScriptコードを非同期で読み込む
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

  <?php wp_head(); ?>
</head>

Pagespeed Insightsの低パフォーマンススコア