この記事は 弁護士ドットコム Advent Calendar 2019 16日目の記事です。 はじめに 弁護士ドットコム というサービスのUXエンジニアをやっている白井と申します。 日々ユーザー体験を向上させるべく様々な開発を行っていますが、Webサイトの速度改善もその1つです。 今回はその一環で実施した、ブラウザキャッシュ戦略の再設計の事例についてご紹介します。 対象リソース この記事では、以下のようなリポジトリで管理されているリソースを主な対象としています。 JavaScript, JSX, TypeScriptなどのスクリプト類 CSSなどのスタイルシート類 画像やフォント類 これらは頻繁に変更される傾向にあるため、ブラウザキャッシュを適切に制御する必要があります。 注意深く設計しないと、以下のような問題が発生する場合があります。 ブラウザキャッシュのよくある問題 問題① ユーザーの
![ブラウザキャッシュはもう怖くない!きちんと更新されるキャッシュバスターの付け方 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/cbe9466c36617b0e614774ec6899e31ebd425715/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgzJTk2JUUzJTgzJUE5JUUzJTgyJUE2JUUzJTgyJUI2JUUzJTgyJUFEJUUzJTgzJUEzJUUzJTgzJTgzJUUzJTgyJUI3JUUzJTgzJUE1JUUzJTgxJUFGJUUzJTgyJTgyJUUzJTgxJTg2JUU2JTgwJTk2JUUzJTgxJThGJUUzJTgxJUFBJUUzJTgxJTg0JUVGJUJDJTgxJUUzJTgxJThEJUUzJTgxJUExJUUzJTgyJTkzJUUzJTgxJUE4JUU2JTlCJUI0JUU2JTk2JUIwJUUzJTgxJTk1JUUzJTgyJThDJUUzJTgyJThCJUUzJTgyJUFEJUUzJTgzJUEzJUUzJTgzJTgzJUUzJTgyJUI3JUUzJTgzJUE1JUUzJTgzJTkwJUUzJTgyJUI5JUUzJTgyJUJGJUUzJTgzJUJDJUUzJTgxJUFFJUU0JUJCJTk4JUUzJTgxJTkxJUU2JTk2JUI5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz05YWMwNmYyODMwMTk2YWEwODk2MzY1YjJjMzMwNmQ4Ng%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBzaGlyYXVpeCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZWY1MWUyNGFiNmQ3MDUxNmEyYWE3MTE1ODMwYWVkOTA%26blend-x%3D120%26blend-y%3D445%26blend-mode%3Dnormal%26txt64%3DaW4g5byB6K235aOr44OJ44OD44OI44Kz44Og5qCq5byP5Lya56S-%26txt-width%3D972%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25233A3C3C%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D134%26txt-y%3D546%26s%3D2e2f24730c1a3baee5bf157579616ace)