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

ContactForm7JS、CSS読み込み制御_eyecatch

お問い合わせページで大人気の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のスタイルシートやJavaスクリプトが合計3つ読み込まれています。
記事ページでも同じように読み込まれていました。

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

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

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

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

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

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

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

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

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

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

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

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

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

ContactForm7_ファイルの読み込み制御コード1

functions.phpにコードを追加

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

//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スタイルシートの読み込みを停止するようにしています。

スラッグを確認する方法

コード内のis_page( )内に使用するスラッグが分からない方へ、ContactForm7で使用している固定ページのスラッグの確認方法です。

■その1
固定ページのパーマリンクのお尻がスラッグです。
ContactForm7_スラッグの確認1

■その2
固定ページの編集画面で画面右上の「表示オプション」を開く。
一度ページを更新すると編集画面の下部にスラッグが表示されます。

コードの動作確認

コードの追加と保存が終わったら、念のためトップページや記事ページでContactForm7のJavaScriptとCSSスタイルシートが読み込まれていないことを確認しておきましょう。

ContactForm7軽量化1

トップページでの読み込みファイルの確認

トップページで「contact-form-7」はヒットなし!

また、お問い合わせページでファイルがきちんと読み込まれているかのチェックも大事です。

ContactForm7軽量化2

問い合わせページでの読み込みファイルの確認

お問い合わせページで「contact-form-7」のヒットは3件!OKです!

まとめ

Contact Form 7を使用していてPageSpeed Insightsの診断結果にプラグインのJavaScriptやCSSスタイルシートが含まれる時の対処法でした。

少しでもサイトを軽くするために、このような不要なスクリプトやスタイルシートが必要でないページで読み込まれないように気を付けましょう。

-Wordpress
-

© 2021 ソロ学