В связи с изменениями алгоритмов ранжирования Google в июле 2018 года статья считается устаревшей. Приведенные в статье оценки сайта не совпадают с новыми.
В предыдущей статье я описал установку сервера Nginx с PageSpeed модулем от Google, ускоряющим и оптимизирующим работу сайта. В этой статье рассмотрим настройку модуля для использования на сайте.
Все параметры могут быть добавлены в контекст http {} файла nginx.conf, но в таком случае действие Pagespeed будет распространяться на все сайты находящиеся на сервере. Если Pagespeed нужен только для конкретного сайта, то лучше всего будет прописать настройки в контексте server {} обслуживающим нужный сайт.
Я, например, прописываю все в отдельном файле, и подключаю его через include, куда надо.
# Например так include /etc/nginx/conf/pagespeed.conf;
Чтобы активировать модуль достаточно добавить директиву pagespeed со значением on, значение off, соответственно, выключит PageSpeed. Помимо этого следует добавить pagespeed FileCachePath, для указания каталога кэша преобразованных файлов. Указанный каталог будет создан автоматически после перезапуска сервера.
pagespeed on; pagespeed FileCachePath "/var/cache/ngx_pagespeed/";
Это минимальный набор опций, которого достаточно для запуска и работы PageSpeed. Работу модуля можно проверить следующим образом. Откройте сайт в браузере, включите режим разработчика и посмотрите заголовки. В Response Headers должно появиться x-page-speed:1.12.34.2-0.
На данный момент PageSpeed работает без дополнительных настроек. Но при этом делает все что должен: изображения сжимаются, код (HTML, CSS, JS) оптимизируется и т.д. Все это связано с дефолтным уровнем конфигурации.
Для облегчения настройки PageSpeed имеет три уровня конфигурации.
- CoreFilters - максимальный набор фильтров подходящий для работы большинства сайтов. Является уровнем по умолчанию и активируется при запуске PageSpeed без дополнительных настроек.
- OptimizeForBandwidth - минимальный набор фильтров. В основном оптимизирует и сжимает код.
- PassThrough - полностью отключает все фильтры.
Уровни определяются директивой pagespeed RewriteLevel.
pagespeed RewriteLevel CoreFilters;
Каждый уровень может быть изменен под себя, с помощью добавления нужных или исключения ненужных фильтров.
Директива pagespeed DisableFilters исключает фильтры из конфигурации, а pagespeed EnableFilters добавляет. Фильтры указываются через запятую, например так.
# Исключаем фильтры rewrite_images и combine_css pagespeed DisableFilters rewrite_images,combine_css; # Добавляем фильтры rewrite_css и rewrite_javascript pagespeed EnableFilters rewrite_css,rewrite_javascript;
Например мы хотим использовать уровень CoreFilters, но нас не все устраивает. Нам не нужно сжимать изображения и объединять CSS файлы в один. Но зато нужно встроить стили google-шрифтов непосредственно в HTML документ.
В таком случае конфигурация будет выглядеть так.
pagespeed RewriteLevel CoreFilters; pagespeed DisableFilters rewrite_images,combine_css; pagespeed EnableFilters inline_google_font_css;
Чтобы полностью запретить использование определенного фильтра и исключить его из всех конфигураций используется директива pagespeed ForbidFilters. Например для полного запрета использования фильтра resize_mobile_images нужно сделать так.
pagespeed ForbidFilters resize_mobile_images;
CoreFilters включает в себя следующий набор фильтров, который я хочу разобрать на примере своего сайта.
Add Head - Добавляет <head> на страницу если таковой отсутствует Combine Css - Объединяет несколько CSS элементов в один Combine Javascript - Объединяет несколько скриптов в один Convert Gif to Png - Конвертирует gif в png Convert Jpeg to Progressive - Конвертирует большие jpeg в прогрессивный формат, повторно сжимая его. Convert Jpeg To Webp - Конвертирует jpeg формат в webp, работает только на поддерживающих webp браузерах. Convert Meta Tags - Добавляет заголовки для каждого метатега имеющего атрибут http-equiv. Convert Png to Jpeg - Конвертирует gif и png изображения не обладающие альфа прозрачностью и чувствительные к артефактам сжатия в формат jpeg. When converting images to WebP, prefer lossless conversions - Если изображения конвертируются в webp, то предпочитается сжатие без потерь. Cache Extend Css Cache Extend Images - Продлевает срок кэширования неоптимизированных ресурсов. Cache Extend Scripts Fallback Rewrite Css - Переписывает CSS которые не могут быть оптимизированы. Flatten CSS Imports - Встраивание CSS c @import rules. Flushes html -очистка HTML кода. Inline Css - Встраивает небольшие CSS файлы непосредственно в код страницы. Inline Images - Подразумевается rewrite_images. Inline @import to Link - Теги <style> содержащие только CSS @imports, преобразовываются в эквивалентные <link> Inline Javascript - Встраивает небольшие JS-скрипты непосредственно в код страницы Jpeg Subsampling - Урезание цветности изображений. Recompress Jpeg Recompress Png - Пересжатие изображений с удалением метаданных. Recompress Webp Resize Images - Изменение размера изображений, если тэг <img> указывает меньшую ширину и высоту. Rewrite Css - Перезапись CSS файлов с удалением пробелов, комментариев, если в файлах есть включения изображений, то они будут сжаты и добавлены в кэш. Rewrite External Javascript - Перезапись внешних JavaScript файлов, удаление пробелов и комментариев. Rewrite Inline Javascript - Перезапись встроенных JavaScript блоков, удаление пробелов и комментариев. Rewrite Style Attributes With Url - Применение фильтра rewrite_css, к CSS файлам содержащим "url" в атрибутах стиля. Strip Image Color Profiles - Сжатие информации о цветовых профилях изображений. Strip Image Meta Data - Удаление EXIF метаданных из изображений.
Ненужные мне фильтры я буду исключать из конфигурации, чтобы не производить лишней нагрузки на сервер.
Add Head исключаю, потому как сайт на WordPress, страницы генерируются по шаблонам, <head> присутствует всегда, следовательно добавлять его не надо.
Фильтр Convert Gif to Png тоже удаляю, у меня используется всего два gif файла, оба файла с анимацией, а к анимированным gif данный фильтр не применяется.
Convert Meta Tags удаляю, сколько не смотрел, а метатегов с атрибутом http-equiv у меня на страницах нет.
Convert Png to Jpeg не нужен, у себя на сайте я не использую png, только jpg формат.
Jpeg Subsampling и Recompress Png отключаю за ненадобностью, так же как и Resize Images, WordPress по умолчанию уменьшает размеры изображений при загрузке и добавляет файлы нужного размера.
Все остальное оставляю на месте. В итоге получилось следующее.
pagespeed DisableFilters add_head,convert_gif_to_png,convert_meta_tags,convert_png_to_jpeg,jpeg_sampling,recompress_png,resize_images;
С такой конфигурацией сайт набирает 97/100 в тесте PageSpeed Insights, остается только перенести CSS из шапки в подвал сайта, но этим мне заниматься неохота, меня и так устраивает, хотя это сильно влияет на оценку мобильных страниц, там всего лишь 76 баллов.
Узнать какие наборы фильтров входят в уровни CoreFilters и OptimizeForBandwidth можно здесь, там же расписано для чего нужен тот или иной фильтр. Вся документация находится здесь.
Вернемся к минимальной конфигурации из начала статьи.
pagespeed on; pagespeed FileCachePath "/var/cache/ngx_pagespeed/";
Чтобы постоянно не сжимать и переписывать файлы, тем самым нагружая сервер, PageSpeed кэширует ресурсы сохраняя их в указанном каталоге.
Кэшем можно и нужно управлять. На сайтах с большим количеством посетителей и трафика, кэш может разрастись и заполнить весь диск, поскольку изначально никаких ограничений на использование диска не устанавливается.
Основные директивы для управления кэшем.
- pagespeed FileCacheSizeKb - задает максимальный размер кэша в килобайтах.
- pagespeed FileCacheCleanIntervalMs - задает интервал очистки кэша в миллисекундах.
- pagespeed FileCacheInodeLimit - задает лимит индексных дескрипторов (inode) по достижению которого кэш будет очищен.
pagespeed FileCachePath "/var/cache/ngx_pagespeed/"; pagespeed FileCacheSizeKb 102400; pagespeed FileCacheCleanIntervalMs 3600000; pagespeed FileCacheInodeLimit 500000;
Подобная конфигурация будет работать следующим образом. Процесс очистки кэша будет запускаться каждый час, согласно заданного интервала, но очищаться кэш будет не всегда. Кэш будет очищен только в том случае, если его размер превысит заданные лимиты в 102 мегабайта или в 500000 inodes. Подробнее про настройку кэша можно прочитать здесь.
Последнее что заслуживает внимания - консоль PageSpeed. Консоль или админ панель, это набор графиков, гистограмм и прочих инструментов позволяющих просматривать статистику работы модуля и вовремя узнавать о проблемах.
Чтобы активировать консоль, добавьте следующие настройки в конфигурацию PageSpeed.
pagespeed Statistics on;
pagespeed StatisticsLogging on;
pagespeed StatisticsLoggingIntervalMs 60000;
pagespeed StatisticsLoggingMaxFileSizeKb 1024;
pagespeed LogDir /var/log/pagespeed;
pagespeed AdminPath /pagespeed_admin;
location ~ ^/pagespeed_admin {
allow 127.0.0.1;
allow ТВ.ОЙ.IP.АДР;
# или
allow ТВ.ОЯ.ПОД.СЕТЬ;
deny all;
}
Админ панель станет доступна по адресу yourdomain.com/pagespeed_admin/. Подробнее о настройках консоли можно прочитать здесь.
В итоге у меня получился вот такой файл настроек PageSpeed.
pagespeed on;
pagespeed FileCachePath "/var/cache/ngx_pagespeed/";
pagespeed FileCacheSizeKb 102400;
pagespeed FileCacheCleanIntervalMs 3600000;
pagespeed FileCacheInodeLimit 500000;
pagespeed RewriteLevel CoreFilters;
pagespeed DisableFilters add_head,convert_gif_to_png,convert_meta_tags,convert_png_to_jpeg,jpeg_sampling,recompress_png,resize_images;
pagespeed Statistics on;
pagespeed StatisticsLogging on;
pagespeed StatisticsLoggingIntervalMs 60000;
pagespeed StatisticsLoggingMaxFileSizeKb 1024;
pagespeed LogDir /var/log/pagespeed;
pagespeed AdminPath /pagespeed_admin;
location ~ ^/pagespeed_admin {
allow ТВ.ОЙ.IP.АДР;
# или
allow ТВ.ОЯ.ПОД.СЕТЬ;
deny all;
}
На этом все. Спасибо за внимание.
