【Wordpress高速化日記】プラグインやテーマが読み込ませる.css,.jsファイル数を関数で減らしてみた

ページを表示するときに読み込まれる.css,.jsなどのファイル数が多ければ多いほど、表示スピードは遅くなります。そこで、wp_dequeue_style, wp_dequeue_script, wp_deresister_style, wp_deresister_script, 等の関数を使って、プラグインやテーマが読み込ませる外部ファイルを減らしてみました。

外部から読み込むファイル数を減らすと高速化する理由

それは、HTTPリクエストの数が減るからです。

以前の記事でも説明しましたが、ファイルを読み込むたびに閲覧デバイスとサーバーとの間で通信が行われます。

だから、読み込むファイルの数を減らせば、ページの表示スピードが上がります。

.cssや.jsだけでなく.png,.jpg,.gifなどの画像ファイルを減らすのも効果的です。

特定の.cssファイルを読み込み対象から除外するwp_dequeue_style関数

WordPressでは、ハンドル名つきで登録された.css,.jsファイルをwp_enqueue_sctyle関数,wp_enqueue_script関数で行列化して読み込みます。

wp_dequeue_style関数,wp_dequeue_script関数は、以下の形でハンドル名を指定して、読み込み待ち行列の中から特定の.css,.jsファイルを除外します。

wp_dequeue_style('ハンドル名');
wp_dequeue_script('ハンドル名');

wp_dequeue_style,wp_dequeue_scriptで読み込み対象から外れたファイルも、依然としてハンドル名で登録されています。

すでにハンドル名つきで登録されている特定の.css,.jsファイルを登録解除する

特定の.css,.jsファイルを読み込ませないようにするには、ハンドル名付きの登録を解除してしまう方法もあります。

そのための関数がwp_deregister_style関数,wp_deregister_script関数で以下の形で使います。

wp_deregister_style('ハンドル名');
wp_deregister_script('ハンドル名');

ハンドル名付きの登録が解除されたファイルは、wp_enqueue_sctyle関数,wp_enqueue_script関数が作る読み込み対象ファイルの行列の要素とはなりえず、やはり読み込まれません。

私が読み込ませないようにした.css,.jsファイル

プラグインやテーマが読み込ませる外部ファイルを減らすための関数を把握したら、今度は自分のサイトのソースを見て、削減対象を決めましょう。

私の場合は以下のファイルの読み込みを停止しました。

WP-PageNaviプラグインの.css
Table of Contents Plusプラグインの.css,.js
Twenty twelveテーマのnavigation.js
コアファイルのcomment-reply.min.js

といっても、上の二つについては.css,.jsファイルに書かれている内容は利用したいので、他の.css,.jsファイルに移して読み込みます。

それでも読み込むファイル数が減るので高速化には寄与するはずです。

.css,.jsファイルを読み込ませないためのコードは、function.phpに書きます。

function my_scripts_method() {
    wp_dequeue_script('toc-front');
    wp_dequeue_style('toc-screen');
    wp_dequeue_style('wp-pagenavi');
    wp_dequeue_script( 'comment-reply' );
    wp_dequeue_script( 'twentytwelve-navigation' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

普通ならこれでいいはずですが、JavaScript to Footerプラグインを使っていると、プラグインがらみの.css,.jsファイルの読み込み停止を邪魔します。

そこでハンドル名付きの登録を根こそぎ解除しました。

すると、プラグインがらみの.css,.jsファイルの読み込みもきっちり停止しました。

//プラグインCSS排除
function my_deregister_styles() {
    wp_deregister_style( 'wp-pagenavi' );
    wp_deregister_style('toc-screen');  
}
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

//プラグインjs排除
function my_deregister_scripts() {
    wp_deregister_script('toc-front' );
    wp_deregister_script( 'comment-reply' );
    wp_deregister_script( 'twentytwelve-navigation' );
}
add_action( 'wp_print_scripts', 'my_deregister_scripts', 100 );

高速化効果

例によって、「Krad XinによるロリポップWordpressサイト大量ハッキングまとめ｜ウェブシュフ」のページスピードをGoogleページスピードインサイトで計測しました。

しかし、前回の記事と比べてスコアは全く変わらず。

モバイル79、PC91でした。

ファイルの枚数を5枚ほど減らしたくらいでは、明らかな差は出ないのでしょうか。

ただ、読み込みファイルの枚数を減らすと高速化することは、メカニズムから明らかなので、今後も心がけたいと思います。