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

Web制作
Adobe Stockの無料素材

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

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

私自身、以前運営していたWordPressサイトでLCPのスコアが4秒台をうろうろしていて、PageSpeed Insightsでも”改善が必要”という耳の痛い評価を受けていました。それが、ある施策をきっかけにLCPが4.1秒→2.2秒まで短縮。表示が軽くなったのを体感できただけでなく、オーガニック検索からの流入もじわじわ伸びていきました。

その鍵になったのが、header.phpの見直しとファーストビュー画像の扱い方です。

この記事では、まずLCPとは何かを整理したうえで、実際に私が試したWordPress高速化のテクニックを具体的なコードとあわせて紹介します。専門用語もできるだけ噛み砕いて説明していくので、「表示が遅い気がする」という段階の方も気軽に読み進めてください。

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

Web表示速度の指標「LCP」とは

LCP（Largest Contentful Paint）は、Googleが重要指標として掲げるCore Web Vitals（コアウェブバイタル）のひとつです。ユーザーがページを開いてから、画面（ビューポート）内で一番大きなコンテンツが表示されるまでの時間を測る指標です。対象になるのは主に大きな画像やテキストブロックで、動画や背景画像（CSSのurl()）が該当することもあります。

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

この評価は、実際のユーザー訪問の75パーセンタイル（遅い方から数えて上位25%を切り捨てた値）で見るのがGoogleの基準です。つまり「多くの人にとって2.5秒未満で主要コンテンツが見えている」状態を目指すことになります。

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

  • LCPはユーザーの第一印象に直結します。
  • Google検索のページ体験に関わる評価指標のひとつでもあります。
  • SNSシェアや広告からの流入時、離脱率にも影響します。

細かい数字は業種やサイトによって変わりますが、Google自身も「表示が遅くなるほど離脱の確率が上がる」傾向を繰り返し示しています。LCPの改善は、ユーザー体験（UX）とSEOの両面で効いてくる施策だと考えて差し支えないと思います。

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

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

header.phpは、すべてのページに共通で読み込まれるテンプレートファイルです。だいたい次のような要素が入っています。

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

ここに不要な記述や、読み込む順番の悪いコードがあると、全ページの表示速度が一気に落ちます。逆に言えば、header.phpを整えるだけで全ページにまとめて効くということです。

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

WordPressがデフォルトで読み込むemoji関連のスクリプトは、多くのサイトで実質不要です。functions.phpに次の記述を足して止めておきましょう。

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

効果の大きさはサイトによりますが、余計なリクエストを減らせる、素直な一手です。

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

<head>内で同期的に読み込むJavaScriptは、ページの描画をブロックし、LCPを遅らせる原因になります。次のように、フッター側で読み込むようにしておきましょう。

<?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`にすると、</body>直前で読み込まれるようになります。すぐに動かす必要のないスクリプトは、こうして後回しにするのが基本です。

改善策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">

`display=swap`はCSSの`font-display: swap`を指定するもので、Webフォントの読み込みが終わるまでは代替フォントで先にテキストを表示し、読み込み後に差し替えます。フォントを待って文字が真っ白のまま…という状態を避けられるので、体感速度に効きます。

もっとも、フォントに強いこだわりがないなら、速度面ではWebフォントを使わない選択がいちばん軽いのも事実です。ここは見た目とのバランスで決めてください。

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

多くのサイトで、LCPの対象になるのはファーストビューのメイン画像です。ここを詰めるだけで、体感速度がぐっと変わります。

改善策1：LCP画像は優先的に読み込ませる

ポイントは2つ。ファーストビューの主役画像には`loading=”lazy”`を付けないこと、そして`fetchpriority=”high”`で優先度を上げることです。

web.devでも「LCP画像を遅延読み込み（lazy load）してはいけない」とはっきり書かれています。遅延読み込みは画面外の画像を後回しにする仕組みなので、最初に見える主役画像に付けると読み込みが遅れ、LCPを確実に悪化させます。

HTMLに直接書ける画像なら、`fetchpriority=”high”`を付けるだけでもかなり効きます。

<img src="/images/main.jpg" width="600" height="400" alt="メイン画像" fetchpriority="high">

CSSやJavaScript経由で読み込まれる画像など、ブラウザが早期に見つけにくいケースでは、`preload`を併用します。

<link rel="preload" as="image" href="/images/main.jpg" fetchpriority="high">

なお、`fetchpriority=”high”`を付ける画像は1〜2枚までに絞るのがコツです。あれもこれもと優先度を上げると、結局どれも優先されず意味がなくなります。

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

次世代フォーマットは同じ見た目でもファイルが軽く、その分だけ表示も速くなります。`picture`要素を使えば、対応ブラウザにはWebPやAVIF、非対応ブラウザには従来のJPEGを出し分けられます。

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

AVIFはWebPよりさらに高圧縮で、対応ブラウザも広がってきました。`width`と`height`を必ず指定しておくと、読み込み時のレイアウトのガタつき（CLS）も防げます。

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

私が運営していたWordPressサイト（月間PV3万ほど）で実際にやったのは、次の4つです。

  • emoji関連スクリプトの削除
  • JavaScriptのフッター読み込み
  • Google Fontsの最適化（preconnect＋display=swap）
  • メイン画像のWebP化＋優先読み込み（fetchpriority／preload）

結果、PageSpeed Insightsのスコアが「LCP：4.1秒→2.2秒」「モバイルスコア：56点→91点」まで改善しました。派手な作り替えはしていません。header.phpと画像まわりを地道に整えただけで、ここまで動いたということです。

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

LCP改善で期待できること

  • SEO評価（ページ体験）の底上げ
  • モバイルの離脱率の低下
  • ユーザー体験の向上

WordPressサイトの高速化を目指すなら、最初に手を付けたいのはheader.phpとファーストビュー画像の見直しです。特に、LCP画像には遅延読み込みを付けず`fetchpriority=”high”`で優先させる——この一点だけでも変化が見えることがあります。

「最近PVが伸び悩んでいる」「モバイルのスコアが低い」と感じているなら、まずはPageSpeed InsightsでLCPを測り、今回の項目を上から順に試してみてください。ほんの数行の変更が、表示速度と検索流入をじわりと押し上げてくれるはずです。

PHP Web制作 WordPress WordPress高速化

関連する記事