WordPressでpreload・prefetch・preconnectを設定する方法｜標準フィルターで出力する

preload や prefetch は、ブラウザーに「この資源を早めに取りに行ってほしい」と伝える指示です。WordPress では、本体に用意されたフィルターを使うと、functions.php に数行書くだけで <head> に出力できます。この記事では、それぞれの使い分け、WordPress のフィルターを使った書き方、効果の確かめ方を説明します。

コードは WordPress 6.9 で出力を確認しています（2026年10月時点）。

preload・prefetch・preconnect の違い

preload は使わない資源に指定すると、帯域を無駄に使い、ほかの資源の読み込みを遅らせます。<head> の最初のほうで読み込まれる style.css のように、ブラウザーがすぐに見つける資源は preload する必要がありません。対象は、見つかるのが遅いのに表示に欠かせない資源に絞ります。

WordPress が標準で出力しているもの

自分で設定する前に、WordPress が自動で出しているものを確かめておくと、重複を避けられます。

• dns-prefetch: 外部ドメインから読み込むスクリプトやスタイルがあると、そのドメインの dns-prefetch を出力します
• スペキュレーティブローディング（WordPress 6.8 以降）: ログインしていない訪問者に、パーマリンク設定が「基本」以外のサイトで、リンクの先のページを事前に取得する指示（Speculation Rules API）を出力します。既定では prefetch で、リンクを押し始めたときに取得する控えめな設定です
• 画像の fetchpriority（WordPress 6.3 以降）: ファーストビューの主要な画像と判断した img タグに fetchpriority="high" を付けます

ページのソースを表示し、rel='preload'、rel='dns-prefetch'、speculationrules を検索すると、今出ているものがわかります。

preload を出力する（wp_preload_resources）

WordPress 6.1 以降では、wp_preload_resources フィルターに配列を返すと、<head> の先頭近くに <link rel='preload'> が出力されます。使える属性は href・as・type・crossorigin・media・imagesrcset・imagesizes・fetchpriority（6.6 以降）です。

テーマに同梱した Web フォントを preload する例です。子テーマの functions.php に追加します。

<?php
add_filter( 'wp_preload_resources', function ( $resources ) {
	$resources[] = array(
		'href'        => get_theme_file_uri( 'fonts/noto-sans-jp-400.woff2' ),
		'as'          => 'font',
		'type'        => 'font/woff2',
		'crossorigin' => 'anonymous',
	);
	return $resources;
} );

出力は次のようになります。

<link rel='preload' href='https://example.com/wp-content/themes/mytheme/fonts/noto-sans-jp-400.woff2' as='font' type='font/woff2' crossorigin='anonymous' />

注意点は次のとおりです。

• フォントの preload には、同じドメインのファイルでも crossorigin が要ります。付けないと、preload したファイルとは別に、フォントがもう一度ダウンロードされます
• href は、CSS の @font-face で指定している URL と一字一句同じにします。クエリ文字列の有無が違うだけでも別の資源として扱われます
• get_theme_file_uri() は、子テーマにファイルがあれば子テーマの URL を、なければ親テーマの URL を返します

トップページのファーストビューに大きな画像を置いている場合は、条件分岐でそのページだけに出力します。

<?php
add_filter( 'wp_preload_resources', function ( $resources ) {
	if ( is_front_page() ) {
		$resources[] = array(
			'href'          => get_theme_file_uri( 'images/hero.webp' ),
			'as'            => 'image',
			'fetchpriority' => 'high',
		);
	}
	return $resources;
} );

画像を img タグで表示していて、WordPress がすでに fetchpriority="high" を付けているなら、この指定は不要なことが多いです。CSS の背景画像のように、HTML を読んだだけではブラウザーが見つけられない画像に使うと効果が出やすくなります。

preconnect・dns-prefetch・prefetch を出力する（wp_resource_hints）

wp_resource_hints フィルター（WordPress 4.6 以降）では、指示の種類ごとに URL を追加できます。2番目の引数 $relation_type に dns-prefetch・preconnect・prefetch・prerender のどれかが入って呼ばれます。

<?php
add_filter( 'wp_resource_hints', function ( $urls, $relation_type ) {
	if ( 'preconnect' === $relation_type ) {
		// Google Fonts のフォントファイルの配信元に先に接続しておく
		$urls[] = array(
			'href' => 'https://fonts.gstatic.com',
			'crossorigin',
		);
	}
	if ( 'prefetch' === $relation_type && is_front_page() ) {
		// トップページから多くの人が開くページを先に取得しておく
		$urls[] = home_url( '/contact/' );
	}
	return $urls;
}, 10, 2 );

