Браузерное или клиентское кеширование

Кэширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или при посещении просматривает несколько страниц, которые используют одинаковые ресурсы.

Чеще всего на стороне браузера кешируются файлы изображений, JS и CSS файлы. Чуть реже имеет смысл кэшировать страницы и бинарные файлы (медиа-файлы, PDF, скачиваемые документы и архивы и т.д.).

Статические ресурсы должны иметь хотя бы недельное время жизни кэша, а лучше кешировать их сразу на год. Таким образом, эти ресурсы будут только один раз скачиваться с сервера, а затем браузер будет либо сразу использовать локальную копию (если указан заголовок Expires или Cache-Control), либо после проверки на неизменность (если указан заголовок Last-Modifed или ETag).

Заголовки Expires и Cache-Control: max-age

В качестве значения у этих заголовков используется дата. До тех пор, пока она не настала, браузер будет без каких‑либо дополнительных проверок использовать закешированную версию ресурса. Expires поддерживается чуть шире, чем Cache-Control: max-age, поэтому лучше использовать именно его.

Заголовки Last-Modifed и ETag

В качестве значения заголовка Last-Modifed используется дата, а для заголовка ETag — произвольная строка. Если используются эти заголовки, то браузер, прежде чем использовать закешированный ресурс, получит с сервера текущее значение заголовка и сравнит его с заголовком закешированной версии — если данные совпадут, то будет использоваться локальная версия, а если нет — произойдёт повторная загрузка. Запросы проверки происходят быстрее, чем полная загрузка ресурсов, что даёт прирост производительности сайта при повторном использовании ресурсов.

Оптимальная стратегия клиентского кеширования

Для редко меняющихся файлов стоит поставить Expires на дату, которая наступит через год, а в момент изменения этих ресурсов использовать метод «отпечатков пальцев» (fingerprinting) — добавлять к имени файла небольшую часть хеша, которая фомируется на основе его содержания. Таким образом, вся статика всегда закеширована на клиенте, а при изменении этой самой статики меняются имена файлов и они автоматически перезагружаются браузером.

Собственно техника fingerprinting активно используется для статичных ресурсов (стилей и скриптов) во многих фреймворках (в частности, в Ruby on Rails ). А массовую простановку для всех типов статичных файлов заголовка Expires можно реализовать на стороне веб‑сервера (в nginx, например).

быстродействиефронтендвеб-разработка
Статья опубликована в 2014 году

Тематические статьи

Ajax-навигация Turboliks & Wiselinks

Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax‑навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.

Статья опубликована в 2014 году
Ленивая загрузка или загрузка по требованию на клиентской части

Бывает так, что некоторое содержание страницы нужно не всем или не всегда, но на генерацию этого материала или для его передачи тратится много ресурсов. В этом случае имеет смысл сделать загрузку «ленивой», то есть не генерировать и не загружать в браузер информацию до тех пор, пока она не понадобится.

Статья опубликована в 2014 году
Ускоряем работу сайта: оптимизация HTML

Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML‑разметки, а без этого скорость загрузки и отрисовки будет ниже.

Статья опубликована в 2014 году
Увеличиваем скорость работы сайта при помощи оптимизации JavaScript

Сайт может работать быстрее, если выполнены следующие рекомендации по оптимизации JS‑кода. Если же этого не сделать, то сайт будет недостаточно быстро отображаться на стороне клиента.

Статья опубликована в 2014 году
Современные форматы изображений, используемые в веб‑разработке

Выбор правильного формата изображения — ключевой аспект оптимизации веб‑страниц. От него зависят скорость загрузки, качество контента и пользовательский опыт. Рассмотрим популярные форматы, поддерживаемые современными браузерами, их особенности и сферы применения.

Статья опубликована в 2025 году
JPEG и PNG — в чём разница форматов?

JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG.

Неверный выбор формата обычно приводит к кратному возрастанию размера изображения и, следовательно, к долгой загрузке изображений на медленном интернет-канале (мобильный интернет, например).

Статья обновлена в 2025 году
Валидность и семантичность HTML

Валидность и семантичность HTML кода определяет качество сайта с точки зрения поисковых систем.

Статья опубликована в 2014 году
Адаптивный и отзывчивый дизайн

Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн.

Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.

Статья опубликована в 2019 году
Поддержка устаревших браузеров

Поддержка устаревших браузеров, как правило, накладывает ограничения на функциональность и гарантированно увеличивает стоимость разработки и сопровождения.

Статья опубликована в 2014 году