Оптимизируем Nginx для увеличения PageSpeed

Ubuntu | Amber | Комментировать запись

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

Данный мануал подскажет вам, какие изменения нужно внести в конфигурацию Nginx по умолчанию, чтобы значительно увеличить скорость загрузки сайта и улучшить показатели PageSpeed. Наша цель – достичь отметки выше 80-100: после этого порога Google ставит сайту зеленый маркер высокой скорости загрузки.

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

Требования

• Сервер Ubuntu 16.04, настроенный согласно этому мануалу.
• Установленный веб-сервер Nginx (инструкции можно найти здесь).

1: Первичная оценка PageSpeed

Прежде чем приступить к редактированию настроек, оцените сайт с помощью PageSpeed, чтобы потом было с чем сравнить результат. Для этого вставьте свой URL в строку сервиса Google PageSpeed Insights и нажмите кнопку Анализировать.

На экране появится результат с оценкой работы страницы для мобильных устройств и для компьютеров. Здесь же вы найдете советы по оптимизации.

Запомните свою оценку, чтобы затем сравнить результаты.

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

2: Настройка сжатия

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

Чтобы включить сжатие, откройте конфигурационный файл Nginx в редакторе:
sudo nano /etc/nginx/sites-available/default

Найдите этот блок:

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

Чтобы настроить сжатие, нужно добавить пару сниппетов.

Включите сжатие и выберите уровень сжатия файлов:

server {
listen 80 default_server;
listen [::]:80 default_server;
gzip on;
gzip_comp_level    5;

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

Затем нужно определить минимальную длину сжимаемого файла. Значение по умолчанию – 20 байт, оно не подходит, так как в результате после сжатия файлы все еще будут большими. Установите вместо него 256:

...
gzip_comp_level    5;
gzip_min_length    256;

Включите поддержку сжатия для клиентов, которые подключаются через прокси:

...
gzip_min_length    256;
gzip_proxied       any;

Затем настройте для прокси-серверов кэширование сжатой и обычной версии ресурса после изменения заголовка клиента Accept-Encoding. Дело в том, что сейчас – хотя и чрезвычайно редко – до сих пор встречаются клиенты, которые не поддерживают gzip. Они не смогут корректно отобразить страницу, если их прокси предоставит им сжатую версию.

...
gzip_proxied       any;
gzip_vary          on;

Затем укажите MIME-типы, которые нужно сжимать. Чтобы сжать файлы изображений, данные JSON, шрифты и другие общие типы файлов, введите:

...
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

В результате раздел будет выглядеть так:

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
}

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

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

sudo nginx -t

Если команда вывела ошибки, исправьте их.

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

3: Настройка кэширования

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

Откройте конфигурационный файл Nginx:

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

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

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

...
# text/html is always compressed by gzip module
location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
expires 7d;
}

Примечание: Эта конфигурация необходима для обслуживания контента, который часто изменяется. Если вы ведете блог, который нечасто обновляется, обновлять кэш каждую неделю нет необходимости. Браузер может кэшировать файлы в течение более длительного периода времени, например, 30 дней.

В результате файл будет выглядеть так:

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

Теперь попробуйте снова проверить свой сайт с помощью инструмента PageSpeed.

4: Результаты

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

Теперь сравните текущую оценку с предыдущим результатом.

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

Заключение

Теперь вы знаете, как ускорить загрузку сайта при помощи простых изменений в конфигурации Nginx. Рейтинг PageSpeed теперь намного лучше, и сайт загружается намного быстрее. Это повысит качество вашего сайта в глазах пользователей и Google. Оценка PageSpeed – очень важный рейтинговый сигнал.

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