本ページはプロモーションが含まれています

サイト表示速度アップ！特定のページだけSwiper.jsなどのスクリプトを読み込む条件分岐

公開日

トップページにしかスライダー（Swiper.jsなど）を設置していないのに、全ページの裏側で重たいJavaScriptやCSSファイルが読み込まれていませんか？

WordPressはデフォルトのままだと、プラグインや自作のスクリプトを「すべてのページ」で読み込んでしまう仕様になっています。これがサイトの表示速度を落とす大きな原因です。

今回は、functions.phpを使って「特定のページが開かれた時だけスクリプトを読み込む」ように条件分岐させ、サイトを劇的に軽くする実務必須のテクニックを解説します！

なぜ条件分岐が必要なのか？

GoogleのSEO評価（Core Web Vitals）において、サイトの表示速度は非常に重要な指標です。使っていないJavaScript（Unused JavaScript）を読み込ませることは、ユーザーの通信量を無駄に消費し、離脱率を高める原因になります。

💡 表示速度アップのメリット
  • SEO評価の向上： Googleの検索順位で有利に働きやすくなります。
  • ユーザー体験の改善： サクサク動くことで読者の直帰率が下がります。
  • サーバー負荷の軽減： 無駄なファイル転送がなくなり、サーバーに優しくなります。

functions.phpで条件分岐して読み込む方法

⚠️ 編集前の注意点（必ずバックアップを！）

functions.php を編集する際は、必ず事前にファイルのバックアップを取ってください。記述ミスがあるとサイトが真っ白になる危険があります。ローカル環境でテストしてから本番環境に反映するのが最も安全です。

WordPressでスクリプトを読み込む際、通常は wp_enqueue_script() を使います。これを if 文とWordPress独自の「条件分岐タグ」で囲むだけでOKです。

① トップページだけでSwiper.jsを読み込む例

スライダーをトップページにしか配置していない場合の記述例です。

function my_custom_scripts() {
    // トップページ（フロントページ）の場合のみ実行
    if ( is_front_page() ) {
        // SwiperのCSSを読み込み
        wp_enqueue_style( 'swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css' );
        // SwiperのJSを読み込み
        wp_enqueue_script( 'swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), null, true );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

② 特定の固定ページ（スラッグ指定）だけで読み込む例

例えば、お問い合わせページ（スラッグ名が contact）だけで専用のスクリプトを読み込ませたい場合は、is_page() を使います。

function my_contact_scripts() {
    // スラッグが 'contact' の固定ページのみ実行
    if ( is_page( 'contact' ) ) {
        wp_enqueue_script( 'contact-custom-js', get_template_directory_uri() . '/js/contact.js', array('jquery'), null, true );
    }
}
add_action( 'wp_enqueue_scripts', 'my_contact_scripts' );

よく使う条件分岐タグ早見表

実務で頻繁に使う条件分岐タグをまとめました。これらを組み合わせることで、自由自在に読み込みをコントロールできます。

is_front_page() トップページ（フロントページ）が開かれた時
is_single() 投稿ページ（ブログの個別記事など）が開かれた時
is_page('スラッグ名') 特定の固定ページ（例：contactやaboutなど）が開かれた時
is_archive() 一覧・アーカイブページが開かれた時

※複数の条件を指定したい場合は、if ( is_front_page() || is_page('about') ) のように ||（または）で繋ぎます。

まとめ：チリツモでサイトは速くなる！

スクリプトの条件分岐は、コードをほんの数行書き換えるだけで実装できます。

「このファイルは本当に全ページで必要なのか？」と常に意識し、不要な読み込みを削っていくことが、ワンランク上のWeb制作への第一歩です。ぜひご自身のサイトでも見直しを行ってみてくださいね！

一覧へ!