2026年6月23日

WordPressでpreload・prefetchを設定する方法

SEO・パフォーマンス

はじめに

この記事では、WordPressサイトの読み込み速度を改善するためにpreloadとprefetch機能を設定する方法について解説します。これらの機能はHTTPヘッダーを使用してブラウザに対してリソースの予め読み込みやキャッシュを促す仕組みで、SEO最適化にも有効です。

症状・背景

このテーマが必要になる主な場面:

サイトの速度が遅く、ユーザーからのフィードバックに改善を求められている場合
Google Lighthouseなどのツールを使用してパフォーマンスをチェックし、preloadやprefetch機能がないことを指摘された場合
WordPressサイトのコンテンツが多く、ページ読み込み時に複数のリクエストが発生する状況

手順・設定方法

ステップ1: プラグインのインストールと設定

# WordPress管理画面にログインし、「プラグイン」→「新規追加」から「Perfmatters」などのパフォーマンス最適化プラグインを検索します。
# 「Perfmatters」をインストールして有効化します。

# プラグインの設定ページに移動し、「HTTPヘッダー」というタブを探します。
# その中で、preloadやprefetch機能が設定できる項目があるか確認してください。

ステップ2: 手動での.htaccessファイルへの追加

# WordPressのルートディレクトリにある.htaccessファイルを開きます。

# ファイル内に以下のコードを追加します。これはJavaScriptファイルに対してprefetch機能を有効化する例です。
<FilesMatch "\.(js)$">
Header set Link "</wp-content/themes/twentytwentyone/js/main.js>; rel=preload; as=script"
</FilesMatch>

# CSSファイルに対するpreload設定の例:
<FilesMatch "\.(css)$">
Header set Link "</wp-content/themes/twentytwentyone/style.css>; rel=preload; as=style"
</FilesMatch>

ステップ3: WordPressテーマ内のfunctions.phpへの追加

# テーマディレクトリの「functions.php」ファイルを開きます。

# 以下のように関数を追加することで、特定の画像やJavaScriptファイルに対してpreload設定を行うことができます。
function custom_preload() {
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/images/logo.png" as="image">';
}
add_action('wp_head', 'custom_preload');

# 以下はCSSファイルに対するprefetch設定の例:
function custom_prefetch() {
    echo '<link rel="prefetch" href="' . get_template_directory_uri() . '/css/style.css">';
}
add_action('wp_footer', 'custom_prefetch');

ステップ4: デプロイ後の確認とテスト

# WordPressサイトをブラウザで開き、デベロッパーツールのネットワークタブを開きます。

# 各リソースがpreloadやprefetch設定により適切に読み込まれていることを確認します。

注意事項

関連ファイル名: リソースのURLは正確に指定する必要があります。間違ったパスやファイル名を指定すると、preload/prefetchが機能しません。

プラグイン依存性: 使用しているWordPressテーマやプラグインによっては、.htaccessファイルへの直接的な変更が必要な場合があります。

セキュリティ上の注意: リソースのURLを公開する際には、不正アクセス対策も講じる必要があります。通常のブラウザ動作では問題ありませんが、意図しない場所から参照されてしまう可能性もあります。

パフォーマンス/運用上の注意: preloadやprefetch機能は効果がある一方で、設定が複雑すぎると運用に支障をきたすことがあります。適切なバランスを見つけることが重要です。

まとめ

1. プラグイン利用: プラグインを使用することで簡単にpreload/prefetchを設定できます。

2. 手動設定の利点: .htaccessファイルやfunctions.phpへの直接的な変更は細かい調整が可能です。

3. デプロイ後の確認: 実装後、リソースが適切に読み込まれていることを確認しましょう。

4. 注意事項: 正確なURL指定とセキュリティ対策を忘れずに実施してください。

Post Views: 1