LCPを最速で改善する方法｜画像・CSS・サーバー最適化の完全ガイド

Core Web Vitals の中でも最も合格しにくいのが LCP（Largest Contentful Paint） です。
特に WordPress（Lightningテーマ含む）では、トップの Hero画像・ヘッダー画像 が原因で LCP が遅くなりやすい傾向があります。

この記事では、LCP を最速で改善するための実装テクニック を詳しく解説します。

1 LCP（Largest Contentful Paint）とは？

ページ表示時に「最も大きな要素」がユーザーに見えるまでの時間を計測した指標です。
多くの場合、次のいずれかが LCP になります。

• トップページの大きな画像（Hero）
• スライダー画像
• アイキャッチ画像
• 最初に大きく表示される見出し

Lightningテーマの場合、特にヘッダー画像がLCPになるケースが90%以上です。

2 LCP改善の基本戦略

最速で改善するための3つの軸は次の通りです。

• 画像を軽くする（圧縮 / WebP）
• 画像を先に読み込ませる（Preload）
• 不要なJS/CSSの遅延・削除

これらを組み合わせることで、LCPを1秒以上短縮できます。

3 ① Hero画像をWebPに変換する（最優先）

まずやるべきは画像の軽量化です。特に Hero画像は 300KB 以内に抑えましょう。

• PNG → WebP で約70%軽くなる
• JPEG → WebP で約40%軽くなる

変換は以下のツールでOKです。

• TinyPNG
• Squoosh
• Convertio WebP

4 ② Hero画像を Preload で先読みする

LCP改善で効果が最も高いのが preload です。
Hero画像を preload すると、ブラウザが最優先で画像を読み込むため、表示速度が大幅改善します。

4.1 functions.phpに追加する preload コード

// Hero画像を Preload（LCP改善）
add_action('wp_head', function() {
    if (is_front_page()) {
        ?>
        <link rel="preload" href="/wp-content/uploads/hero.webp" as="image" fetchpriority="high">
        <?php
    }
});

fetchpriority="high" を付けることで、Chrome が優先読込します。

4.2 Lightningテーマ用の注意点

• ヘッダー画像（Customizer → 画像 → ヘッダー画像）を preload する
• 画像を変更したら preload のURLも更新する

5 ③ Hero画像の HTML に fetchpriority="high" を付ける

WordPress 6.3 以降で正式サポートされ、LCP改善効果が非常に高いです。

5.1 functions.php に自動付与コード

// LCP画像に自動で fetchpriority="high" を付与
add_filter('wp_get_attachment_image_attributes', function($attr) {
    if (isset($attr['class']) && strpos($attr['class'], 'wp-image') !== false) {
        $attr['fetchpriority'] = 'high';
    }
    return $attr;
});

Hero画像・ヘッダー画像が自動的に優先読み込みされます。

6 ④ 画像サイズを最適化する（LCP改善の基本）

「大きすぎる画像」は LCPを確実に悪化させます。

6.1 推奨サイズ

• PC：1400px 〜 1600px
• スマホ：800px 程度

Lightningでは、ヘッダー画像は 1600px × 600px 程度がベストです。

7 ⑤ スライダーを廃止して静止画像に変更する（INP改善にも効果）

スライダーは JS が重く、LCP・INP 両方を悪化させます。
可能なら静止画像のHeroに変更しましょう。

7.1 Lightningで静止画像にする方法

1. カスタマイズ → トップページ
2. スライダーをオフにする
3. Hero画像を1枚だけ設定

これだけで LCP が大幅に改善します。

8 ⑥ CSS/JS を遅延読み込みして LCP を改善

CSS や JS の読み込み順が遅いと、LCP に影響します。

8.1 JS遅延：functions.phpコード

<?php
// JS を defer で遅延読み込み
add_filter('script_loader_tag', function($tag, $handle) {
    if (is_admin()) return $tag;
    if (strpos($tag, 'wp-content') !== false) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}, 10, 2);
?>

メインスレッドのブロッキング時間が減り、LCPの改善につながります。

9 ⑦ 画像に width / height を必ず付ける（CLS改善）

LCPとCLSは密接に関係しています。
画像にサイズを付けないと CLS が発生し、Google が LCP の評価を下げることがあります。

9.1 自動付与コード（CLS対策）

<?php
// CLS改善：画像に width / height を自動付与
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment) {
    $meta = wp_get_attachment_metadata($attachment->ID);
    if (isset($meta['width']) && isset($meta['height'])) {
        $attr['width'] = $meta['width'];
        $attr['height'] = $meta['height'];
    }
    return $attr;
}, 10, 2);
?>

10 LCP改善まとめ（ここだけ見ればOK）

1. Hero画像を WebP に変換
2. 画像サイズを 1600px → 300KB以内 に圧縮
3. preload で Hero画像を先読み
4. fetchpriority="high" を付ける
5. スライダーをオフにする（Lightning）
6. 画像に width / height を必ず付ける
7. JS を defer で遅延読み込み

この内容を実装できれば、LCPはかなりの確率で合格圏に入ります。