Клиентское кэширование — это способность браузера сохранять локально файлы, чтобы не делать к ним повторных обращений. Это очень полезно для картинок и CSS/Javascript файлов. Когда человек переходит по страницам браузер постоянно будет запрашивать одни и те же файлы, если не использовать механизм кэширования на браузере.

Управление тем, какие файлы следует кэшировать осуществляется с помощью HTTP заголовков Cache-control и Expires. Сервер отправляет такой заголовок вместе с ответом, указывая браузеру стоит или нет сохранить этот файл в локальное хранилище. Заголовок Cache-control

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

Cache-control

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

Cache-Control: private, max-age=0, no-cache
  • private означает, кто кэширование будет работать только на браузере пользователя. Вместо этого Вы можете использовать инструкцию public. Это разрешает кэширование на публичных прокси-серверах (такие часто есть в компаниях).
  • no-cache означает, что данный запрос нельзя кэшировать.
  • max-age это время, на которое будет закэширован результат. Устанавливается в секундах.

Обычно этого заголовка достаточно для того, чтобы все заработало: 

Cache-Control: private, max-age=60

# закэширует результат запроса в браузере на 60 секунд 

Cache-Control: private, max-age=0, no-cache

# запретит кэширование запроса

Expires

Дополнительный заголовок HTTP Expires указывает дату и время, когда браузер должен обновить кэш: 

Expires: Thu, 31 Dec 2037 23:55:55 GMT

# Браузер отправит повторный запрос аж в 2037 году, до этого времени он будет использовать кэш

Этот заголовок следует использовать вместе с Cache-Control.

Vary

Заголовок Vary позволяет установить дополнительные правила для кэширования запросов: 

vary: User-Agent

# Браузер будет знать, что контент может отличаться в зависимости от версии сайта (например, мобильной и настольной)

Что кэшировать

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

  • Картинки
  • CSS
  • Javascript
  • Загружаемые файлы (архивы, документы и т.п.)

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

В приложении заголовки Cache-Control обычно не используются, т.к. приложения генерируют динамический контент. Если же у Вас редко изменяется сайта, Вы можете добавить кэширование, чтобы снизить количество запросов на сервер. Например, в PHP: 

<?
header("Cache-control: public");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + 60*60) . " GMT");

# Включим кэш на 1 час

Однако лучше этого не делать, т.к. при изменении контента у разных посетителей будут разные версии страниц.

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

Заголовки для картинок и статических файлов (JS/CSS) нужно устанавливать на Web сервере.

Nginx

В Nginx кэширование включается инструкцией expires: 
server {
...
location ~* ^.+\.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
		expires max;
	}
...
}

# Включит кэш на бесконечный срок для файлов с перечисленными расширениями

Apache

В Apache кэширование включается модулем mod_expires и выглядит так: 

<FilesMatch "\.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$">
    Header set Cache-Control "max-age=2592000, must-revalidate"
</FilesMatch>

# Включает кэш для файлов на 1 месяц

Изменяемые файлов

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

Браузер хранит в кэше файлы соответственно их адресам URL. Если Мы добавим GET параметр в путь, путь изменится и браузер заново запросит файл. Что нам и нужно. При каждом обновлении CSS и Javascript файлов следует добавлять в GET параметр новое значение: Кэш браузера

Лучше всего использовать последовательные числа ( версии), и при каждом изменении просто увеличивать их на единицу: 

<script src="/jquery.js?5"></script>

Самое важное

Клиентское кэширование может повысить скорость работы Вашего сайта в несколько раз. Обязательно используйте эту возможность. Проверить правильность использование Cache-control любой страницы можно с помощью инструмента Cache-control Checker.

#cache-control #apache #nginx ID: 140