Cache-control с динамикой

Заголовок Cache-control позволяет значительно увеличить скорость загрузки сайта, а также разгрузить канал между сервером и пользователем. Этот заголовок включает кэширование и просто в применении для файлов, которые никогда не меняются. Но для того, чтобы использовать это преимущество для файлов, которые могут меняться, нужно детальнее разобраться в клиентском кэшировании:

  1. Сервер отправляет дополнительный заголовок Cache-control
  2. Браузер видит этот заголовок и сохраняет файл в свой кэш
  3. При следующем запросе к файлу (например, посетитель перешел на другую страницу, а на ней опять есть загрузка библиотеки jQuery), который лежит в кэше, браузер не будет отправлять запрос на сайт. Он покажет сохраненную локально версию
  4. Повторный запрос на сайт для загрузки закэшированных файлов браузер начнет слать только тогда, когда наступит дата, указанная в самом заголовке Cache-control (ее можно конфигурировать)
Кеш браузера

Включаем кэширование

Первое — нам необходимо включить кэширование для JS/CSS на сервере (у нас Nginx):
server {
...
location ~* ^.+\.(js|css)$ {
	expires max;
}
...
}

Использование версий

Но в основном приложении, необходимо добавить к пути загрузки JS/CSS файлов т.н. версии:

<link rel="stylesheet" href="/styles.css?r4" type="text/css" />
<script type="text/javascript" src="/scripts.js?r7">

Где "r4" и "r7" — просто числа, которые Вы сами указываете (версия файла, лучше начать с 1). При каждом обновлении файлов, Вам нужно просто поменять его версию (увеличить на 1). Например, после каких-то изменений в styles.css мы увеличим его версию:

<link rel="stylesheet" href="/styles.css?r5" type="text/css" />

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

Самое главное

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


Подпишитесь на Хайлоад с помощью Google аккаунта
или закройте эту хрень