Webサイトの軽量化を意識するサイト制作者にとって、GTmetrixは必要不可欠なオンラインツールだと思います。こちらのサービスはサイトURLを指定することで、GoogleのPageSpeedInsightsとyahoo!のYSlowの両局面から対象ページのパフォーマンスを確認することができます。当サイトも立ち上げ当初からチューンアップのために激しく利用中。
さて、今回はその項目の中から、CSSやJavaScriptのバージョンといった静的リソースのクエリ文字列を削除する方法をご紹介します。（PageSpeed 項目名：Remove query strings from static resources）
例えば、header.phpもしくはfooter.phpに記述された以下のようなスクリプト箇所から直接?ver=1.10.2の部分を削除しても良いのですが、js等をたくさん読み込んでいるとはっきり言って面倒…
<script type=’text/javascript’ src=’http://ajax.googleapis.com/ ajax/libs/jquery/1.10.2/jquery.min.js?ver=1.10.2‘></script>
というわけで、今回はページ内で読み込まれるクエリを一括削除できるよう、functions.phpに以下の記述を追加してやります。
// css、javascriptのバージョン表記を削除
function remove_cssjs_ver( $src ) {
if( strpos( $src, ‘?ver=’ ) )
$src = remove_query_arg( ‘ver’, $src );
return $src;
}
add_filter( ‘script_loader_src’, ‘remove_cssjs_ver’, 10, 2 );
add_filter( ‘style_loader_src’, ‘remove_cssjs_ver’, 10, 2 );
function remove_cssjs_ver( $src ) {
if( strpos( $src, ‘?ver=’ ) )
$src = remove_query_arg( ‘ver’, $src );
return $src;
}
add_filter( ‘script_loader_src’, ‘remove_cssjs_ver’, 10, 2 );
add_filter( ‘style_loader_src’, ‘remove_cssjs_ver’, 10, 2 );
この後、GTmetrixで改めて計測をしてみると・・・
結果、75点から96点にアップ！
ちなみにWPminifyでCSSを1つに統合するとクエリ文字列が作成されますが
こちらはこの方法では解消できないため、4点減点されています。
コメント