WordPressのパフォーマンスなら、静的リソースからクエリ文字列を削除する課題がよく発生します。CSSファイルとJavaScriptファイルのURLの最後には、通常domain.com/style.css?ver=4.6などのファイルバージョンがあります。cache-control:publicヘッダーがあっても、クエリ文字列をキャッシュできないサーバー及びプロキシサーバーがあります。

そのため、クエリ文字列を削除するとキャッシングが改善される場合があります。これにより、GTMetrixおよびPingdomに表示される「静的リソースからクエリ文字列を削除せよ」警告もなくなります。

静的リソースからクエリ文字列を削除せよ

静的リソースからクエリ文字列を削除せよ

クエリ文字列は理由があって付けるものである為、ご注意ください。ファイルのバージョン管理は、WordPressの開発者がキャッシュの問題を回避するた方法の一つです。たとえば、更新の際にstyle.css?ver=4.6から?ver=4.7に変更すると、それはまったく新しいURLとして認識され、キャッシュされません。クエリ文字列を削除してプラグインを更新すると、キャッシュされたバージョンが引き続き配信される場合があります。場合により、キャッシュされたリソースの期限が切れるか、キャッシュが完全にフラッシュされるまで、ウェブサイトのフロントエンドが壊れる可能性があります。

クエリ文字列はまた、開発ワークフローの整理にも使用されます。

静的リソースからのクエリ文字列の削除

クエリ文字列を削除する方法はいくつかあります。一つ目はコードを使用する方法、もう一つはWordPressプラグインを使用する方法です。CDNを使用してアセットを配達している場合には、CDNプロバイダの一部はクエリ文字列がキャッシュできる為、処理は不要な場合があります。以下を手順に従う前に、ご利用のホスティング会社とCDNプロバイダの両方に問い合わせをし、クエリ文字列をキャッシュできるかをご確認ください。Kinsta CDN は、クエリ文字列をキャッシュできます。

  1. コードを使用して静的リソースからクエリ文字列を削除する
  2. プラグインを使用して静的リソースからクエリ文字列を削除する

1. コードを使用して静的リソースからクエリ文字列を削除する

コードを数行だけ追加することにより、アセットからクエリ文字列を簡単に削除できます。WordPressテーマのfunctions.phpファイルに以下を追加するだけです:

function remove_query_strings() {
   if(!is_admin()) {
       add_filter('script_loader_src', 'remove_query_strings_split', 15);
       add_filter('style_loader_src', 'remove_query_strings_split', 15);
   }
}

function remove_query_strings_split($src){
   $output = preg_split("/(&ver|\?ver)/", $src);
   return $output[0];
}
add_action('init', 'remove_query_strings');

注:WordPressテーマのソースコードを誤って編集するとウェブサイトが壊れる恐れがありますので、ご注意ください。ご自信のない方は必ずご利用の開発者に確認してください。または、無料のCode Snippetsプラグインもご利用できます。このプラグインを使用すると、ウェブサイトが停止する心配なくコードが追加できます。

新しいスニペットを作成し、上記のコードを追加するだけです。「Only run on site front-end」(サイトのフロントエンドでのみ実行する)を選択し、スニペットを保存します。これでクエリ文字列はなくなります!変更がフロントエンドで有効になるにはWordPressウェブサイトのキャッシュをクリアする必要がある場合があります。

クエリ文字列を削除するコードスニペット

クエリ文字列を削除するコードスニペット

クエリ文字列あり(コード実行前)

クエリ文字列を読み込むスクリプトの例は下記のとおりです。

クエリ文字列のあるリクエスト

クエリ文字列のあるリクエスト

クエリ文字列なし(コード実行後)

クエリ文字列が削除されたスクリプトの例は下記のとおりです。

クエリ文字列のないリクエスト

クエリ文字列のないリクエスト

2. プラグインを使用して静的リソースからクエリ文字列を削除する

コードを使用する代わりに、この機能を組み込んだWordPressパフォーマンスプラグインを使用することもできます。(Kinstaのチームメンバーにより開発された)プレミアムPerfmattersプラグインを使用すると、ボタンをクリックするだけで静的リソースからクエリ文字列が削除できます。または、WordPressウェブサイトのさらなる最適化対策も簡単に実施でき、既存のキャッシングプラグインと一緒に使用することもできます。

Perfmattersプラグインでクエリ文字列を削除する

Perfmattersプラグインでクエリ文字列を削除する

クエリ文字列がなくなった

上記の手順のいずれかをに従っ後は、GTMetrix及びPingdomなどのウェブサイトスピードテストツールでクエリ文字列に関する警告が表示されなくなります。

処理後の「クエリ文字列を削除せよ」警告

処理後の「クエリ文字列を削除せよ」警告

8
シェア