Кэширование сайта и кэш браузера

Проверка в браузере Chrome

Первый способ: обратиться к инструментам веб-разработчика, предоставляемым самим браузером. Рассмотрим на примере браузера Chrome:

1. Откройте в браузере любую страницу сайта.
2. Активируйте панель инструментов разработчика.
   Клавиши по умолчанию: Ctrl + Shift + I.
3. Активируйте вкладку Network.
4. Обновите страницу.
   Клавиши по умолчанию: Ctrl + F5.

Если файл кэшируется, то в колонке Size вместо размера файла будет отображаться запись (from memory cache) или (from disk cache):

Обратите внимание, насколько уменьшился объём передаваемых данных из примера на картинках: 3.8 МБ при первичном обращении и 601 КБ при повторном. При этом скорость загрузки страницы сайта снизилась с 12.45 до 7.77 секунд.

Сервис PageSpeed Insights

Сервис от Google при обнаружении проблем с кэшированием ресурсов проверяемой веб-страницы выдаёт рекомендацию «Используйте кеш браузера». При клике по ссылке «Как исправить?» развернется список файлов, для которых необходимо оптимизировать настройки кэширования в браузере:

Сервис Pingdom Website Speed Test

Pingdom Website Speed Test — качественный популярный сервис проверки скорости загрузки сайта. Подобно сервису PageSpeed Insights, он указывает на проблемы со скоростью загрузки и даёт свои рекомендации. Каждому фактору сервис присваивает определённый рейтинг (Grade).

Фактор кэширования файлов в браузере называется «Leverage browser caching»:

Заголовок Expires

Кэширование по этой схеме происходит иначе: при первичном запросе сервер отдаёт каждый кэшируемый ресурс веб-страницы с HTTP-ответом Expires, в качестве значения которого указывается дата истечения срока его хранения в кэше. Например:

Expires: Thu, 21 Apr 2016 03:17:22 GMT

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

Заголовок Cache-Control

Браузерное кэширование по схеме HTTP-заголовка Cache-Control является наиболее гибким и актуальным.

Схема выглядит так: сервер передаёт HTTP-ответ Cache-Control, содержащий директиву max-age, в качестве значения которой указывается срок кэширования файла в секундах. Например:

Cache-Control: max-age=3600

Пока не пройдёт указанное время с момента получения файла, он будет браться из кэша браузера.

Cache-Control: no-cache

Cache-Control: no-store

Cache-Control: public, max-age=3600

Cache-Control: private, max-age=3600

Заголовки Last-Modified и If-Modified-Since

Данную схему кэширования можно представить следующим образом:

1. Браузер делает первичный запрос веб-страницы.

2. Сервер отдаёт ресурсы (файлы) страницы вместе с HTTP-заголовками Last-Modified, содержащими даты создания (изменения) соответствующих ресурсов. Например:

   Last-Modified: Thu, 21 Apr 2016 03:17:22 GMT

   Полученные файлы кэшируются браузером.

3. При последующих запросах данной страницы браузер для каждого кэшируемого файла посылает HTTP-запрос If-Modified-Since, в качестве значения которого указывается дата, которую содержал HTTP-ответ сервера Last-Modified при предыдущем обращении к нему. Например:

   If-Modified-Since: Thu, 21 Apr 2016 03:17:22 GMT

4. Если значения If-Modified-Since и Last-Modified совпадают, сервер отправляет браузеру ответ в виде значения 304 (Not Modified): файл не претерпел изменений, и его можно брать из кэша. В ином случае сервер вновь передаёт файл в браузер.

К минусам данной схемы кэширования можно отнести постоянные проверяющие актуальность файлов HTTP-запросы If-Modified-Since к серверу.

Заголовки ETag и If-None-Match

Данная схема кэширования полностью идентична указанной выше схеме, но вместо HTTP-заголовков Last-Modified и If-Modified-Since, в качестве значений которых указывались даты создания (изменения) файлов, здесь соответственно применяются заголовки ETag и If-None-Match, содержащие произвольный набор символов, который меняется при изменении самого файла. Например:

ETag: "58ca9df6-564"

Недостатком данной схемы также являются постоянные проверяющие запросы If-None-Match к серверу.

Модуль mod_expires для сервера Apache

Для формирования HTTP-заголовков Expires, определяющих дату окончания срока кэширования ресурса, на серверах Apache применяется модуль mod_expires.

