2026年10月4日

WordPressのフロントエンド表示が遅い問題を解決する方法【総合高速化】

SEO・パフォーマンス

はじめに

WordPressのフロントエンド（ユーザーが見る側）の表示速度はSEOと直帰率に直接影響します。Core Web Vitals（LCP・CLS・INP）のスコア改善のために、CSS/JSの最適化・フォント最適化・サーバー応答時間の短縮が重要です。

症状・原因

PageSpeed Insightsで「レンダーブロッキングリソースの除去」と指摘される
LCP（最大コンテンツ描画）が4秒以上かかっている
Google Fontsの読み込みが遅く、フォント表示が遅延している
大量のCSSファイルが直列に読み込まれている

解決手順

ステップ1：CSS/JSの最適化を実装する

// functions.php: スクリプトをdeferに変換
add_filter('script_loader_tag', function(string $tag, string $handle): string {
    // 管理画面は除外
    if (is_admin()) return $tag;

    // 特定スクリプトをdeferに
    $defer_scripts = ['my-theme-script', 'jquery-migrate'];

    if (in_array($handle, $defer_scripts, true)) {
        return str_replace(' src=', ' defer src=', $tag);
    }

    // 特定スクリプトをasyncに
    $async_scripts = ['google-analytics'];

    if (in_array($handle, $async_scripts, true)) {
        return str_replace(' src=', ' async src=', $tag);
    }

    return $tag;
}, 10, 2);

// jQueryをフッターに移動
add_action('wp_enqueue_scripts', function(): void {
    // jQueryをフッターで読み込む
    wp_scripts()->add_data('jquery', 'group', 1);
    wp_scripts()->add_data('jquery-core', 'group', 1);
    wp_scripts()->add_data('jquery-migrate', 'group', 1);
});

// 使用していないCSS/JSを除外
add_action('wp_enqueue_scripts', function(): void {
    // WordPress埋め込みCSSが不要な場合
    if (!is_singular() || !has_blocks()) {
        wp_dequeue_style('wp-block-library');
        wp_dequeue_style('wp-block-library-theme');
        wp_dequeue_style('global-styles');
    }

    // 絵文字関連（不要な場合）
    wp_dequeue_style('dashicons');  // フロントエンド
    remove_action('wp_head', 'print_emoji_detection_script', 7);
    remove_action('wp_print_styles', 'print_emoji_styles');
});

ステップ2：Google Fontsを最適化する

// Google Fontsをself-hostingに変更（プライバシー・速度向上）
// functions.php: Google Fontsのpreload追加とfont-displayの設定

add_action('wp_head', function(): void {
    // フォントをpreconnect（DNS事前接続）
    echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "\n";
    echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "\n";

    // フォントをpreload（最も使用するウェイトのみ）
    echo '<link rel="preload" as="font" type="font/woff2" crossorigin
         href="/wp-content/fonts/noto-sans-jp-400.woff2">' . "\n";
}, 1);

// CSSでのフォント設定
add_action('wp_head', function(): void {
    echo '<style>
@font-face {
    font-family: "Noto Sans JP";
    src: url("/wp-content/fonts/noto-sans-jp-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* フォント読込中は代替フォントを表示 */
}
:root {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}
</style>';
}, 5);

// テーマが読み込むGoogle Fontsを置き換え
add_filter('style_loader_src', function(string $src): string {
    if (str_contains($src, 'fonts.googleapis.com')) {
        // ローカルフォントURLに変更
        return str_replace('https://fonts.googleapis.com', '/wp-content/fonts', $src);
    }
    return $src;
});

ステップ3：Critical CSSを実装する

// Critical CSS（ファーストビューに必要な最小限のCSS）をインラインで出力
add_action('wp_head', function(): void {
    $critical_css_file = get_template_directory() . '/assets/css/critical.css';

    if (!file_exists($critical_css_file)) return;

    $critical_css = file_get_contents($critical_css_file);

    // メインCSSはpreloadで非ブロッキング読み込みに変更
    echo '<style id="critical-css">' . $critical_css . '</style>' . "\n";
}, 1);

// メインCSSをpreloadで非ブロッキング読み込み
add_filter('style_loader_tag', function(string $tag, string $handle, string $src): string {
    if ($handle !== 'my-theme-style') return $tag;

    // preload方式でCSSを非ブロッキングに
    return sprintf(
        '<link rel="preload" href="%s" as="style" onload="this.onload=null;this.rel=\'stylesheet\'">' .
        '<noscript>%s</noscript>',
        esc_url($src),
        $tag
    );
}, 10, 3);

ステップ4：サーバー側の最適化を設定する

# Nginx: gzip圧縮・HTTP/2・Keep-Alive設定
# /etc/nginx/conf.d/performance.conf

# Gzip圧縮
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types
    text/css
    text/javascript
    application/javascript
    application/json
    image/svg+xml
    font/woff2;

# ブラウザキャッシュ
map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;      # HTMLはキャッシュしない
    text/css                   1y;
    application/javascript     1y;
    image/webp                 1y;
    ~image/                    1y;
    font/woff2                 1y;
}
expires $expires;

# HTTP/2 Server Push（重要なリソースをプッシュ）
# location = / {
#     add_header Link "</style.css>; rel=preload; as=style";
# }

ステップ5：LCPを最適化する

// LCP最適化: ヒーロー画像のpreloadとfetchpriority
add_action('wp_head', function(): void {
    if (!is_singular()) return;

    $thumbnail_url = get_the_post_thumbnail_url(null, 'large');

    if (!$thumbnail_url) return;

    // ヒーロー画像をpreload（LCP改善に最も効果的）
    printf(
        '<link rel="preload" as="image" href="%s" fetchpriority="high" imagesizes="100vw" imagesrcset="%s">' . "\n",
        esc_url($thumbnail_url),
        wp_get_attachment_image_srcset(get_post_thumbnail_id(), 'large') ?: esc_url($thumbnail_url)
    );
}, 1);

// img タグにwidth/heightを確実に設定（CLS防止）
add_filter('wp_get_attachment_image_attributes', function(array $attrs): array {
    // widthとheightが未設定の場合はデフォルト値を設定
    if (!isset($attrs['width']) && !isset($attrs['height'])) {
        $attrs['width']  = '800';
        $attrs['height'] = '600';
    }

    // アスペクト比をインラインスタイルで設定
    if (isset($attrs['width'], $attrs['height'])) {
        $ratio = (int) $attrs['height'] / (int) $attrs['width'] * 100;
        $attrs['style'] = ($attrs['style'] ?? '') . "aspect-ratio: {$attrs['width']}/{$attrs['height']};";
    }

    return $attrs;
});

注意事項

deferとjQuery: jQueryに依存するスクリプトをdeferにする場合、jQueryより後に実行されるようスクリプトの順序を確認してください
Critical CSSの生成: Critical CSSはPageSpeed Insights・Criticalライブラリ・手動などで生成できます。定期的に更新が必要です
フォントのself-hosting: Google Fontsをself-hostingにする場合はライセンスを確認してください（OFL-1.1ライセンスは許可）

まとめ

フロントエンド高速化の総合対策は「CSS/JSのdefer化→不要リソースの除外→Google Fontsの最適化→Critical CSS実装→LCPのpreload設定」の5ステップです。これらを組み合わせることでPageSpeed Insightsのスコアを大幅に改善できます。関連記事：Core Web Vitalsの改善方法