サイト表示速度改善「Contact Form 7」のCSS＆JSを指定ページのみ読み込むサンプルコード

ウェブページのパフォーマンスを計測するPageSpeed Insightsにおいて、「Contact Form 7」がページの表示を妨げる「レンダリングを妨げるリソースの除外」と指摘されお困りではないでしょうか。

「Contact Form 7」は、多くのWordPressサイトで使われるフォームプラグインですが、有効化すると不必要なページまでCSS＆JavaScriptを読み込む仕様のため、サイト全体のパフォーマンスが落ちる原因のひとつになってしまいます。

この記事では、Contact Form 7の読み込みを最適化して、「レンダリングを妨げるリソースの除外」を解決する方法をご紹介しています。ぜひ参考にしてください。

レンダリングを妨げる原因は全ページ読み込まれるCSS＆JavaScript

「Contact Form 7」を有効化すると、すべてのページにおいて「Contact Form 7」のCSS＆JavaScriptが読み込まれる仕様になっています。

これらは「Contact Form 7」の表示や動作をサポートするものですので、「Contact Form 7」のフォームが設置されていないページで読み込む意味はまったくありません。

サイトの表示を快適にするためにも、不必要なページで「Contact Form 7」のCSS＆JavaScriptが表示されないよう対応することがひとつの解決策となります。

不要なページでCSS＆JavaScriptを読まないようにする

「Contact Form 7」のCSSは、お問い合わせフォームのページだけで読み込まれれば十分であり、それ以外のページでは読み込まないようにすることが望ましいです。

ここでご紹介する関数は、「Contact Form 7」の読み込みを最適化し、全ページの表示速度をあげるためのサンプルコード・プラグインとなります。ぜひご活用ください。

サンプルコード

サンプルコードをご用意しました。サンプルコード内のcontact部分は、問い合わせページで設定してあるパーマリンクに変更してご使用ください。

// Load Contact Form 7 scripts and styles only on the 'contact' page
function enable_wpcf7_load() {
    if( is_page( 'contact' ) ) {
        if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
        }
        if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
            wpcf7_enqueue_styles();
        }
    }
}
add_action( 'wp_enqueue_scripts', 'enable_wpcf7_load' );

まとめ

実装後、PageSpeed Insightsの計測において、「レンダリングを妨げるリソースの除外」が表示されなくなっていることをご確認ください。

モバイル＆PCのスコアが1～2上昇していれば、効果ありと判断してよいでしょう。サイトの表示速度改善にお役立ていただければ幸いです。