Кэширование браузера — возможность настроить разовую загрузку данных определенного типа с последующим их сохранением в памяти клиента. Кэширование браузера nginx или средствами другого сервера позволяет сократить количество обращений со стороны клиентской машины, и, как следствие, нагрузку, а также увеличить скорость загрузки сайтов.
Клиент обращается к странице сайта — сервер обрабатывает запрос, сгенерированная страница отправляется клиенту вместе с определенным заголовком. Браузер сохраняет информацию локально и при повторном запросе самостоятельно отдает ее
Кэшируются изображения стили CSS и Javascript. Кэширование браузера Nginx реализуется за счет добавления заголовка Cache-control.
В заголовках служебная информация передается от сервера браузеру клиента, из нее браузер узнает когда нужно сохранять данные определенного типа и как долго удерживать их в памяти.
В конфигурационном файле Nginx кэширование JS/CSS включается следующим образом (добавлены и другие расширения — на практике лучше кэшировать их все):
server {
…
location ~* \.(jpg|jpeg|gif|png|ico|css|bmp|swf|js|html|txt)$ {
expires max;
root /home/website/example.com/;
}
…
}
expires max говорит о том, что TTL устанавливается в бесконечность и в случае если файлы на сервере будут изменены клиент об этом никогда не узнает поскольку повторный запрос отправлен не будет.
expires (об этом заголовке речь пойдет ниже) определяет когда браузер обновит кэш, значение устанавливается в секундах.
Обычно в конфигурационном файле сервера устанавливается именно значение expires max, затем в приложении при подключении css и js файлов определяются их версии, которые должны меняться каждый раз при обновлении содержимого.
Указание заголовков, задающих кэширование на уровне приложения
<link href="/styles.css?r2" type="text/css" />
<script type="text/javascript" src="/scripts.js?r3">
Сервер в этом случае будет воспринимать каждую новую версию как добавленный новый файл и будет кэшировать его.
Вместе с Cache-Control часто указывается заголовок Expires — он принудительно задает дату и время, когда браузер сбросит существующий кэш; при следующем обращении к пользователя обновленные данные будут загружены в кэш повторно.
Дополнительный заголовок HTTP Expires указывает дату и время, когда браузер должен обновить кэш (заголовки можно использовать совместно, Expires при использовании обоих заголовков имеет меньшее значение):
Expires: Thu, 31 Dec 2017 14:00:00 GMT
Оба заголовка могут быть заданы в программном коде на уровне приложения.
Включение кэширования в РНР
Большая часть веб-проектов пишутся на языке РНР, в РНР HTTP заголовки Cache-control и Expires задаются следующим образом:
<?
header("Cache-control: public");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + 7*24*60*60) . "GMT");
Время в HTTP-заголовке всегда задается по Гринвичу (GMT). Чтобы header Expires корректно отрабатывал HTTP время должно в точности совпадать с временем, установленным на сервере.
Expires в примере задает время истечения срока жизни кэша на стороне браузера пользователя равное текущему HTTP времени + 7 дней, 24 часа, 60 минут и 60 секунд
Возвращаясь к заголовку Cache-control. В примере для него указан единственный параметр public, он означает, что кэширование будет производиться в браузерах пользователей и на прокси серверах (используя private можно задать кэширование только в браузерах пользователей)
Также применяются другие инструкции:
- no-cache — устанавливает запрет на кэширование запроса
- max-age — определяет время, на которое данные будут кэшироваться — значение задается в секундах max-age=[секунды]
- s-maxage — аналогичен предыдущему, применяется к общему кэшу (браузерному + прокси)
- no-store — указывает кэшу не сохранять копию содержимого
- must-revalidate — передает сообщение о необходимости обновления кэша в обязательном порядке при поступлении новой информации
- proxy-revalidate — аналогичен предыдущему, применяется к прокси
Проверить кэшируются ли данные можно в непосредственно в браузере в режиме отладки или просматривая заголовки обратившись к странице сайта при помощи консольной утилиты curl
Также можно воспользоваться специальным сервисом для проверки браузерного кэширования
Если на фронтэнде используется Apache, а не Nginx кэширование настраивается иначе