出力は次のとおりです。

<link href='https://fonts.gstatic.com' crossorigin rel='preconnect' />
<link rel='prefetch' href='https://example.com/contact/' />

add_filter() の4番目の引数に 2 を指定しないと、$relation_type が渡されずエラーになります。preconnect は接続を保つ負担があるため、実際に資源を読み込む外部ドメインだけに、数を絞って指定します。

次のページの先読みはスペキュレーティブローディングで調整する

WordPress 6.8 以降では、サイト内のリンク全体の先読みを本体が受け持っています。個々のページを prefetch で指定するより、こちらの設定を調整するほうが手間がかかりません。

先読みを始めるタイミングを早めるには、wp_speculation_rules_configuration フィルターで eagerness を変えます。

<?php
add_filter( 'wp_speculation_rules_configuration', function ( $config ) {
	if ( is_array( $config ) ) {
		$config['eagerness'] = 'moderate'; // 既定は conservative（押し始めたとき）
	}
	return $config;
} );

ログイン中の訪問者や、パーマリンク設定が「基本」のサイトでは $config が null になり、先読みは出力されません。上の例は null のときは何もしません。

カートや決済など、先読みしてほしくないページは、wp_speculation_rules_href_exclude_paths フィルターで除外します。

<?php
add_filter( 'wp_speculation_rules_href_exclude_paths', function ( $paths ) {
	$paths[] = '/cart/*';
	return $paths;
} );

特定のリンクだけを除外したい場合は、リンクかその親要素に no-prefetch クラスを付けます。rel="nofollow" のリンクも先読みの対象になりません。

HTTP ヘッダーで preload を送る場合

preload は HTML の <link> だけでなく、HTTP レスポンスの Link ヘッダーでも指定できます。WordPress のページに付ける場合は、send_headers アクションで送ります。

<?php
add_action( 'send_headers', function () {
	$font = get_theme_file_uri( 'fonts/noto-sans-jp-400.woff2' );
	header( 'Link: <' . esc_url_raw( $font ) . '>; rel=preload; as=font; type="font/woff2"; crossorigin', false );
} );

header() の2番目の引数を false にすると、WordPress が送るほかの Link ヘッダー（REST API の案内など）を上書きせずに追加できます。send_headers の時点ではまだ表示するページが決まっていないため、is_front_page() などの条件分岐は使えません。ページごとに出し分けたいときは、前の節の wp_preload_resources を使います。

.htaccess の <FilesMatch "\.(js)$"> の中に Header set Link を書く方法は、効果がありません。FilesMatch はファイル名が一致したレスポンス、つまり JS ファイル自身のレスポンスにヘッダーを付けるだけで、資源を必要とする HTML ページには付かないためです。

効果を確かめる

1. ページのソースを表示し、<link rel='preload'> などが意図したとおりに出ているか確かめる。ページキャッシュを使っている場合は、先にキャッシュを削除する
2. ブラウザーの開発者ツールの「Network」タブで再読み込みし、preload した資源が早い段階で、1回だけ読み込まれているかを見る。フォントが2回読み込まれている場合は、crossorigin の有無や URL の違いを疑う
3. 「Console」タブに、preload したのに使われなかったという警告（was preloaded using link preload but not used within a few seconds）が出ていないか見る。出ていれば、そのページでは不要なので条件分岐で外す
4. PageSpeed Insights や Lighthouse で、設定の前後の LCP（最大のコンテンツが表示されるまでの時間）を比べる

速度は回線や端末で変わるため、1回の計測で判断せず、数回の結果を比べてください。

まとめ

• preload は今のページ、prefetch は次のページ、preconnect は外部サーバーへの接続の準備に使う
• preload は wp_preload_resources、preconnect・dns-prefetch・prefetch は wp_resource_hints で出力できる
• フォントの preload には crossorigin を付け、URL を CSS と一致させる
• サイト内のページの先読みは、WordPress 6.8 以降のスペキュレーティブローディングの設定で調整する
• .htaccess の FilesMatch で Link ヘッダーを付けても HTML には付かない。ヘッダーで送るなら send_headers を使う
• 開発者ツールで、1回だけ早く読み込まれているか、未使用の警告が出ていないかを確かめる