WordPress高速化の鍵！header.phpとLCP改善完全ガイド

2025.05.14 2025.05.14 Wordpress
Adobe Stockの無料素材

Webサイトの表示速度、気になっていませんか？

「PageSpeed InsightsでLCPが4秒を超えている…」「モバイルユーザーの離脱率が高い気がする」そんな悩みを抱えている方も多いと思います。

私自身、以前運営していたWordPressサイトで、LCPのスコアが4秒台をうろうろしており、GoogleのPageSpeed Insightsでは”改善が必要”という厳しい評価を受けていました。しかし、ある施策をきっかけにスコアが劇的に改善。LCPが4.1秒→2.2秒に短縮され、SEO評価も上昇。実際にオーガニック検索からの流入が2倍近く増えました。

その鍵となったのが、header.phpの最適化とファーストビュー画像の扱い方です。

この記事では、LCPとは何かを解説したうえで、実際に私が行ったWordPressサイトの高速化テクニックを具体的なコードとともに紹介します。初心者の方にも理解できるよう、用語も噛み砕いて説明していきますので、ぜひ最後までご覧ください。

LCPとは何か？なぜ改善が重要なのか

Web表示速度の新常識「LCP」とは

LCP（Largest Contentful Paint）は、Googleが提唱するCore Web Vitals（コアウェブバイタル）のひとつです。ユーザーがページを開いたときに、画面内で一番大きなコンテンツ（主に画像やテキスト）が表示されるまでの時間を計測する指標です。

LCPスコアの評価基準 時間
良好 2.5秒未満
改善が必要 2.5〜4.0秒
不良 4.0秒以上

なぜLCPの改善が重要なのか

  • LCPはユーザーの第一印象に直結します。
  • Google検索結果の評価指標（ランキング要素）でもある。
  • SNSシェアや広告流入時の直帰率にも大きな影響を与える。

表示速度が1秒改善されると、モバイルユーザーのコンバージョン率が最大27%向上するというデータもあります。LCPの改善は、ユーザー体験（UX）とSEOの両面から非常に効果的な施策なのです。

header.phpの最適化：WordPress高速化の基本

header.phpがサイト速度に与える影響

header.phpはすべてのページに共通して読み込まれるテンプレートファイル。以下のような要素が含まれています。

  • <meta>やOGPなどのメタ情報
  • CSS・JavaScriptの読み込み
  • Google Fontsや外部APIの呼び出し

このファイルに不要な記述や順序の悪い読み込みがあると、サイトの表示速度は一気に落ちます。

改善策1：不要なスクリプト・スタイルの削除

WordPressデフォルトで読み込まれるemoji関連スクリプトは、多くの場合不要です。

<?php
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
?>

これだけで、LCPが0.5秒前後改善された事例もあるそうです。

改善策2：JavaScriptはフッターで読み込む

JavaScriptの読み込みはページの描画をブロックします。以下のように、JSはフッターに配置しましょう。

<?php
function my_scripts() {
  wp_enqueue_script('my-script', get_template_directory_uri() . '/js/script.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'my_scripts');
?>

最後の`true`でfooterに読み込まれるようになります。

改善策3：Google Fontsの最適化

Google Fontsを使う場合は、`preconnect`と`display=swap`を組み合わせるのが効果的です。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

これにより、フォント読み込みにかかる時間を大幅に短縮できます。もしフォントにこだわりがないのなら、WEBフォントは使わない方が（ページの速度の面で考えれば）無難です。

LCP改善のもう一つの鍵：ファーストビュー画像の最適化

多くのサイトでLCPの対象はファーストビューのメイン画像です。ここを改善するだけで、体感速度が一気に向上します。

改善策1：preloadで優先読み込み

ファーストビュー画像には`loading=”lazy”`を避け、代わりに`preload`を使った方がいいようです。

<link rel="preload" as="image" href="/images/main.jpg">
<img src="/images/main.jpg" width="600" height="400" alt="メイン画像">

改善策2：WebPやAVIF形式を活用する

次世代フォーマットは軽量で表示も高速です。

<picture>
  <source srcset="main.avif" type="image/avif">
  <source srcset="main.webp" type="image/webp">
  <img src="main.jpg" alt="メイン画像" width="600" height="400">
</picture>

AVIFは、WebPよりもさらに高圧縮。対応ブラウザも増えつつあります。

実例：LCPが2秒近く改善した私のサイト

私の運営サイト（WordPress／月間PV3万）で実施した内容は以下のとおり。

  • emoji削除
  • JavaScriptのフッター読み込み
  • Google Fonts最適化
  • メイン画像のWebP化＋preload対応

結果、PageSpeed Insightsのスコアが「LCP：4.1秒→2.2秒」「モバイルスコア：56点→91点」に改善されました。SEO順位も若干ですが上昇し、CTR（クリック率）も向上しました。

まとめ：LCP改善は表示速度改善の第一歩

LCP改善のメリット

  • SEO評価の向上
  • モバイル離脱率の低下
  • ユーザー体験の向上

WordPressサイトの高速化を目指すなら、まず取り組むべきはheader.phpとファーストビュー画像の見直しです。LCPは見え方の「第一印象」を左右する最重要指標です。小さな変更でも確実に効果が表れます。

もし「最近PVが伸び悩んでいる」「モバイルのスコアが低い」と感じたら、ぜひ今日から試してみてください。コードの一部を変更するだけで、検索流入・ユーザー滞在時間・売上が変わるかもしれません。

Tags：、、

コメントはこちら

コメントは管理人の承認後、反映されます。