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

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

1. 1. Сервер отправляет дополнительный заголовок Cache-control

1. 1. Браузер видит этот заголовок и сохраняет файл в свой кэш

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

1. 1. Повторный запрос на сайт для загрузки закэшированных файлов браузер начнет слать только тогда, когда наступит дата, указанная в самом заголовке Cache-control (ее можно конфигурировать)

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

Первое – нам необходимо включить кэширование для JS/CSS на сервере (у нас Nginx):
server {

...

location ~* ^.+.(js|css)$ {

expires max;

}

...

}

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

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

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

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

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

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