表示スピードの高速化に役立つ!JavascriptやCSSファイルに自動で付与されるバージョン番号を非表示にする方法

Wordpress 【img via arsp_021 by theanthonyryan

ページの表示速度は早ければ早い方が良い。表示スピードの高速化は媒体運営者にとって永遠のテーマかもしれない。

昨日、夜な夜な高速化について調べていたら衝撃的な事実を知った。当ブログは無料のCDNサーバー「CloudFlare」を導入しているのだが、URLの末尾が「キャッシュ対象の拡張子」に見えなければキャッシュされないらしい!

デフォルトだとJavascriptやCSSファイルにバージョン番号が自動的に付与される仕組みになっているが、これを非表示にする方法を見つけたので紹介する!



バージョン情報が表示されるとはこういうこと!

これまでのソースを見ると、以下のようにJavascriptやCSSの末端にバージョン番号が付与されている。

Wordpress version
CloudFlareでキャッシュ可否の条件は「URLの末尾がキャッシュ対象拡張子に見えること」だった」によると、キャッシュされるためにはURLの末尾が対象拡張子で終わっている必要があるそうだ。

せっかく導入しているCDNサーバーにキャッシュしたいファイルがされないのは意味がない!JavascriptやCSSファイルに自動的に付与されるバージョン番号を削除する必要がある。

functions.phpにコードを追加して削除!

早速方法を調べたら、「WordPress: ロードしているJSやCSSに自動で付与されるバージョン番号を非表示に」にfunctions.phpにコードを追加してバージョン番号を非表示にする方法が紹介されていた!

すべての「?ver=」を非表示にする方法とWordpressのバージョン番号の「?ver=」を非表示にする方法の2種類が紹介されていた。僕は迷わずすべてのバージョン番号を非表示に!

すべての「?ver=」を非表示にする方法

// remove wp version param from any enqueued scripts
function vc_remove_wp_ver_css_js( $src ) {
    if ( strpos( $src, 'ver=' ) )
        $src = remove_query_arg( 'ver', $src );
    return $src;
}
add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );

WordPressのバージョン番号の「?ver=」を非表示にする方法

// remove wp version param from any enqueued scripts
function vc_remove_wp_ver_css_js( $src ) {
    if ( strpos( $src, 'ver=' . get_bloginfo( 'version' ) ) )
        $src = remove_query_arg( 'ver', $src );
    return $src;
}
add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );

導入してスッキリ!キャッシュもされるはず!

コードを記述後、ソースを確認すると以下の通りバージョン番号がなくなっている!素晴らしい!

Wordpress バージョン番号
これで多少ページ読み込み速度の高速化には貢献できるはず!導入したばかりなので、しばらく様子を見てみることにする!

表示速度を劇的に向上する、無料のCDNサーバー「CloudFlare」は導入必須だ!! | gori.me

  1. cp-ranking-powerup-or-evolve
    【ポケモンGO】CPの最大値による最強ポケモンランキングが公開!ポケモンを強化・進化させる方法
  2. pokemon-egg.jpg
    【ポケモンGO】タマゴの中身は?移動距離(2/5/10km)別早見表が公開
  3. pokevision-on-mac-browser.png
    【ポケモンGO】近くにるポケモンを探す方法ーー出現位置をマップで表示
  4. pokemon-go-team-leaders.jpg
    ポケモンGO、各チームのチームリーダーの”素顔”が明らかに
  5. pikachu-balloon.jpg
    【ポケモンGO】ポケモンのレア度早見表が参考になる!
wordpress.jpg

gori.meの最新情報をチェック!!