JSやCSSなどの静的リソースにクエリストリングをつけてキャッシュを回避するのはよくないでしょうか？

Question

現在Webサイトのフロントエンドのパフォーマンス改善を行っています。

たまに使うGTmetrixというツールがあるのですが、そこに「Remove query strings from static resources」という評価項目があります。

Most proxies, most notably Squid up through version 3.0, do not cache resources with a "?" in their URL even if a Cache-control: public header is present in the response. To enable proxy caching for these resources, remove query strings from references to static resources, and instead encode the parameters into the file names themselves.

https://gtmetrix.com/remove-query-strings-from-static-resources.html

上の引用によると、クエリストリングがあるとプロキシがキャッシュしてくれないことがあるから、ブラウザキャッシュを防ぐならファイル名を変えてね、とのことです。

<link rel="stylesheet" type="text/css" src="/style.css?date=20151007">

確かにWebpackなどを使えばでJSのファイル名をビルドのたびに変えるということをすれば、実現できます。

しかしこのクエリストリングをつけることがそこまで悪いことだとは思いません。この評価項目は無視しようかと悩んでいます。

上のクエリストリングをcssの呼び出し等のあとにつけるのはよく行われていることだとは思いますが、GTmetrixには消せと言われ、しかも現在優先度が高くでているため、やや混乱しています。

体験したことがあまりないのでわからないのですが、Webのプロキシは現在も一般的に使われていて、Webのユーザーはそこでキャッシュされないために迷惑を被っているのでしょうか。JSやCSSなどの静的リソースにクエリストリングをつけてブラウザキャッシュを回避するのは本当にパフォーマンスに悪影響を及ぼしているのでしょうか？

またファイル名を変更のたびに変えるにしても、JSの場合はWebpackという解決策が思いつくのですが、CSSや画像ではどういうツールを使えばファイル名を毎回変更する運用が可能なのでしょうか。

Answer 1

一般的にはクエリストリングが付いていても、同じURLとクエリストリングであればキャッシュされます。

ただ、GTMetrixにこの警告が出るのは私も疑問に思っていたので調べてみました。
Remove Query Strings from Static Resources to Increase your Website Speed

Query Strings Resources are the URLs with a “&” or “?” and most of the proxy servers do not cache CSS and JavaScript resources with Query Strings even if you have optimized Public Cache Control headers. Few CDNs (Content Delivery Networks) also don’t cache resources with Query Strings

クエリストリングのついたリソースはCacheControlのヘッダ付与していたとしても、プロキシやCDNによってキャッシュされない場合があるようです。(英語の解釈が違ったら申し訳ありません)
GTMetrixが警告しているのはこの為だと思われます。

個人的には、相当スコアを気にする状況でないかぎり、この項目は無視して大丈夫だと考えています。
初回アクセス時にはキャッシュを使わずに読み込みをしてしまいますし、
クエリストリングが原因でキャッシュされない場合もあるようですが、キャッシュされなかったとしても他の部分で最適化をすれば高速化の余地はあります。
その上で、キャッシュを使わない初回アクセス時にユーザが速度にストレスを感じていなければ、そのままサイト回遊してくれると思います。

ファイル名をファイル更新の度に変更するには、PHPのfilemtime関数を使うと良いと思います。
ファイルの更新日時を返してくれる関数です。
静的リソースURLの末尾(クエリストリング)にこの関数を使うことで、ファイルの更新日時が更新される度に自動でURLを変えることができます。

Comments

[ikuwow]

回答ありがとうございます！ この評価項目に関しては特に気にせず、他のフロントエンドの対策を検討することにします。

[ShoheiTai]

高速化頑張ってください！また何かあればご連絡下さい！

Answer 2

JS、CSSにクエリストリングを加えても同名ファイル（URL)を読み込んでいない限りパフォーマンスに影響はないと思います。
ただ画像は一般的に付けない方が良い場合が多いのでツールの項目であがっているのでは。
→パフォーマンスでいうとこれが結論です。

主観ですが私はクエリストリングの主な用途は下記２つだと思ってます。
①クエリストリングを付けてサーバーサイドでそのパラメータを読み込んで動的に中身を変更する。
②メルマガ等でユーザーごとにパラメータを振ってHTMLメールを表示した時にそのパラメータで誰がメールを読んだか確認する。

答えになってなかったらすみません。。