Плагин PageSpeed Ninja позиционирует себя как специальный инструмент для оптимизации показателей по версии PageSpeed Insight. Но на самом деле он содержит в себе комплекс инструментов, способных значительно увеличить скорость сайта, что полезно не только для «пузомерок», но и для обыкновенных живых пользователей. Но этот плагин довольно требователен к «прямым» рукам, чтобы ничего не полетело, необходимо его правильно настроить. В этой статье я предоставлю подробную инструкцию по настройке плагина PageSpeed Ninja.

Настройки PageSpeed Ninja

Установив плагин, получите предложение выбрать один из режимов настройки. Для начала рекомендую поставить «Safe mode», это обеспечит минимальное вмешательство в сайт, соответственно, вероятность, что посыпется структура, минимальная. Теперь перейдем непосредственно к настройкам по отдельности. Постараюсь разжевать все.

Общие

Настройки PSN
Вкладка "Общие"

Рассмотрим все настройки по отдельности:

  1. Enable for Logged Users: фактически, включить оптимизацию для зарегестрированных пользователей. Если у вас есть постоянные зарегистрированные посетители, которые не имеют отношение к администрации и редакторам сайта, функцию лучше включить.

  2. HTML Parser. Фактически, тип оптимизации итогового кода. Стандартный — обыкновенный парсер, предназначенный для полной обработки документа, рекомендую использовать именно его. Остальные лучше не надо, ведь второй ограничен функционалу и является строгим (не может работать с невалидным кодом и незакрытыми тегами), а третий предназначен для анализа XML, соответственно, подойдет только для сайтов с соответствующей структурой (например, RSS).

  3. Distribute method. Здесь уже идет выбор настройки использования инструментов плагина. Объясню просто. Если выбираем метод «Direct», то для кеширования, распространения сжатых файлов и сжатия будут использоваться стандартные настройки веб-сервера. Apache mod_rewrite+mod_headers является наиболее быстрым методом. Но данные настройки должны поддерживаться веб-сервером и быть включенными. Просто Apache mod_rewrite заметно медленней, чем предыдущий, ведь не добавляет параметры в заголовки, в отличии от предыдущего метода. А метода PHP генерирует get-запросы, что не очень хорошо. Рекомендую Direct или Apache mod_rewrite+mod_headers.

  4. Static files directory. Папка, в которой будет храниться кэш.

  5. HTTP/2 Server Push. Специальная технология, позволяющая отправлять ресурсы прежде, чем понадобятся конечному агенту. Фактически, этакая предзагрузка. Рекомендую включить, полезная технология.

  6. Support badge. Местная вотемарка.

  7. Remote critical CSS generation. Если постоянно вносите изменения в стили сайта, то стоит включить. Тогда CSS будет генерироваться на стороннем сайте в автоматическом режиме. Но я данную функцию не врубаю. Прсто вручную чищу кеш, если надо.

  8. Send anonymous statistics. Анонимная статистика об использовании функций. На ваше усмотрение.

Решение проблем

Настройка плагина для ускорения WordPress
Вкладка "Решение проблем"

Enable compression

Вкладка "Enable compression"

Активация сжатия. Здесь присутствует всего лишь три настройки. Первая — активация сжатия Gzip, вторая отвечает за активацию этого режима через файл .htaccess. А вот третья настройка переопределяет атрибуты HTML для лучшего сжатия. Лучше не использовать.

Leverage browser caching

Вкладка "Leverage browser caching"

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

  • файлов стилей;

  • JavaScript файлов;

  • файлов и изображений.

Последние три настройки я отключаю, так как на сайте у меня есть некоторые динамически генерируемые «коды». Но может вам подойдут.

Reduce server response time

Reduce server response time
Вкладка "Reduce server response time"

Сократить время отклика сервера. Данная настройка предназначена для активации кеширования на сервер. Включая первую, активируем кеширование на сервере. Фактически, сервер будет отдавать уже сгенерированные статические объекты. Experimental Caching позволяет использовать кеш более эффективно. Далее устанавливаем время жизни кеша в минутах.

Последняя настройка — DNS Prefetch предназначена для ускорения поиска DNS внешних ресурсов, используемых на сайте. Полезная функция, если на сайте используются ресурсы из внешних источников. Например, реклама, счетчики.

