2026年5月20日

WordPressのプリフェッチ・プリロードを設定する方法

SEO・パフォーマンス

はじめに

リソースヒント（prefetch・preload・preconnect）はブラウザにリソースの取得を事前に指示する仕組みです。ナビゲーション前にページを読み込んでおく prefetch や、LCP画像を優先取得する preload を適切に設定することで、ページ遷移の体感速度を大幅に改善できます。

症状・原因

ページ遷移のたびに白い画面が長く表示される
LCP画像の読み込みが遅くスコアが低い
外部フォントや外部スクリプトの接続確立に時間がかかる
次のページのリソースがまったくプリロードされていない

解決手順

ステップ1：リソースヒントの種類と用途を理解する

リソースヒント一覧:
┌──────────────┬─────────────────────────────────────┬─────────────────┐
│ 種類         │ 用途                                │ 優先度          │
├──────────────┼─────────────────────────────────────┼─────────────────┤
│ preload      │ 現ページで絶対に必要なリソース      │ 高（即座に取得）│
│              │ LCP画像・クリティカルCSS・フォント  │                 │
├──────────────┼─────────────────────────────────────┼─────────────────┤
│ prefetch     │ 次ページで必要になりそうなリソース  │ 低（暇な時に）  │
│              │ 次の記事・ページネーションの次ページ│                 │
├──────────────┼─────────────────────────────────────┼─────────────────┤
│ preconnect   │ 外部ドメインへの接続を事前確立      │ 中（DNS+TCP+TLS）│
│              │ Google Fonts・外部API・CDN          │                 │
├──────────────┼─────────────────────────────────────┼─────────────────┤
│ dns-prefetch │ DNSのみ事前解決（軽量）             │ 低（DNS解決のみ）│
│              │ preconnectの対応ブラウザが少い場合  │                 │
└──────────────┴─────────────────────────────────────┴─────────────────┘

ステップ2：preloadでLCP画像とフォントを優先読み込みする

// functions.php

function mytheme_add_preload_hints(): void {
    $uri = get_template_directory_uri();

    // LCP画像をpreload（ファーストビューのヒーロー画像）
    $hero_image = $uri . '/assets/images/hero.webp';
    echo '<link rel="preload" href="' . esc_url($hero_image) . '" as="image" type="image/webp">' . "\n";

    // Webフォントをpreload（ネットワーク接続の前にキャッシュに載せる）
    $font_url = $uri . '/assets/fonts/NotoSansJP-Regular.woff2';
    echo '<link rel="preload" href="' . esc_url($font_url) . '" as="font" type="font/woff2" crossorigin="anonymous">' . "\n";

    // クリティカルCSSをpreload
    $critical_css = $uri . '/assets/css/critical.min.css';
    echo '<link rel="preload" href="' . esc_url($critical_css) . '" as="style">' . "\n";
}
add_action('wp_head', 'mytheme_add_preload_hints', 1); // priority:1 で最優先

ステップ3：preconnectで外部ドメインへの接続を事前確立する

// functions.php

function mytheme_add_preconnect_hints(): void {
    // Google Fontsへの接続を事前確立
    echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "\n";
    echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "\n";

    // 外部CDNへの接続を事前確立
    echo '<link rel="preconnect" href="https://cdnjs.cloudflare.com">' . "\n";

    // Google Analyticsへの接続（dns-prefetchで軽量に）
    echo '<link rel="dns-prefetch" href="https://www.google-analytics.com">' . "\n";
    echo '<link rel="dns-prefetch" href="https://www.googletagmanager.com">' . "\n";
}
add_action('wp_head', 'mytheme_add_preconnect_hints', 1);

ステップ4：prefetchで次ページを事前読み込みする

// functions.php

// 記事一覧で次ページをprefetch
function mytheme_prefetch_next_page(): void {
    if (!is_home() && !is_archive() && !is_search()) {
        return;
    }

    global $wp_query;
    $current_page = max(1, get_query_var('paged'));
    $max_pages    = $wp_query->max_num_pages;

    if ($current_page >= $max_pages) {
        return; // 最終ページは不要
    }

    $next_page_url = get_pagenum_link($current_page + 1);
    echo '<link rel="prefetch" href="' . esc_url($next_page_url) . '">' . "\n";
}
add_action('wp_head', 'mytheme_prefetch_next_page');

// 関連記事をprefetch（シングルページ）
function mytheme_prefetch_related_posts(): void {
    if (!is_singular('post')) {
        return;
    }

    $related = get_posts([
        'posts_per_page'         => 2,
        'category__in'           => wp_get_post_categories(get_the_ID()),
        'post__not_in'           => [get_the_ID()],
        'no_found_rows'          => true,
        'update_post_meta_cache' => false,
        'update_post_term_cache' => false,
        'fields'                 => 'ids',
    ]);

    foreach ($related as $post_id) {
        $url = get_permalink($post_id);
        echo '<link rel="prefetch" href="' . esc_url($url) . '">' . "\n";
    }
}
add_action('wp_head', 'mytheme_prefetch_related_posts');

ステップ5：Speculation Rules APIで即時ページ遷移を実現する

// functions.php: Speculation Rules API（Chrome 109以降対応）

function mytheme_add_speculation_rules(): void {
    // ユーザーがリンクにホバーしたページを事前レンダリング
    $rules = [
        'prerender' => [
            [
                'where'      => ['href_matches' => '/*'],
                'eagerness'  => 'moderate', // ホバー時にprerenderを開始
            ],
        ],
    ];

    echo '<script type="speculationrules">' . "\n";
    echo wp_json_encode($rules, JSON_UNESCAPED_SLASHES) . "\n";
    echo '</script>' . "\n";
}
add_action('wp_head', 'mytheme_add_speculation_rules');

注意事項

preload は使いすぎると逆効果です。現ページで使わないリソースにpreloadをつけると帯域を無駄に消費します。LCP画像・フォント・クリティカルCSSに限定してください
フォントの preload には crossorigin="anonymous" が必須です。これがないとフォントが2回ダウンロードされます
Speculation Rules APIの prerender は強力ですが、Cookieの変更などのサイドエフェクトがある外部リンクには適用しないよう href_matches で制限してください

まとめ

preload はLCP画像・フォント・クリティカルCSSに限定し、preconnect で Google Fonts などの外部ドメイン接続を事前確立します。prefetch でページネーションの次ページと関連記事を先読みし、Speculation Rules APIでChrome環境での即時ページ遷移を実現します。すべて wp_head フックから priority:1 で出力します。

Post Views: 11