TOC

Как увеличить оценку PageSpeed, изменив конфигурацию Nginx в Ubuntu 16.04

Вступление

Nginx превосходно работает при обработке запросов на веб-страницы, но даже если веб-страница может показаться быстрой, настройка Nginx по умолчанию вызовет https://developers.google.com/speed/ от Google PageSpeed ​​/ Insights / [PageSpeed ​​Insights] инструмент для выявления неэффективности на вашем сайте и плохой оценки. Google использует скорость вашего сайта в качестве ключевого фактора при определении позиции вашего сайта в поиске.

В этом руководстве вы внесете быстрые изменения в файл конфигурации вашего домена, которые мгновенно повысят скорость отклика вашего сайта и его показатель PageSpeed. Цель состоит в том, чтобы получить оценку выше 80/100, поскольку это порог, выше которого Google будет применять зеленый маркер к вашей оценке, сигнализируя о быстром сайте.

Во-первых, вы включите сжатие Gzip для определенных типов файлов. Затем вы настроите кэширование браузера для дополнительного повышения. Эти методы улучшат скорость любого сайта, работающего на Nginx, независимо от программного обеспечения или CMS, на которых он построен. Например, медленная и неэффективная установка Wordpress приведет к мгновенной выгоде без необходимости касаться линии ядра или платить за дорогие плагины производительности. Этот подход работает, даже если сайт работает на маломощном виртуальном хостинге, если на сервере установлен Nginx, и вы можете редактировать файл конфигурации.

Предпосылки

Для завершения этого урока вам понадобится:

Шаг 1 - Получить начальный балл PageSpeed

Прежде чем вносить какие-либо изменения, давайте запишем существующую оценку PageSpeed, чтобы у нас была базовая производительность, которую можно сравнить с завершением учебника. Сделайте это, вставив URL сайта в Google’s PageSpeed ​​Insights сервис и нажав * Run Insights *.

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

изображение: https: //assets.digitalocean.com/articles/pagespeed_nginx_1604/LbXFqZD.png [Оценка PageSpeed ​​до оптимизации]

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

Начнем с настройки Nginx для сжатия некоторых ответов.

Шаг 2 - Включение сжатия

Файлы CSS, JavaScript и изображения могут быть большими, что увеличивает объем данных, которые пользователи должны загружать. Сжатие означает, что эти активы уменьшены в размере до более компактной версии, которая меньше, но все же содержит все необходимые данные. Gzip - это один из вариантов выполнения этого сжатия на Nginx. Он доступен во всех основных дистрибутивах Linux, и его просто нужно правильно включить и настроить. С включенным сжатием Gzip браузеры могут загружать статические ресурсы быстрее, поэтому инструмент PageSpeed ​​помечает его как нечто, требующее решения.

Чтобы включить сжатие, откройте файл конфигурации Nginx для своего сайта в nano или в своем любимом текстовом редакторе. Мы будем использовать файл по умолчанию в этом примере:

sudo nano /etc/nginx/sites-available/

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

/ И т.д. / Nginx / сайты-отсутствуют / по умолчанию

server {
   listen 80 default_server;
   listen [::]:80 default_server;
   . . .
}

Давайте добавим серию фрагментов для настройки сжатия.

Сначала включите сжатие Gzip и установите уровень сжатия:

/ И т.д. / Nginx / сайты-отсутствуют / по умолчанию

