Как кешировать статические файлы на nginx

На этой странице

1 Предварительное примечание
2 Настройка nginx
3 Тестирование
4 ссылки

В этом руководстве объясняется, как настроить nginx для установки HTTP-заголовка Expires и директивы max-age HTTP-заголовка Cache-Control статических файлов (таких как изображения, файлы CSS и Javascript) на дату в будущем, чтобы эти файлы будут кэшироваться браузерами ваших посетителей. Это экономит пропускную способность и ускоряет отображение вашего веб-сайта (если пользователь посещает ваш сайт во второй раз, статические файлы будут извлечены из кеша браузера).

1 Предварительное примечание

Я предполагаю, что у вас есть работающая настройка nginx, например. как показано в этом руководстве: Установка Nginx с PHP 7 и MySQL 5.7 (LEMP) в Ubuntu 16.04 LTS

2 Настройка nginx

HTTP-заголовок Expires можно установить с помощью директивы expires, которую можно поместить внутрь http {}, server {}, location {} или оператора if внутри блока location {}. Обычно вы будете использовать его в блоке местоположения для ваших статических файлов, например. следующее:

location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
   expires 365d;
}

В приведенном выше примере все файлы .jpg, .jpeg, .png, .gif, .ico, .css и .js получают заголовок Expires с датой на 365 дней позже времени доступа браузера. Поэтому вы должны убедиться, что блок location {} действительно содержит только статические файлы, которые могут кэшироваться браузерами.

Перезагрузите nginx после ваших изменений:

/etc/init.d/nginx reload

Вы можете использовать следующие настройки времени с директивой expires:

off означает, что заголовки Expires и Cache-Control не будут изменены.
epoch устанавливает для заголовка Expires значение 1 января 1970 года, 00:00:01 по Гринвичу.
max устанавливает в заголовке Expires значение 31 декабря 2037 г., 23:59:59 по Гринвичу, а максимальный возраст Cache-Control – 10 лет.
Время без префикса @ означает время истечения срока действия относительно времени доступа браузера. Можно указать отрицательное время, которое установит для заголовка Cache-Control значение no-cache. Пример: истекает через 10 дней; или истекает 14w3d;
Время с префиксом @ указывает абсолютное время истечения срока действия, записываемое в формате Чч или Чч:Мм, где H находится в диапазоне от 0 до 24, а M — в диапазоне от 0 до 59. Пример: expires @ 15:34;

Вы можете использовать следующие единицы измерения времени:

мс: миллисекунды
с: секунды
м: минуты
ч: часы
д: дни
н: недели
M: месяцы (30 дней)
y: годы (365 дней)

Примеры: 1 час 30 минут за один час тридцать минут, 1 час 6 минут за один год и шесть месяцев.

Также обратите внимание, что если вы используете заголовок Expires в далеком будущем, вам придется менять имя файла компонента всякий раз, когда компонент изменяется. Поэтому рекомендуется версионировать ваши файлы. Например, если у вас есть файл javascript.js и вы хотите его изменить, вам следует добавить номер версии к имени измененного файла (например, javascript-1.1.js), чтобы браузеры могли его загрузить. Если вы не измените имя файла, браузеры загрузят (старый) файл из своего кеша.

Вместо того, чтобы основывать заголовок Expires на времени доступа браузера (например, истекает 10 дней;), вы также можете основывать его на дате изменения файла (обратите внимание, что это работает только для реальных файлов, которые хранятся на жестком диске! ) с помощью измененного ключевого слова, которое предшествует времени:

expires modified 10d;

3 Тестирование

Чтобы проверить, работает ли ваша конфигурация, вы можете использовать функцию сетевого анализа инструментов разработчика в браузере Firefox и получить доступ к статическому файлу через Firefox (например, изображение). В выходных данных заголовка вы должны увидеть заголовок Expires и заголовок Cache-Control с директивой max-age (max-age содержит значение в секундах, например, 31536000 — это один год в будущем):

4 ссылки

HttpHeadersModule nginx: http://wiki.nginx.org/HttpHeadersModule

Об авторе