Cache-control и агрессивное кэширование

Cache-control и агрессивное кэширование

Да, снова кэширование. Об этом так много говорится, но почему-то многие забывают о нем. Сегодня я рассмотрю кэширование файлов на клиентской стороне с использованием заголовков Cache-control.

Во-первых, зачем? У меня и так все работает

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

Конечно, нет. Первое, что обычно делают в таких случаях – это включают кэширование статических файлов. Для этого при отправке файлов пользователю выставляется дополнительный заголовок Cache-control. Такое решение практически не требует никакого изменения в коде проекта.

Чаще всего, кэширование проводят агрессивным способом. Т.е. устанавливают очень большое время жизни кэша. Я, например, делаю его равным от 1 до 3 лет. Однако, ничто не вечно, и вот вырешили изменить что-то на сайте…. А пользователи не увидят этих изменений, т.к. их браузеры не будут скачивать измененные файлы до истечения срока жизни кэша или принудительного сброса кэша в браузере.

Можно ли как-то обойти данное ограничение? И сбрасывать кэш, без участия пользователя? Давайте подробно рассмотрим, что же происходит при кэшировании файлов браузером.

Итак, клиентское кэширование. Браузер скачивает некоторую страницу вашего сайта. И видит, что дополнительно нужно подгрузить файлы javascript кода, css файлы, картинки…

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

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

Как включить кэш?

Для сервера nginx:

Для сервера apache:

Наш пример включает клиентское кэширование для js и css файлов. Но это можно сделать для любого требуемого типа файлов.

Реализуем версионность для файлов

Как было сказано выше, требуется изменить URL загружаемого файла. Для этого достаточно добавить любой параметр в URL после знака «?».

Обратите внимание на единички в URL для файлов. Это и есть наша версионность. Теперь в случае изменения файла, вам нужно увеличить эту единичку на 1. Например:

При таком изменении, адреса файла, браузер воспримет его как новый файл.

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

Я пути в шаблонах оформляю примерно так:

Один js или css, как правило, не меняется, поэтому я сбрасываю весь кэш разом.

Если ваш проект, находится под системой контроля версий, то константу STATIC_FILES_VERSION можно задавать автоматически равной максимальной ревизии подконтрольных файлов в автоматическом режиме при выгрузке изменений. В таком подходе тоже есть свои плюсы и минусы.

Нет комментариев.
Добавить комментарий
Вам необходимо включить показ изображений в браузере для того чтобы увидеть код

Дайте нам знать, что вы - живой человек. Для нас это важно!
Кликните, если плохо видно

Прежде чем высказать свое мнение, прочитайте пожалуйста: правила

Рейтинг@Mail.ru