[WP]Contact Form 7のJS・CSSを必要なページでのみ読み込む！サイト高速化を実現する２つの安全策

ページの表示速度を遅くするCF7の「全ページ読み込み」問題を放置していませんか？

WEBデザイナーとして、クライアントサイトの表示速度改善は常に重要な課題でしょう。
特にWordPressのプラグインは便利ですが、往々にして全ページで不要なCSSやJavaScriptを読み込み、サイトの重さに繋がっています。

その代表格が、お問い合わせフォームプラグインのデファクトスタンダードであるContact Form 7 (CF7)です。

CF7は、デフォルト設定だとフォームを設置していないページでも、その機能のために必要なJS (contact-form-7/includes/js/scripts.jsなど) やCSS (contact-form-7/includes/css/styles.cssなど) を自動的に読み込んでしまうんです。

このまま放置すれば、Core Web Vitalsのスコア低下を招き、結果としてユーザーの離脱やSEO評価の悪化という深刻なコストを払い続けることになりかねません。。。が、CF7の挙動をコントロールし、必要なページだけでスマートに読み込ませる安全で確実な方法が2つあります。

【基本設定】CF7の自動読み込みを一括で停止する確実な方法

CF7のJS・CSSの自動読み込みを停止させるには、WordPressの設定ファイルに定数を定義するのが最も直接的かつ確実な手段です。

この方法を使えば、CF7は自身のリソースをロードするのをやめます。

wp-config.php に記述し自動ロードを無効化する

WordPressのルートディレクトリにある設定ファイル wp-config.php を開き、以下のコードを追記してください。

追記場所は、WordPressの起動に必要な記述より後の、編集可能なエリアの冒頭が推奨されます。

define( ‘WPCF7_LOAD_JS’, false );

Contact Form 7のJavaScriptファイルの自動読み込みを停止します。

define( ‘WPCF7_LOAD_CSS’, false )

Contact Form 7のCSSファイルの自動読み込みを停止します。

【実践】必要なページでのみ手動でJS・CSSを再読み込みさせる方法

上記の方法で全ページでの自動ロードを止めた結果、フォームを設置しているページでもJS・CSSが読み込まれなくなり、フォームが崩れたり、動作しなくなったりします。

そこで、フォームを設置しているページ、例えば「お問い合わせ」固定ページ（IDが10だと仮定）でのみ、必要なリソースを手動で再ロードする必要があります。

これを実現する最も安全で推奨される方法は、テーマの functions.php にアクションフックで記述するアプローチです。

テーマの functions.php に条件付きで再ロードするコードを記述する

テーマファイルにある functions.php に、以下のコードを追記してください。

is_page( $target_page_ids )

固定ページID（7, 15, 22）の配列を渡すことで、複数のページに簡単に対応できます。

is_singular( ‘custom_post_type_slug’ )

必要であれば、特定のカスタム投稿タイプの単一記事ページでのみ読み込む、といった応用も可能です。

wpcf7_enqueue_scripts() と wpcf7_enqueue_styles()

これらはCF7プラグイン内部で定義されている関数であり、CF7が必要とするリソースを公式の手順でキュー（登録）し、適切なタイミングで読み込ませるためのものです。

add_action( ‘wp_enqueue_scripts’, … )

このアクションフックを用いることが、WordPressで推奨されるリソースの読み込み方法です。

header.php に直接記述するよりも、プラグインやテーマとの競合を避けやすく、安全性が高いと言えますね。

【まとめ】高速化と安定性の両立を実現する手順

CF7の不要なリソース読み込みを解消し、サイトパフォーマンスを最大化するための手順は以下の通りです。