キャッシュを破棄しない裸のクエリ文字列について理解する

Shopifyのアセットキャッシングの改善により、ロード時間が大幅に短縮されます。その一環として、キャッシュ破棄に関連するURLクエリパラメータの認識方法が変更されます。従来、URLを変更することでキャッシュをバイパスし、アセットを更新することが可能でしたが、この挙動は2026年3月24日より廃止されます。

何が変わるのか

裸のクエリ文字列（キーのない値に続く「?」）を含むURLでアセット（画像、フォントなど）を参照する場合、値が更新されてもキャッシュされたアセットは更新されなくなります。例えば、以下のような場合です。

image.png?123

CSS内でも同様の挙動が見られます。

background-image: url('image.png?123');

対応方法

URLの生成には適切なLiquidフィルタ（例えばasset_url、file_url）を使用してください。Shopifyはバージョニングを管理し、アセットが変更されるたびにURLを自動的に更新します。

テンプレートでは以下のようになります。

{{ 'image.png' | asset_url }}

これにより、バージョンパラメータを含むURLが出力されます。

image.png?v=1384022871

CSSでは、Liquidを含むために.css.liquidファイルを使用します。

background-image: url('{{ "image.png" | asset_url }}');

これが重要な理由

裸のクエリ文字列を使用し続けると、キャッシュが期限切れになるまで古いアセットが配信される可能性があります。Liquidフィルタを使用することで、各アセットの正しい最新バージョンが配信され、CDNとブラウザのキャッシングがより効果的になりパフォーマンスが向上します。

さらに学ぶ

• asset_url フィルタ
• file_url フィルタ
• 自動更新を確保するためのCSS構文

参考記事: Bare query strings no longer bust the cache for assets