WordPressにプリローダーを追加する方法：ステップバイステップガイド

目次

2026年5月更新。

TL;DR: プリローダーアニメーションは重いアセットの読み込み中の隙間を埋めます。2026年に適切なプラグインはWP Smart Preloaderか軽量なカスタムスニペットですが、サイトがすでに高速であればスキップしてください。調整が不十分なプリローダーはLCPに悪影響を与えます。

2026年にプリローダーを追加すべきか？

使い方を説明する前に、正直な答えをお伝えします：ほとんどのサイトはプリローダーを追加すべきではありません。

GoogleのCore Web VitalsはLargest Contentful Paint（LCP）—最も見えやすいコンテンツがどれだけ速く表示されるか—を測定します。プリローダーはアニメーションで画面を覆い、そのペイントを文字通り遅延させます。プリローダーが1.5秒実行されるだけで、すべてのページ読み込みで1.5秒のLCPペナルティが確定します。

プリローダーが意味をなすケース：

• サイトが本当に重い場合—大きなヒーロー動画、インタラクティブマップ、キャンバスベースのアニメーションなど—プリローダーなしでは空白の状態が壊れているように見える。
• ユーザーに実際のフィードバックを与えるローディングバーや進捗インジケーターがある場合（美観のためのスピナーだけではなく）。

スキップすべきケース：

• 一般的なブログ、ポートフォリオ、またはWooCommerceストアを持っている場合。代わりにサイトを高速化してください—画像の遅延読み込み、CDNの使用、より速いホストへの切り替えなど。
• LCPがすでに2.5秒以下の場合。プリローダーを追加するとさらに悪化します。

それでも進めたい場合は、Gutenberg / Full Site Editing時代に正しく行う方法を説明します。

プリローダーとは？

プリローダーとは、ブラウザがページリソースをダウンロードしてレンダリングする間に表示されるUIエレメントです—通常はアニメーションスピナー、プログレスバー、またはブランドロゴアニメーション。テキストとHTMLは速く読み込まれますが、画像や埋め込み動画は時間がかかります。プリローダーはその隙間を埋め、ユーザーが空白や部分的にレンダリングされたレイアウトではなく何かを見られるようにします。

旧来のWordPress（5.0以前のクラシックエディタ時代）では、プリローダーはheader.phpを直接編集して追加されることが多かったです。2026年、GutenbergとFSEテーマの時代では、テーマファイルを直接編集することは強く推奨されません—テーマの更新で変更が上書きされます。代わりにプラグインまたはCode Snippetsのアプローチを使用してください。

WordPressにプリローダーを追加する方法（2026年の方法）

方法1 — WP Smart Preloaderプラグイン

WP Smart Preloaderは、クラシックテーマとブロックテーマの両方で動作するWordPress.orgリポジトリの無料プラグインです。インストール前に、現在のWordPressバージョンとの互換性があり積極的にメンテナンスされていることを確認してください—プラグインのメンテナンス状況は変わる可能性があります。リポジトリページの「最終更新日」を確認してください。

1. WordPressダッシュボードでプラグイン → 新規追加に移動し、「WP Smart Preloader」を検索します。
2. インストールして有効化します。
3. 設定 → WP Smart Preloaderに移動します。
4. 組み込みオプションからプリローダースタイルを選択するか、カスタムHTML/CSSを貼り付けます。
5. **「ホームページのみに表示」**の下—アニメーションをホームページのみに表示したい場合はこれを有効にします。すべてのページでプリローダーを実行すると、サイト全体のLCPコストが倍増します。
6. ローダーを表示する時間を設定します。デフォルトは1500ミリ秒です。より低くすることをお勧めします—最大800〜1000ミリ秒。実行時間が長いほど、LCPスコアが悪化します。
7. 変更を保存をクリックし、前後でPageSpeed Insightsでテストします。LCPが上昇した場合は、プラグインを削除します。

方法2 — Code Snippetsプラグインを使用したカスタムコード

専用プリローダープラグインなしで完全なコントロールを望む場合は、Code Snippetsプラグイン（無料、広くメンテナンスされている）を使用して、テーマファイルに触れずにマークアップとスタイルを注入します。

ステップ1 — HTMLスニペットを追加（PHP）

Code Snippetsで、「フロントエンドのみ」で実行するように設定した新しいスニペットを作成します：

function ar_add_preloader() {
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

注記：wp_body_openはテンプレートでwp_body_open()を呼び出すテーマでのみ動作します。ほとんどのモダンなブロックテーマとメンテナンスされたクラシックテーマはこれを行っています。プリローダーが表示されない場合は、テーマがこのフックをサポートしているか確認してください。

ステップ2 — CSSを追加

「フロントエンドのみ → CSS」に設定した2番目のスニペットを作成します：

#ar-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}
#ar-preloader.hidden {
    opacity: 0;
    pointer-events: none;
}
.ar-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #333;
    border-radius: 50%;
    animation: ar-spin 0.7s linear infinite;
}
@keyframes ar-spin {
    to { transform: rotate(360deg); }
}