Не вдаваясь в подробности синтаксиса настройки данного модуля, приведем пример готовой конфигурации по включению браузерного кэширования на сайте с комментариями в коде:

<IfModule mod_expires.c>

# активация формирования заголовков Expires
  ExpiresActive on

# Кэширование по умолчанию 1 месяц
  ExpiresDefault "access plus 1 month"

# Не кэшировать HTML, текст, XML, JSON
  ExpiresByType text/html "access plus 0 seconds"
  ExpiresByType text/xml "access plus 0 seconds"
  ExpiresByType application/xml "access plus 0 seconds"
  ExpiresByType application/json "access plus 0 seconds"

# Кэшировать фиды на 1 час
  ExpiresByType application/rss+xml "access plus 1 hour"
  ExpiresByType application/atom+xml "access plus 1 hour"

# Кэшировать Favicon 1 год
  ExpiresByType image/x-icon "access plus 1 year"

# Кэшировать картинки и видео 1 месяц
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/jpg "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType video/ogg "access plus 1 month"
  ExpiresByType audio/ogg "access plus 1 month"
  ExpiresByType video/mp4 "access plus 1 month"
  ExpiresByType video/webm "access plus 1 month"

# Кэшировать файлы шрифтов 1 неделю
  ExpiresByType application/x-font-ttf "access plus 1 month"
  ExpiresByType font/opentype "access plus 1 month"
  ExpiresByType application/x-font-woff "access plus 1 month"
  ExpiresByType image/svg+xml "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# Кэшировать CSS и JS 1 год
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"

</IfModule>

Скопируйте данный код в файл .htaccess для включения кэширования файлов в браузере.

Подробности о синтаксисе и настройках модуля mod_expires можно узнать в официальной документации.

Модуль mod_headers для сервера Apache

Для формирования HTTP-заголовков Cache-Control на серверах Apache применяется модуль mod_headers.

Настройка модуля подразумевает использование регулярных выражений для определения типов файлов, для которых будут формироваться заголовки Cache-Control:

<ifModule mod_headers.c>

# Не кэшировать PHP, HTML, XML
<FilesMatch "\.(php|html|htm|xml)$">
Header set Cache-Control "no-store, no-cache, max-age=0"
</FilesMatch>

# Кэшировать изображения 1 месяц 
<FilesMatch "\.(gif|ico|jpg|jpeg|png|svg)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

# Кэшировать CSS и JS 1 неделю 
<FilesMatch "\.(js|css)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>

# Кэшировать шрифты 1 месяц
<FilesMatch "\.(woff|woff2|eot|otf|ttf)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

</ifModule>

Указанный выше код можно скопировать в файл .htaccess для применения настроек кэширования файлов к конкретному сайту.

Подробности о синтаксисе и настройках модуля mod_headers можно узнать в официальной документации.

Модуль ngx_http_headers_module для сервера Nginx

Для определения схемы кэширования на сервере Nginx применяется модуль ngx_http_headers_module, позволяющий настраивать любые заголовки ответов сервера.

server {

# Отменить кэширование PHP, HTML, XML
location ~* \.(php|xml|html|htm)$ {
expires off;
}

# Установить срок кэширования картинок на 1 месяц
location ~* \.(gif|ico|jpeg|png|svg)$ {
expires 1m;
}

# Установить срок кэширования  CSS и JS на 1 неделю
location ~* \.(css|js)$ {
expires 1w;
}

# Установить срок кэширования шрифтов на 1 месяц
location ~* \.(css|js)$ {
expires 1m;
}

}

server {

# Не кэшировать PHP, HTML, XML
location ~* \.(php|xml|html|htm)$ {
add_header Cache-Control "no-store";
}

# Кэшировать изображения 1 месяц
location ~* \.(gif|ico|jpeg|png|svg)$ {
add_header Cache-Control "max-age=2592000";
}

# Кэшировать CSS и JS 1 неделю
location ~* \.(css|js)$ {
add_header Cache-Control "max-age=604800";
}

# Кэшировать файлы шрифтов 1 месяц
location ~* \.(woff|woff2|eot|otf|ttf)$ {
add_header Cache-Control "max-age=2592000";
}

}

Указанный выше код можно скопировать в файл nginx.conf для применения данных настроек к сайту.

Подробности о синтаксисе и настройках модуля ngx_http_headers_module можно узнать в официальной документации.