PageSpeed Ninja WordPress
WordPress

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

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

Кстати, скачивать рекомендую только из официального репозитория по ссылке: https://ru.wordpress.org/plugins/psn-pagespeed-ninja/ Все остальное от лукавого!

Настройки PageSpeed Ninja

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

PageSpeed Ninja интерфейс

Общие

Настройки 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
Вкладка «Решение проблем»

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

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

Дальше функция «Avoid landing page redirects». Включать не обязательно, ведь она еще не реализована.

Сжатие в PSN
Вкладка «Enable compression»

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

Leverage browser caching

Кэширование в браузере в PageSpeed Ninja
Вкладка «Leverage browser caching»

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

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

  • JavaScript файлов;

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

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

Reduce server response time

Reduce server response time
Вкладка «Reduce server response time»

Примерный перевод: сократить время отклика сервера. Данная настройка предназначена для активации кеширования на уровне сервера. Caching — активируем кеширование на уровне сервера. Фактически, хостинг будет отдавать уже сгенерированные статические объекты. Experimental Caching позволяет использовать кеш более эффективно. Далее устанавливаем время жизни кеша в минутах. Учтите, некоторые плагины имеют встроенные «ключи», которые должны обновляться в определенный период времени. Например, Caldera Forms, в таком случае не ставьте более 12 часов.

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

Minify CSS

Минификация CSS

Сжатие CSS PSN
Вкладка «Minify CSS»

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

  1. Merge CSS files. Объединение файлов стилей. Данная функция позволяет плагину PageSpeed Ninja «склеить» несколько файлов стилей в один. 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
Вкладка «Minify HTML»

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

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

  2. Remove comments. Удаляет комментарии из HTML, позволяет сэкономить 10-20 КБ.

  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

Minify JavaScript PSN

Минфикация 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 MethodJsMin довольно эффективный метод, но для сайтов со сложной структурой скриптов не подойдет.

  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

PSN инструкция
Вкладка «Eliminate render-blocking JavaScript and CSS in above-the-fold content»

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

  • Above-the-fold 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

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

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 для измененных размеров изображений.

Прочее

PSN Setup

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

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

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

5 комментариев

  • Игорь Хабурский

    Страница заказа бесконечно обновляется даже при базовых настройках. Невозможно сделать заказ. Не знаю как отключить кеширование страницы заказа. Жаль. Плагин хороший. В Супер Кеш к примеру есть поле где можно исключить из кеша корзину, кабинет и заказ.

    • ren334

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

  • Константин

    Спасибо за подробный разбор, очень помогли. Правда пришлось пошагово проверять каждую настройку, пару раз сайт слетал. Но в итоге немного уменьшил объем страницы. С 797 до 790 Кб )))) Хоть что-то, посмотрю как на других сайтах он себя покажет.

    • ren334

      Спасибо за отзыв! С такими плагинами по другому никак. Все сайты разные, используют разные отличные плагинов, потому, настройки будут разными. Соответственно, самое большое, что мог сделать, просто дать описание настроек и предостеречь при использовании некоторых. Все страницы, впринципе, может не сильно уменьшиться. А вот количество запросов к серверу, по крайней мере у меня, серьезно сократилось. Соответственно, скорость сайта увеличилась. Кстати, для сокращения веса можете использовать отложенную загрузку изображений, вот ссылка на обзор подходящих плагинов: https://workinnet.ru/lazy-load/
      Скажу честно, мне больше всего понравился плагин A3 Lazy Load. Он в данном плане показал наибольшую эффективность. По крайней мере, гораздо большую, чем ленивая загрузка в PageSpeed Ninja.

  • Холден Колфилд

    Поставил плагин PageSpeed Ninja, но я забыл, что у меня wp super cache установлен. Пришлось заходить в файловый менеджер на хостинге и удалять файл advanced-cache. Тогда сайт восстановился. Устанавливал его ради проверки, чтобы глянуть гугл пейдж спид инсайт покажет. А показывает по 98 в мобильной и 99 в десктопной версиях. Причем ради проверки я разные темы ставил из репозитария wordpress и минималистические и громоздкие, но всегда результат выше всяких похвал. Как по мне — это самый лучший плагин из тех, которые «все в одном». Рекомендую, но автор прав, с ним надо аккуратнее играться, точнее с его настройками.

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

Ваш e-mail не будет опубликован.