ステップ3 — 非表示JavaScriptを追加

「フロントエンドのみ → JavaScript」に設定した3番目のスニペットを作成します：

(function () {
    var el = document.getElementById('ar-preloader');
    if (!el) return;
    window.addEventListener('load', function () {
        el.classList.add('hidden');
        setTimeout(function () { el.remove(); }, 350);
    });
})();

これはDOMContentLoadedではなくwindow.loadイベント（画像とサブフレームが読み込まれた後）でプリローダーを削除します。DOMContentLoadedは早すぎます。

方法3 — ブロックテーマ / FSE：ローディングオーバーレイブロックまたはプラグインを使用

Full Site Editingテーマ（Twenty Twenty-Four、Kadence、GeneratePressブロックモードなど）を使用している場合、一部のページビルダープラグイン（Elementor、Kadence Blocks、Spectra）は設定にプリローダーまたはローディング画面のオプションが組み込まれています。まずテーマやビルダーのドキュメントを確認してください—組み込みのプリローダーの上に別のプラグインでプリローダーを重複させると、二重オーバーレイが発生します。

公開前のパフォーマンスチェックリスト

プリローダーを公開する前に、以下をすべて確認してください：

1. プリローダーなしでPageSpeed Insightsテストを実行します。LCPを記録します。
2. プリローダーを有効にして同じテストを実行します。LCPが約100ミリ秒以上悪化した場合は再検討します。
3. プリローダーの持続時間を1000ミリ秒以下に抑えます。それより長いとUXとランキングのリスクになります。
4. モバイル4Gスロットル接続でテストします（Chrome DevTools → ネットワーク → Fast 4G）。プリローダーは遅い接続ではより長く感じます。
5. プリローダーがスクリーンリーダーから隠されており（aria-hidden="true"）、キーボードフォーカスをトラップしないことを確認します。

WordPressプリローダーFAQ — 2026

プリローダーはSEOに影響しますか？

はい、影響する可能性があります。GoogleのCore Web Vitals—特にLCP—は確認済みのランキングシグナルです。コンテンツの前に置かれたプリローダーはLCPを遅延させます。ほとんどの標準的なWordPressサイトでは、プリローダーを完全にスキップして、画像最適化とキャッシュに時間を投資することをお勧めします。サイトが本当に重くてプリローダーが必要な場合は、持続時間を短くし、Google Search ConsoleでCWVを監視してください。

プリローダープラグインはFull Site Editing（Gutenberg）テーマで動作しますか？

ほとんどは動作します。テーマがwp_body_open()を呼び出している限り。WordPressブロックエディタ自体は、ブラウザでのページ読み込みイベントの動作を変更しません。WordPress.orgリポジトリのプラグインの「テスト済みバージョン」を確認して、インストールされたWordPressバージョンとの互換性を確認してください—互換性の状態は変わります。インストール時に確認してください。

2026年にプラグインなしでプリローダーを追加できますか？

はい—上記のCode Snippetsメソッドは、プラグインなしの最もクリーンなアプローチです。テーマの更新に対して存続し、無効化が簡単で、マークアップとタイミングに完全なコントロールを提供します。アクティブまたは子テーマのheader.phpを直接編集することは避けてください。メンテナンスの負債を追加し、テーマを切り替えると壊れます。

プリローダーがすべてのページに表示されます。ホームページのみに制限するにはどうすればよいですか？

WP Smart Preloaderでは、設定で「ホームページのみに表示」をチェックします。カスタムコードアプローチの場合は、add_action呼び出しを条件でラップします：

function ar_add_preloader() {
    if ( ! is_front_page() ) return;
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

関連記事：

• WordPressサイトを高速化する方法
• 最高のWordPressプラグイン
• WordPress.comとWordPress.org

このガイドはalejandrorioja.comの一部です—Alejandro Riojaが執筆し、 現在は創業者向けAIエージェントシステムを構築しています。このサイトを最新の状態に保つエージェントを含む。仕組みについて →

2026年5月更新

2026年5月からの短いメモ：この投稿で説明されているワークフローは、基礎となるツールとプラットフォームの現在の状態に照らして確認されました。特定のツール、UI、または機能が進化した場合も、構造的なアドバイスは引き続き有効です—実装は2026年では少し異なって見えるでしょう。画面に表示されるものと一致しないステップがある場合は、基本的なアプローチの変更ではなく、UIのリフレッシュである可能性があります。お問い合わせフォームからご連絡ください。明示的に修正します。