[Contact Form 7] 必要なページのみCSSとJSを読み込む

2019-05-10WordPressプラグイン,高速化

PageSpeed Insightsの「レンダリングを妨げるリソースの除外」という指摘に「Contact Form 7」のCSSが出てくる。「Contact Form 7」のCSSは、お問い合わせフォームのページだけで読み込まれればいいので、それ以外のページでは読み込まないように改善して、PageSpeed Insightsのスコアがどれだけ改善するのか確認する。

改善前のPageSpeed Insightsスコア

モバイル：53 パソコン：98 WordPressのテーマは「Luxeritas」を使用しているのでパソコンはもともと高スコア モバイルはGoogleアドセンスを使っているため遅い * 2018年11月頃からPageSpeed Insightsの評価方法が変わって、Googleアドセンスやアナリティクスを導入していると速度評価が落ちる

改善できる項目で表示される指摘

Render blocking resources Contact Form 7 CSS
Render blocking resources Contact Form 7 CSS
* 「…css/styles.css」としか表示されていないので気づかなかったが「Contact Form 7」のCSSだった。文字列にカーソルを当てると全文が表示されるよ

レンダリングを妨げるリソースを除外する

「Contact Form 7」はデフォルトの状態だと、CSSとJavaScriptをすべてのページで読み込んでいる なので、まず「Contact Form 7」のCSSとJavaScriptの読み込みを停止し、次に必要なページ（今回は問い合わせフォーム）だけCSSとJavaScriptを読み込む

CSSとJavaScriptの読み込み停止

リソースの読み込み停止には2つの方法がある

wp-config.phpに以下のコードを追記する


define ('WPCF7_LOAD_JS', false); // JS読み込み停止
define ('WPCF7_LOAD_CSS', false); // CSS読み込み停止
* define( 'DB_COLLATE', '' );とか、define()が定義されている箇所に書く それ以降に書いてはいけない

functions.phpファイルに以下のコードを追記する


add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
* 子テーマのfunctions.phpファイルに書くこと

必要なページで読み込ませる

子テーマのfunctions.phpファイルに以下のコードを追記 

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' );
* is_page( 'contact' )の’contact’は、今回のお問い合わせフォームのスラッグ名なので、必要ページのスラッグ名に置き換えること * CSSの読み込みはwp_enqueue_style()、スクリプトの読み込みにはwp_enqueue_scripts()を使うのだが、実際wp_enqueue_scripts()はどっちも呼び出してくれる

簡単バージョン

上記ではリソースの停止と読み込みを2ステップで行なっているが、これを1ステップにした簡単バージョン 子テーマのfunctions.phpに記載する 

add_action( 'wp', function() {
  if ( is_page( 'contact' ) ) return;
  add_filter( 'wpcf7_load_js', '__return_false' );
  add_filter( 'wpcf7_load_css', '__return_false' );
});
* ページが’contact’でなければリソースの読み込み停止になっている * add_action( 'wp', function()でアクション’wp’を指定すると、WPオブジェクトが設定された後に実行される。WPオブジェクトが設定されないとページの判定ができないそうだ

改善後のPageSpeed Insightsスコア

モバイル：43 パソコン：99 パソコンで98→99とスコアが1上がった モバイルはスコア下がったけどアドセンスの影響があるので今回の改善の評価はできない 改善できる項目で表示される指摘 「Contact Form 7」のCSSが消えた。（問い合わせページを測定すると改善前と同じ指摘が出る）

Posted by Agopeanuts