Магия кэша
Кэширование — это один из самых эффективных способов ускорить повторные визиты на сайт. Зачем пользователю каждый раз скачивать ваш логотип или тяжелую библиотеку, если они не менялись месяцами? Однако у кэширования есть обратная сторона. Наверняка вы слышали от клиентов фразу: «Я внес изменения, но на сайте все по-старому». Понимание того, как управлять этим процессом, отличает профессионала от новичка.
Заголовки Cache-Control
Все управление кэшем происходит через HTTP заголовки, которые сервер отправляет браузеру. Самый важный из них это Cache-Control.
С его помощью вы можете сказать браузеру, на какое время сохранить файл (max-age) и можно ли его вообще кэшировать. Для статических файлов, которые никогда не меняются (например, картинки с хешем в названии), можно смело ставить огромные значения, например, один год. Для HTML страниц, напротив, лучше использовать значение «no-cache», чтобы браузер всегда проверял наличие новой версии на сервере.
Инвалидация через хеширование
Как обновить файл, если браузер уже сохранил его на год? Ответ прост: нужно изменить его имя. Это называется версионированием или хешированием контента.
Современные сборщики вроде Vite или Webpack автоматически добавляют уникальный отпечаток (хеш) к названию каждого CSS и JS файла. Если код изменился, хеш станет другим, и браузер воспримет это как абсолютно новый файл. Это позволяет использовать агрессивное кэширование для ресурсов, не боясь, что пользователи останутся на старой версии. HTML файл при этом остается точкой входа, которая всегда ссылается на актуальные версии скриптов и стилей.
ETag и условные запросы
Иногда вы не можете изменить имя файла, но хотите сэкономить трафик. Здесь на помощь приходят ETag. Это уникальный идентификатор версии файла, который сервер отправляет вместе с ним.
При следующем запросе браузер отправляет этот идентификатор обратно. Если файл на сервере не изменился, сервер вернет статус 304 Not Modified без самого тела файла. Это значительно быстрее, чем скачивать файл заново, хотя и требует одного короткого обращения к серверу. Этот метод отлично подходит для динамических страниц или API ответов.
Service Workers и продвинутые стратегии
Если вы строите PWA (Progressive Web App), вы можете управлять кэшем еще гибче с помощью Service Workers. Это позволяет реализовывать сложные сценарии, например, «Stale-while-revalidate».
В этом случае браузер сначала показывает старую версию из кэша, чтобы пользователь мгновенно увидел контент, а в фоновом режиме скачивает обновление и сохраняет его для следующего раза. Это создает ощущение мгновенной работы сайта даже при плохом интернете. Однако будьте осторожны: ошибки в коде Service Worker могут привести к тому, что пользователи «застрянут» на старой версии сайта навсегда, пока не очистят кэш вручную.