2026年5月20日

WordPressのPageSpeed Insightsスコアを改善する方法

SEO・パフォーマンス

はじめに

PageSpeed Insights（PSI）はGoogleが提供するページ速度計測ツールです。スコアはCore Web Vitals（LCP・CLS・INP）に基づいており、Googleの検索ランキングにも影響します。WordPressサイトで90点以上を目指すための具体的な改善手順を解説します。

症状・原因

PageSpeed InsightsのスコアがモバイルでRedゾーン（0〜49）になっている
「レンダリングブロックリソースの除去」の警告が出る
LCP（最大コンテンツフル描画）が2.5秒を超えている
CLS（累積レイアウトシフト）スコアが0.1を超えている

解決手順

ステップ1：現状スコアを計測する

# PageSpeed Insights API でスコア取得
curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://example.com/&strategy=mobile" \
  | python3 -m json.tool | grep -E '"score"|"title"'

# lighthouse CLI でローカル計測
npm install -g lighthouse
lighthouse https://example.com/ --output=html --output-path=report.html --view

ステップ2：LCPを改善する（目標：2.5秒以内）

// functions.php: LCP画像（ファーストビューのアイキャッチ）をpreload

add_action('wp_head', function (): void {
    if (!is_singular()) {
        return;
    }
    if (!has_post_thumbnail()) {
        return;
    }
    $src = wp_get_attachment_image_src(
        get_post_thumbnail_id(),
        'large'
    );
    if (!$src) {
        return;
    }
    // preload でブラウザに優先取得を指示
    echo '<link rel="preload" as="image" href="' . esc_url($src[0]) . '">' . "\n";
}, 1);

// アイキャッチ画像に fetchpriority="high" を追加
add_filter('post_thumbnail_html', function (string $html): string {
    if (is_singular() && in_the_loop()) {
        $html = str_replace(
            'class="attachment-',
            'fetchpriority="high" loading="eager" class="attachment-',
            $html
        );
    }
    return $html;
});

ステップ3：CLSを改善する（目標：0.1未満）

// functions.php: 画像に width/height を自動付与
add_filter('the_content', function (string $content): string {
    // WordPressは5.5以降、wp_filter_content_tags()で自動付与
    // 手動で追加が必要な場合:
    return $content;
});

/* style.css: レイアウトシフトを防ぐCSS */

/* 画像のアスペクト比を確保 */
img {
    max-width: 100%;
    height: auto; /* width/height属性がある場合、CLS防止に有効 */
}

/* アイキャッチ画像コンテナにアスペクト比を設定 */
.post-thumbnail {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 広告・埋め込みコンテンツの領域を事前確保 */
.ad-container {
    min-height: 250px; /* 広告の高さを事前確保 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Webフォント読み込み時のCLSを防ぐ */
body {
    font-display: swap; /* フォント切替時のレイアウトシフトを最小化 */
}

ステップ4：レンダリングブロックを解消する

// functions.php

// CSSを非同期読み込み（クリティカルでないスタイルシート）
add_filter('style_loader_tag', function (string $html, string $handle): string {
    // クリティカルCSSは除外
    $critical = ['main-style', 'theme-style'];
    if (in_array($handle, $critical, true)) {
        return $html;
    }
    // preloadで非同期読み込みに変更
    $html = str_replace("rel='stylesheet'", "rel='preload' as='style' onload=\"this.onload=null;this.rel='stylesheet'\"", $html);
    $html .= "<noscript>" . str_replace("rel='preload' as='style' onload=\"this.onload=null;this.rel='stylesheet'\"", "rel='stylesheet'", $html) . "</noscript>\n";
    return $html;
}, 10, 2);

// JSをdeferで読み込み（WP6.3+）
add_filter('wp_enqueue_scripts', function (): void {
    // strategy: 'defer' で登録
    wp_script_add_data('my-script', 'strategy', 'defer');
});

ステップ5：Googleフォントを最適化する

// functions.php: Googleフォントをローカルホストに変換

// 方法1: display=swap を追加
add_filter('style_loader_src', function (string $src): string {
    if (str_contains($src, 'fonts.googleapis.com')) {
        if (!str_contains($src, 'display=')) {
            $src .= (str_contains($src, '?') ? '&' : '?') . 'display=swap';
        }
    }
    return $src;
});

// 方法2: preconnect を追加してDNS解決を高速化
add_action('wp_head', function (): void {
    echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "\n";
    echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "\n";
}, 1);

注意事項

PSIのスコアはラボデータ（シミュレーション）とフィールドデータ（実際のユーザーデータ）で異なります。SEOに影響するのはフィールドデータです
モバイルスコアはデスクトップより低くなりがちです。まずモバイルを優先して改善してください
スコアは計測のたびに数点変動します。複数回計測した平均で判断してください

まとめ

LCPはアイキャッチ画像のpreloadとfetchpriority="high"で改善します。CLSは画像のwidth/height属性付与とaspect-ratioCSSで防ぎます。レンダリングブロックはCSSのpreload非同期化とJSのdefer化で解消します。Googleフォントはdisplay=swapとpreconnectを追加して最適化します。

Post Views: 18