Minify CSS

PSN Minify CSS
Вкладка "Minify CSS"

Минификация (сжатие) файлов стилей. Данный раздел предназначен для снижения нагрузки от файлов CSS. Теперь по порядку:

  1. Merge CSS files. Объединение файлов стилей. Данная функция позволяет плагину PageSpeed Ninja «склеить» несколько CSS в один. Exclude files list позволяет исключить определенные файлы из сего процесса.

  2. Merge embedded styles. Позволяет объединять встроенные в документ стили. Например, те, что генерируются автоматически. Disable – дезактивация функции. In <head> only позволяет объединять только те стили, что находятся в разделе <head></head>, а Everywhere — везде. Я использую только для заголовков, так как в теле присутствуют динамические стили, а с ними возможны конфликты.

  3. Minify CSS Method. Методы минификации. Не буду вдаваться в подробности, но RESS довольно мягкий способ, практически бесконфликтный, CSS Tidy чуть посерьезнее, ну а последний берет положительные стороны обоих. В случае проблем со стилями, лучше отключить.

  4. Minify style attributes. Ужимает атрибуты. Использовать можно, если есть много встроенных «style». В противном случае выигрыш сомнительный. С динамическими стилями неплохо дружит.

  5. Inline limit. Позволяет встроить CSS прямо в тело документа, чтобы избежать дополнительных запросов к серверу. Здесь можно указать размер. Замерьте суммарный объем подгружаемых CSS и укажите соответствующий объем.

  6. Cross-files optimization. Оптимизация скомбинированных файлов.

  7. Keep extra link tag attributes. Не оптимизирует определенные таблицы стилей, если тег «link» содержит дополнительные атрибуты. Это защита на случае, если какие-либо скрипты используют библиотеку. Лучше включить. Следующая функция практически аналогична, но касается тега «style».

Minify HTML

Вкладка "Minify HTML"

Минификация (сжатие) HTML. Здесь тоже есть ряд полезных функция, помогающих слега ускорить загрузку страниц:

  1. Merge whitespaces. Убирает пустые места из HTML. Фактически, пробелы, пустые строки, которых может быть немало. Выигрыш не особ большой, но он есть.

  2. Remove comments. Удаляет комментарии из HTML.

  3. Minify URLs. Заменяет абсолютные ссылки на относительные. То бишь вместо https://ваш-сайт.ru/wp-content/themes/them-name/style.css останется /wp-content/themes/them-name/style.css. Не рекомендую включать. Выигрыш сомнительный, а вот с подключением внешних скриптов может создать проблемы. Да, еще проблемка может возникнуть с биржами ссылок. Ведь ссылки на чужой сайт также будет резать.

  4. Remove default attributes. Удаляет атрибуты со значениями по умолчанию. То бишь, убирает там, где они не нужны. Использовать с осторожностью.

  5. Remove IE conditionals. Убирает комментарии с тегами для Internet Explorer из других браузеров. Выигрыш тоже так себе.

Minify JavaScript

Минфикация JS для увеличения скорости WP
Вкладка "Minify JavaScript"

Теперь мое любимое — минификация js. О да, в этом столько боли! Ведь неправильное использование функций начисто порушит всю структуру сайта.

  1. Merge script files. Объединение JS. Если есть сложные слайдеры, например Revolution, всякие предзагрузчики, то использовать с осторожностью. Может все к чертям порушить. Чуть ниже можно определенные скрипты исключить.

  2. Merge embedded scripts. Объединение встроенных в документ скриптов. Я использую только заголовки, ибо реклама может генерироваться динамически в теле и данная функция вполне способна привести к конфликту.

  3. Auto async. Асинхронная загрузка js. Фактически, скрипты будут загружаться параллельно с документом. Крутая функция, но также может привести к проблемам.

  4. Skip initialization scripts. Позволяет пропустить короткие встроенные сценарии. Плагин PageSpeed Ninja не будет их задействовать в минификации.

  5. Minify Javascript Method. JsMin довольно эффективный метод, но для сайтов со сложной структурой скриптов не подойдет.

  6. Minify event attributes. Позволяет минифицировать атрибуты событий. Если есть сквозная аналитика, подключенные цели через счетчики на формы обратной связи и тому подобное, то лучше оставить выключенным.

  7. Inline limit. Позволяет встроить скрипты в тело документа с максимально допустимым указанным размером, что позволяет сократить количество запросов к серверу.

  8. Cross-files optimization. Оптимизация минифицированных файлов. На ваше усмотрение.

  9. Wrap to try/catch. Специальная оболочка, позволяющая избегать конфликтов. Обычно не помогает.

  10. Keep extra script tag attributes. Не оптимизирует определенные скрипты, если тег содержит дополнительные атрибуты. Это защита на случай, если какие-либо таблицы стилей связаны с библиотекой. Лучше включить.

  11. Optimize integrations (Facebook. Google Plus, etc.). Оптимизирует интеграции с другими сервисами. Лучший метод ускорения — выкинуть Facebook на помойку, их виджеты намертво убивают скорость сайта. Но если без этого не обойтись, можете протестировать функцию.

  12. Optimize Emoji loading. Богомерзкие Эмоджи. Лучше вообще отрубить.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Eliminate render-blocking JavaScript and CSS in above-the-fold content PSN
