Эта статья поможет разобраться, как браузерный кэш влияет на скорость загрузки сайта и как веб-разработчик может управлять кэшированием с помощью HTTP-заголовков.
- Что такое кэш браузера
- Как работает кэш
- Основные HTTP-заголовки для управления кэшем
- Заголовок Cache-Control
- Заголовок Expires
- ETag и Last-Modified
- Лучшие практики
- Как отключить кэш для конкретных файлов
- Часто задаваемые вопросы
Что такое кэш браузера
Кэш браузера — это хранилище, в котором браузер сохраняет копии статических ресурсов (изображений, CSS, JavaScript и т.д.), чтобы не загружать их повторно при каждом посещении сайта. Это позволяет ускорить загрузку страниц и снизить нагрузку на сервер.
Как работает кэш
Когда пользователь впервые заходит на сайт, браузер получает и сохраняет ресурсы, помеченные как кэшируемые. При последующих визитах браузер сравнивает эти ресурсы с сервером по их дате последнего изменения или уникальному идентификатору. Если ресурс не изменился — он загружается из кэша.
Основные HTTP-заголовки для управления кэшем
Сервер может управлять кэшированием с помощью следующих заголовков:
Cache-ControlExpiresETagLast-ModifiedPragma(устаревший)
Заголовок Cache-Control
Этот заголовок позволяет наиболее гибко управлять поведением кэша. Примеры:
Cache-Control: public, max-age=31536000— кэшировать 1 год.Cache-Control: no-store— не сохранять в кэш вообще.Cache-Control: no-cache— проверять у сервера при каждом запросе.
Заголовок Expires
Определяет точное время истечения кэша. Пример:
Expires: Wed, 01 Jul 2026 00:00:00 GMTЕсли дата истекла — браузер повторно запросит файл.
ETag и Last-Modified
ETag — уникальный идентификатор версии файла. Last-Modified — дата последнего изменения. При наличии этих заголовков браузер может сверить их с сервером и не загружать ресурс, если он не изменился.
Пример
ETag: "abc123"
Last-Modified: Tue, 25 Jun 2025 10:00:00 GMT
Лучшие практики
- Используйте
Cache-Control: max-ageдля статики (CSS, JS, изображения). - Меняйте имена файлов при изменениях (например,
style.v2.css). - Используйте
ETagиLast-Modifiedдля HTML и динамики.
Как отключить кэш
Чтобы полностью отключить кэширование:
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Expires: 0
Часто задаваемые вопросы
1. Почему изменения на сайте не отображаются сразу?
Скорее всего, браузер использует старую версию файла из кэша. Очистите кэш или обновите файл с новым именем.
2. Можно ли кэшировать HTML?
Да, но осторожно. Лучше кэшировать на короткое время или использовать заголовки ETag и Last-Modified.
3. Как проверить, что ресурс кэшируется?
Откройте DevTools (F12), перейдите во вкладку «Network» и обновите страницу. В столбце «Size» будет указано «from disk cache» или «from memory cache», если ресурс кэширован.
Заключение
Правильное использование кэширования помогает ускорить сайт, снизить нагрузку на сервер и улучшить пользовательский опыт. Управляйте кэшем осознанно — с помощью HTTP-заголовков и политики версионирования файлов.
