Чем быстрее загружается веб -сайт, тем больше вероятность того, что посетитель останется. Эта статья ведет вас о том, как реализовать кэширование браузера с помощью конфигураций NGINX.
В нашей серии учебных пособий Nginx мы рассмотрели как использовать Nginx в качестве балансировщика нагрузки, настраивать nginx как обратный прокси, используйте несколько версий PHP с Nginx и преобразовать htaccess rewrite Правила NGINX переписывают директивы. В сегодняшней статье мы освещаем очень важную тему, которая помогает предприятиям улучшить опыт своего пользователя, используя кэширование браузеров. В этом уроке мы рассмотрим вас о том, как реализовать кэширование браузера с конфигурацией Nginx с помощью модуля заголовка Nginx. Давайте начнем!
- [Кеширование браузера) 5
- nginx Модуль заголовка
- e-tage и if-none-match
- Используйте кэширование браузера с конфигурацией NGINX
- Заключение
Рычай кэширования браузера
Чем быстрее загружается веб -сайт, тем больше вероятность того, что посетитель останется на веб -сайте. Веб -сайты с большим количеством изображений и интерактивного контента загружаются в фоновом режиме, которые делают веб -сайт, открывая сложную задачу. Он состоит из запроса множества различных файлов с сервера один за другим. Минимизация количества этих запросов является одним из способов ускорить ваш сайт. Одним из методов улучшения производительности веб -сайта является Leveraging Browser Caching. Кэширование браузера играет огромную роль в механизме кеша для увеличения скорости страницы. Статические файлы, такие как CSS, JS, JPEG, PNG и т. Д., Которые используются для веб -сайта, могут быть сохранены на компьютере посетителя для будущего доступа. Всякий раз, когда посетитель встречается с новой страницей на вашем веб -сайте, приведенные выше файлы можно получить с компьютера посетителя вместо вашего предоставленного сервера, который значительно увеличит скорость загрузки страницы.
Модуль заголовка Nginx
Модуль _ngx \ _http \ Headers_module позволяет добавлять поля заголовка «expires» и «cache-control» и произвольные поля в заголовок ответа. Мы можем использовать модуль заголовка, чтобы установить эти заголовки HTTP. Модуль заголовка представляет собой модуль ядра Nginx, что означает, что его не нужно устанавливать отдельно для использования. Пример конфигурации выглядит следующим образом:
expires 24h;
expires modified +24h;
expires @24h;
expires 0;
expires -1;
expires epoch;
expires $expires;
add_header Cache-Control private;
E-Tag и If-None Match
Давайте предположим, что у нас есть некоторые тестовые файлы с различными расширениями, например, test.html, test.jpg, test.css и test.js. По умолчанию все файлы будут иметь одинаковое поведение кэширования по умолчанию. Чтобы проверить заголовки ответов файла, используя следующую команду для запроса файла с нашего локального сервера Nginx и показывает заголовки ответов:
curl -I http://localhost/test.html
Output: Nginx response headers
HTTP/1.1 200 OK
Server: nginx/1.14.1
Date: Fri, 03 March 2021 18:23:09 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Fri, 03 March 2021 18:23:09 GMT
Connection: keep-alive
<strong>ETag: "501c3b6f-401"</strong>
Accept-Ranges: bytes
Во второй до последней строке вы найдете заголовок etag, который содержит уникальный идентификатор для этого конкретного пересмотра запрошенного файла. Если вы выполняете последнюю команду curl многократно, вы найдете то же самое значение ETAG. При использовании веб-браузера значение etag сохраняется и отправляется обратно на сервер с заголовком запроса if-none match, когда пользователь обновляет страницу или тот же файл, требуемый браузером по любой причине. Мы можем смоделировать это в командной строке со следующей командой.
curl -I -H 'If-None-Match: "501c3b6f-401"' http://localhost/test.html
Обратите внимание на уникальный идентификатор, он должен соответствовать значению ответа, которое мы получили от нашего предыдущего вызова curl. Ответ будет другим на этот раз:
Output: Nginx response headers
<strong>HTTP/1.1 304 Not Modified</strong>
Server: nginx/1.14.1
Date: Thu, 04 Feb 2021 18:24:05 GMT
Last-Modified: Thu, 04 Feb 2021 18:22:39 GMT
Connection: keep-alive
<strong>ETag: "501c3b6f-401"</strong>
На этот раз nginx ответит 304 не изменен . Он больше не отправит файл по сети; Вместо этого он сообщит браузеру, что он может повторно использовать файл, который он уже загрузил локально. Это полезно, поскольку он уменьшает сетевой трафик. Но браузер по -прежнему должен сделать HTTP -звонок, чтобы получить ответ с сервера, который все еще занимает некоторое время.
Используйте кэширование браузера с конфигурацией NGINX
В нашем предыдущем примере мы объяснили, как E-Tag и If-None Match помогают вам сократить сетевой трафик. Но проблема с etag заключается в том, что браузер всегда отправляет на сервер запрос с вопросом, может ли он повторно использовать свой кэшированный файл. И это все еще требует времени, чтобы сделать запрос и получить ответ.
Теперь с помощью модуля заголовка Nginx мы сделаем браузер для кэширования некоторых файлов локально, не явно спрашивая сервер.
Добавьте следующие 3 строки в ваш файл конфигурации NGINX в статический контент кэша в Nginx
expires 30d;
add_header Pragma "public";
add_header Cache-Control "public";
Первая строка инструктирует Nginx к контенту кэша в клиентском браузере в течение 30 дней (30d). После этого периода любой новый запрос от пользователя приведет к повторной оценке кэша и обновлению из браузера клиента. Вы можете разместить вышеуказанные строки в блоках location, server или http.
location /static/ {
expires 30d;
add_header Pragma "public";
add_header Cache-Control "public";
}
Когда вы размещаете их в блоке местоположения, только контент, обслуживаемый этим местом, будет кэширован. В приведенном выше случае только запросы на / static / будут кэшированы. Если вы хотите кэшировать определенные типы файлов, вы можете сделать это с помощью блока местоположения.
location ~* \.(js|jpg|gif|png|css)$ {
expires 30d;
add_header Pragma "public";
add_header Cache-Control "public";
}
В приведенном выше примере мы кэшируем различные типы файлов, такие как JS, JPG, CSS и т. Д. Аналогичным образом, вы можете разместить конфигурацию кэша в блоке server до любого блока местоположения. В этом случае все ответы с этого сервера будут кэшированы. Или вы можете разместить его в блоке HTTP, в данном случае, все запросы сервера, поддерживаемые файлом конфигурации NGINX, будут кэшированы.
Заключение
Модуль заголовков Nginx может использоваться для добавления любых произвольных заголовков к ответу, но правильно установить заголовки контроля кэша является одним из наиболее полезных приложений. Это поможет вам повысить производительность веб -сайта, особенно для пользователей в сетях с более высокой задержкой, таких как мобильные сети. В этом уроке мы узнали, как использовать кэширование браузера с помощью конфигурации NGINX. Надеюсь, это поможет вам улучшить опыт вашего пользователя на вашем сайте.