Contact Form 7でサイトが重くなる？ページ全体で読み込まれるJSとCSSを固定ページのみで読み込ませる方法。

お問い合わせページで大人気のWordpressプラグイン「Contact Form 7」を導入後、ページ全体でこのプラグインに使用されるJavaScriptとCSSスタイルシートが読み込まれていることが分かりました。

これらのスクリプトやスタイルシートはお問い合わせページのみで読み込めば良いのですが、トップページや記事ページにも読み込まれてしまっています。

全ページにお問い合わせページでしか使用しないJSやCSSを読み込んでいるとサイト全体が無駄に重たくなってしまいますので対策します。

シンプルで軽量なfuctions.phpにコードを追加する方法で改良します。

この記事の目次

Contact Form 7のJSとCSSを必要な場合だけ読み込む

プラグインを導入後、グーグルのサイト診断テスト「PageSpeed Insights」を行うと「レンダリングをブロックするJavaScriptを削除してください」と項目が出て、この一覧の中にContact Form 7に使用されているJSスクリプトが含まれている。

同様にCSS配信の最適化にもこのプラグインのスタイルシートが含まれてました。

お問い合わせ用の固定ページを診断してこれが出るのなら分かるのですが、トップページや記事ページなどプラグインを使用していないページでも出てしまいます。

プラグイン用に読み込まれるJSとCSSの確認

ブラウザの開発ツールを使用して当サイトのトップページに読み込まれているプラグインのJavaScriptとCSSスタイルシートを確認します。

ContactForm7で使用されるJSとCSSには「contact-form-7」というIDが割り当てられているので、ブラウザの開発者ツールでCtrl+Fを押して検索するとすぐに見つかります。

: ContactForm7のスタイルシート

: ContactForm7のJavaScript-1

: ContactForm7のJavaScript-2

トップページにもかかわらず、使用しないContactForm7のスタイルシートやJavaスクリプトが合計3つ読み込まれています。
記事ページでも同じように読み込まれていました。

必要ではないページでこれらを読み込むとただの無駄ですので、お問い合わせに使用している固定ページでのみこの3つのファイルを読み込むように設定します。

なぜこんな仕様になっているのか？

五百万以上のインストール数を誇る超有名＆大人気プラグインがなぜこのようなことになっているのか気になって調べました。

Contact Form 7の開発者ページにちゃんと理由が書かれていました。

ページ読み込み時にプラグインが使用されているか、使用されていないかの判断をプラグインのみで行うのが技術的に困難なのだそう…

しっかりと改善案も記載して下さっています。すみませんでした。

外部リンク

参考ページ：必要な場合だけ JavaScript とスタイルシートをロードさせるには | Contact Form 7 [日本語]

プラグイン開発者ページのステップ２に今回対策したい内容と近い改善案がありましたが、phpテンプレートは増やしたくないのでfunctions.phpにて対応します。

functions.phpで読み込みを制御してみる

開発者ページを参考に、ページリロード時に一旦JSとCSSの読み込みを停止し、任意の固定ページ（問い合わせ）であった場合はファイルを読み込むコードを試したのですが、全ページで読み込みが停止してしまいました。

wpcf7_enqueue_scripts関数とwpcf7_enqueue_styles関数がうまく動作していないのかもしれません。

wpアクションフックを使用するとうまく動作しましたのでこちらを紹介します。

お問い合わせページのみで読み込むコード

Contact Form 7で使用されるJavaScriptとCSSスタイルシートを必要なページ（お問い合わせページ）でのみ読み込むコードです。

functions.phpにコードを追加

以下のコードを使用している子テーマのfunctions.phpに追記すればOKです！

追記

当記事にピンバックを送っていただいたサイト様に重要な情報がありました。
以下のコードはPHP8でエラーが出るようです。（PHP7は動作確認済み）

現在はフィルターフックが対応していない様子なので、PHP8の方はご注意を。
（詳しくはコメント欄から別サイト様をご覧ください。）

//contactform7css&style削除
add_action( 'wp', function() {
  if ( is_page( 'contactus' ) ) return;
  add_filter( 'wpcf7_load_js', '__return_false' );
  add_filter( 'wpcf7_load_css', '__return_false' );
});
add_action( 'wp_enqueue_scripts', 'enable_wpcf7_load' );

※コード内のcontactusを自サイトで使用している固定ページのスラッグに合わせて変更してください。固定ページのIDを指定してもOKです。

Wordpressのダッシュボードから行う場合は、
「外観＞テーマエディター＞テーマのための関数」からfunctions.phpを編集。

コードの内容は、ページ読み込み時に該当ページの場合はリターンして何もしない。
それ以外のページの時はJSスクリプトとCSSスタイルシートの読み込みを停止するようにしています。