質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
キャッシュ

キャッシュはドキュメントやデータを一時的に保管するもので、アクセス処理時間を短くするために使用されます。

パフォーマンス

コード効率の向上や計算に関する質問には、このタグを使ってください。

プロキシ

プロキシは、二つ以上の相互接続されているプログラム又はデバイスの間に存在する中間サーバを指します。プロキシは、接続者の「代理」としてインターネット接続を行い、接続元にレスポンスを返します。また、その機能を実現するソフトウェアの意味合いもあります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

8910閲覧

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

ikuwow

総合スコア462

キャッシュ

キャッシュはドキュメントやデータを一時的に保管するもので、アクセス処理時間を短くするために使用されます。

パフォーマンス

コード効率の向上や計算に関する質問には、このタグを使ってください。

プロキシ

プロキシは、二つ以上の相互接続されているプログラム又はデバイスの間に存在する中間サーバを指します。プロキシは、接続者の「代理」としてインターネット接続を行い、接続元にレスポンスを返します。また、その機能を実現するソフトウェアの意味合いもあります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

5グッド

7クリップ

投稿2015/10/08 09:44

編集2015/12/03 01:29

現在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や画像ではどういうツールを使えばファイル名を毎回変更する運用が可能なのでしょうか。

miyabi-sun, mhashi, naoyan, 5o5o_wagon👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

一般的にはクエリストリングが付いていても、同じ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を変えることができます。

投稿2015/10/09 01:15

ShoheiTai

総合スコア897

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ikuwow

2015/10/09 03:37

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

2015/10/09 03:48

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

0

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

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

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

投稿2015/10/08 10:11

YuyaYasuda

総合スコア88

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問