server {
   listen 80 default_server;
   listen [::]:80 default_server;

Для этого значения вы можете выбрать число между + 1 + и + 9 +. + 5 + является идеальным компромиссом между размером и загрузкой процессора, предлагая сокращение на 75% для большинства файлов ASCII (почти идентично уровню 9).

Затем скажите Nginx не сжимать что-либо, что уже мало и вряд ли уменьшится намного дальше. По умолчанию это + 20 + байт, что плохо, так как обычно приводит к увеличению размера файлов после сжатия. Вместо этого установите + 256 +:

/ И т.д. / Nginx / сайты-отсутствуют / по умолчанию

...
   gzip_comp_level    5;

Затем скажите Nginx сжимать данные даже для клиентов, которые подключаются к нам через прокси-серверы, такие как CloudFront:

/ И т.д. / Nginx / сайты-отсутствуют / по умолчанию

...
   gzip_min_length    256;

Затем скажите этим прокси-серверам кэшировать как сжатую, так и обычную версию ресурса всякий раз, когда меняется заголовок клиентских возможностей + Accept-Encoding +. Это позволяет избежать проблемы, когда клиент, не поддерживающий Gzip, который сегодня встречается крайне редко, будет отображать бред, если его прокси предоставит ему сжатую версию.

...
   gzip_proxied       any;

Наконец, укажите MIME-типы для вывода, который вы хотите сжать. Мы сжимаем изображения, данные JSON, шрифты и другие распространенные типы файлов:

/ И т.д. / Nginx / сайты-отсутствуют / по умолчанию

...
   gzip_vary          on;

Когда вы закончите, весь раздел должен выглядеть следующим образом:

/ И т.д. / Nginx / сайты-отсутствуют / по умолчанию

server {
   listen 80 default_server;
   listen [::]:80 default_server;

   gzip on;
   gzip_comp_level    5;
   gzip_min_length    256;
   gzip_proxied       any;
   gzip_vary          on;

   gzip_types
   application/atom+xml
   application/javascript
   application/json
   application/ld+json
   application/manifest+json
   application/rss+xml
   application/vnd.geo+json
   application/vnd.ms-fontobject
   application/x-font-ttf
   application/x-web-app-manifest+json
   application/xhtml+xml
   application/xml
   font/opentype
   image/bmp
   image/svg+xml
   image/x-icon
   text/cache-manifest
   text/css
   text/plain
   text/vcard
   text/vnd.rim.location.xloc
   text/vtt
   text/x-component
   text/x-cross-domain-policy;
   # text/html is always compressed by gzip module
}

Сохраните и закройте файл.

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

sudo nginx -t

Если вы внесли изменения в точности так, как указано в этом руководстве, вы не увидите сообщений об ошибках.

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

Шаг 3 - Настройка кэширования браузера

При первом посещении домена эти файлы загружаются и сохраняются в кэше браузера. При последующих посещениях браузер может обслуживать локальные версии вместо повторной загрузки файлов. Это позволяет веб-странице загружаться намного быстрее, так как для этого нужно только извлечь данные, которые изменились с момента последнего посещения. Он предлагает гораздо лучший опыт для пользователей и является причиной, по которой Google PageSpeed ​​Insights рекомендует его реализовать.

Еще раз, откройте файл конфигурации Nginx по умолчанию в вашем редакторе:

sudo nano /etc/nginx/sites-available/default

Вы добавите небольшой фрагмент кода, который скажет браузерам хранить CSS, JavaScript, изображения и PDF-файлы в своем кеше в течение семи дней.

Вставьте следующий фрагмент внутри блока сервера непосредственно после предыдущего кода для сжатия Gzip:

/ И т.д. / Nginx / сайты-отсутствуют / по умолчанию

...
# text/html is always compressed by gzip module

Конечный файл конфигурации Nginx должен выглядеть так:

/ И т.д. / Nginx / сайты-отсутствуют / по умолчанию

server {
   listen 80 default_server;
   listen [::]:80 default_server;

   gzip on;
   gzip_comp_level    5;
   gzip_min_length    256;
   gzip_proxied       any;
   gzip_vary          on;

   gzip_types
   application/atom+xml
   application/javascript
   application/json
   application/ld+json
   application/manifest+json
   application/rss+xml
   application/vnd.geo+json
   application/vnd.ms-fontobject
   application/x-font-ttf
   application/x-web-app-manifest+json
   application/xhtml+xml
   application/xml
   font/opentype
   image/bmp
   image/svg+xml
   image/x-icon
   text/cache-manifest
   text/css
   text/plain
   text/vcard
   text/vnd.rim.location.xloc
   text/vtt
   text/x-component
   text/x-cross-domain-policy;
   # text/html is always compressed by gzip module

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

Сохраните и закройте файл для выхода. Убедитесь, что в конфигурации нет ошибок:

sudo nginx -t

Затем перезапустите Nginx, чтобы применить эти новые директивы для входящих запросов.

sudo systemctl restart nginx

Вы настроили Nginx, чтобы получать лучшие оценки PageSpeed. Давайте посмотрим, как эти изменения влияют на нашу PageSpeed.

Шаг 4 - Измерение результатов

Чтобы проверить, на сколько пунктов эти изменения конфигурации увеличили ваш показатель PageSpeed, запустите свой сайт с помощью инструментов PageSpeed ​​Insights еще раз, вставив URL-адрес и нажав * Run Insights *. Вы увидите, что предупреждения о сжатии и кэшировании браузера исчезли:

изображение: https: //assets.digitalocean.com/articles/pagespeed_nginx_1604/IQolNMR.png [Оценка PageSpeed ​​после выбора]

Сравните новую оценку с вашей начальной метрикой. По завершении этого урока у вас должна быть оценка, как минимум, на 10 баллов выше, чем раньше.

Нашей целью было набрать более 80 баллов. Если ваш сайт все еще ниже этого порога, есть другие вещи, на которые вам нужно обратить внимание. PageSpeed ​​Insights подробно расскажет, что это такое, и покажет, как их исправить, если щелкнуть ссылку * Показать, как исправить * для каждой проблемы. Точные шаги различаются для каждого сайта и выходят за рамки этого учебника.

Заключение

Вы ускорили свой сайт, внеся простые изменения в конфигурацию Nginx. Ваша оценка PageSpeed ​​теперь намного лучше, и сайт загружается намного быстрее. Это сделает пользователей счастливее и повысит качество вашего сайта в глазах Google. PageSpeed ​​является очень важным сигналом ранжирования, и вы сейчас демонстрируете, что ваш домен предлагает приятные впечатления для посетителей.

Изменение конфигурации Nginx - это всего лишь один из способов улучшения PageSpeed, и его может быть недостаточно. Вам по-прежнему необходимо писать исполняющий код, надлежащим образом кэшировать объекты, обслуживать ресурсы через сеть доставки контента (CDN) и, по возможности, использовать минимизацию для обеспечения быстрой работы.

Related