Вкладка "Eliminate render-blocking JavaScript and CSS in above-the-fold content"

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

  • Above-the-fold CSS: CSS верхней части страницы;

  • Above-the-fold CSS cookie: позволяет использовать куки для встраивания стилей;

  • Local above-the-fold generation: позволяет данные сгенерировать локально либо на внешнем сервере;

  • Above-the-fold CSS styles: предназначен для ручной генерации стилей верхней части;

  • Auto update Above-the-fold CSS: включает автоматическое обновление.

Google Fonts loading. Здесь рассмотрим поподробнее. «Flash of invisible text» не будет отображать текст, пока нужные шрифты не загружены. «Flash of unstyled text» позволяет отображать текст со шрифтами по умолчанию, пока не будет загружен нужный. WebFont Loader позволяет загружать шрифты асинхронно с помощью библиотеки webfonts.js. Если есть шрифты Google, то лучше выбрать «Flash of unstyled text».

И последняя функция — Non-blocking Javascript. Позволяет загрузить документ вперед скриптов и после, с задержкой в несколько секунд, загрузить все js. Плохо сказывает на отображение, может серьезно конфликтовать, а также может порушить счетчики.

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

Optimize images

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

Prioritize visible content

Prioritize visible content PageSpeed Ninja
Вкладка "Prioritize visible content"

Даем приоритет видимому контенту. Все довольно просто:

  1. Lazy Load Images. Ленивая загрузка изображений. То бишь, медиафайлы не грузятся, пока они не нужны и находятся вне зоны видимости.

  2. Lazy Load Iframes. Ленивая загрузка фреймов. Например, рекламных объявлений. Пока до них не до листают, они не будут подгружены.

  3. Low-quality image placeholders. Используем некачественные заполнители изображений. Например, для миниатюр.

  4. Vertical lazy loading threshold. Фактически, отступ. Если до изображения или фрейма останется 40 пикселей, то он начнет грузиться. Можете указать свое число пикселей.

  5. Skip first images. Пропускает первые изображения (то есть на них ленивая загрузка не распространяется).

  6. Noscript position. В душе не чаю, для чего это нужно. Только если для изображений, обернутых в тех <noscript>.

  7. Generate srcset. Автоматически генерировать атрибут srcset для измененных размеров изображений.

Прочее

Avoid plugins. Позволяет удалить встроенные плагины, такие как Flash, ActiveX, Silverlight. В случае конфликтов стоит отключить.

Configure the viewport. Ширина области просмотра. Для использования параметров экрана по умолчанию, нужно установить значение 0.

Остальные функции пока что не реализованы, ждем дальнейших обновлений. Надеюсь, помог разобраться в данном непростом плагине. Учтите, в подробности по поводу функций вдаваться не стал, каждая заслуживает отдельной статьи, но рекомендации дал, так что разобраться станет заметно легче.

Плагин для ускорения WordPress PageSpeed Ninja: инструкция и описание
5 (100%) 1 vote[s]

Плагин для ускорения WordPress PageSpeed Ninja: инструкция и описание: 2 комментария

  1. Хорошая уникальная статья 2019 года! Нашёл через гугл, продолжай в том же духе!
    Очень помогла твоя инструкция, лайк и в избранное!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *