Pagespeed Ninja - обзор и настройка • WP Best

Как видно из названия, плагин Pagespeed Ninja позиционирует себя как конечный инструмент для увеличения скорости загрузки сайта на WordPress, и улучшения показателей в Pagespeed Insights.

Релизы плагина всё еще с пометкой бета, но он основательно вырос в возможностях, и в количестве активных установок. Наверняка его популярность будет расти, потому что скорости много не бывает.

Посмотрим, что он предлагает нам.

Описание опций Pagespeed Ninja

Pagespeed Ninja идет с несколькими пресетами предустановленных настроек. Для каждой опции есть всплывающие подсказки, они правда на английском, — но возможно русский перевод в скором будущем появится, что несомненно сделает этот плагин более популярным у нас.

  • Safe  — наиболее совместимый пакет настроек с темами и плагинами, но оценка Pagespeed Insights может быть ниже;
  • Compact  — оптимизации, которые требуют некоторого количества дополнительного дискового пространства;
  • Optimal  — оптимизации, подходящие для большинства сайтов;
  • Ultra  — самый высокий уровень оптимизации, исключая экспериментальные;
  • Experimental  — оптимизации, включая экспериментальные и нестабильные;
  • Произвольно — произвольные настройки.

Общие

Enable for Logged Users — включить для пользователей, которые аутентифицированы на сайте;

HTML Parser — выбрать HTML парсер;

Distribute method — метод распространения сжатых файлов JS и CSS;

Static files directory — директория, содержащая статические файлы (сжатые скрипты и стили);

HTTP/2 Server Push — технология позволяет отправлять клиенту JS/CSS файлы без ожидания прямого запроса;

Support badge — добавить небольшую ссылку Pagespeed Ninja в подвал, в качестве благодарности;

Remote critical CSS generation — включение опции позволяет использовать сервера Pagespeed Ninja для генерации критических правил CSS. Если опция отключена, используется упрощенный инструмент в браузере для генерации правил, но их требуется вручную обновлять после каждого изменения на сайте.

Send anonymous statistics — отправлять анонимные данные по использованию, чтобы помочь плагину Pagespeed Ninja дальше развиваться и улучшаться.

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

Error logging  — включить сбор PHP ошибок, исключений, предупреждений в файл (/wp-content/plugins/psn-pagespeed-ninja/includes/error_log.php);

Изображения — удалить оптимизированные изображения / восстановить оригинальные;

Static Files — размер кэша статических файлов (оптимизированных JS/CSS);

Cache — очистить кэш статических файлов;

Page Cache — очистить кэш HTML страниц;

AMDD Database — очистить кэш базы данных с информацией о мобильных устройствах;

Manage Javascript URLs — исключить помеченные JS из сборки и оптимизации;

Manage CSS URLs — исключить помеченные CSS из сборки и оптимизации;

Avoid landing page redirects

Будет реализовано в будущем.

Enable compression

Gzip compression — использовать GZIP для сжатия мобильных страниц;

Gzip compression in .htaccess — включить GZIP компрессию в .htaccess в директориях wp-includes, wp-content, uploads;

Reorder attributes — переопределить порядок HTML атрибутов для лучшего сжатия;

Leverage browser caching

Caching in .htaccess — включить оптимизацию для директорий wp-includes, wp-content, uploads;

Load external stylesheets — включить оптимизацию для подключенных файлов стилей, если не включена динамическая генерация CSS файлов;

Load external scripts — включить оптимизацию для подключенных файлов скриптов, если не включена динамическая генерация JS файлов;

Load external images — включить оптимизацию для подключенных файлов изображений, если не включена динамическая генерация JS файлов;

Reduce server response time

Caching — включить кэширование страниц на сервере;

Experimental Caching — дополнительный уровень кэширования (может потребовать больше дискового пространства);

Caching time-to-live min — время жизни кэша в минутах (Pagespeed Ninja автоматически сбрасывает кэш, если добавлен новый комментарий, запись, правка в теме и т.д.)

DNS Prefetch — предварительное разрешение внешних доменных имен.

Minify CSS

Merge CSS files — объединять CSS файлы;

Exclude files list  — исключить список файлов;

Merge embedded styles — объединять встраиваемые стили;

Minify CSS Method — метод сжатия (минификации);

Minify style attributes — сжимать атрибуты стилей;

Inline limit bytes — лимит встраивания CSS на страницу (встраивать маленькие файлы)

Cross-files optimization — оптимизировать собранные CSS файлы;

Keep extra link tag attributes — не объединять стили, если тег link содержит дополнительные атрибуты (возможно обращение к ним из js);

Keep extra style tag attributes — не объединять стили, если тег style содержит дополнительные атрибуты (возможно обращение к ним из js).

Minify HTML

Merge whitespaces — удалить пробелы / табуляцию из HTML кода;

Remove comments — удалить HTML комментарии;

Minify URLs — заменить абсолютные URL адреса относительными;

Remove default attributes — удалить атрибуты со значениями по умолчанию;

Remove IE conditionals — удалить условные теги IE.

Minify JavaScript

Merge script files — объединять файлы JS;

Exclude files list — исключенный список файлов;

Merge embedded scripts — объединять встроенные inline скрипты;

Auto async — перемещать теги скрипта для более эффективной сборки, отключить если используются блокирующие скрипты;

Skip initialization scripts — пропустить короткие скрипты инициализации;

Minify Javascript Method — метод сжатия JS (минификация);

Minify event attributes — сжимать атрибуты событий;

Inline limit bytes — лимит встраивания короткого кода JS;

Cross-files optimization — оптимизировать собранные JS файлы (время обработки удваивается, использовать только если необходимо максимальное сжатие JS);

Wrap to try/catch — обернуть каждый оптимизированный JS файл в блок try/catch, чтобы браузер продолжил выполнение кода в случае появления ошибки;

Keep extra script tag attributes — не объединять JS файлы, если тег script содержит дополнительные атрибуты;

Optimize integrations (Facebook. Google Plus, etc.) — оптимизировать загрузку популярных JS виджетов;

Optimize Emoji loading — оптимизировать загрузку Emoji.

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

Above-the-fold CSS — включить автоматическую генерацию above the fold CSS;

Above-the-fold CSS cookie — использовать cookie для встраивания above the fold CSS только для первого визита;

Local above-the-fold generation — включить локальную генерацию above the fold CSS (в браузере);

Above-the-fold CSS styles;

Auto update Above-the-fold CSS — обновлять above the fold CSS ежедневно;

Google Fonts loading — загрузка google шрифтов;

Non-blocking Javascript — загрузить JS асинхронно с задержкой после отображения страницы. Может значительно увеличить показатель PageSpeed Insights, но может привести к flash of unstyled text, повлиять на google аналитику и другие побочные эффекты.

Optimize images

Optimization — включить сжатие размера изображений (оригинальные сохраняются с суффиксом .orig);

Images handler — обработчик изображений;

JPEG quality % — качество изображений;

Scale large images — способ масштабирования больших изображений;

Template width (reference) px — ширина шаблона desktop;

Wrap wide images — оборачивать изображения шире половины экрана в span;

Wide image wrapper class — название класса тега-обертки span.

Prioritize visible content

Lazy Load Images — включить ленивую загрузку изображений;

Lazy Load Iframes — включить ленивую загрузку iframe;

Low-quality image placeholders — использовать низкокачественную картинку для замещения вместо пустых областей;

Vertical lazy loading threshold px — порог вертикальной видимой области для ленивой загрузки;

Skip first images — пропустить заданное количество первых изображений;

Noscript position — позиция вставки оригинального изображения в тег noscript для браузеров, в которых отключен JS;

Generate srcset — автоматически создавать атрибут srcset;

Avoid plugins

Remove embedded plugins — отключить встроенные плагины (flash, activex, silverlight);

Configure the viewport

Viewport width px — ширина области видимости (0 — по умолчанию)

Size content to viewport

Пока не реализовано.

Size tap targets appropriately

Пока не реализовано.

Use legible font sizes

Пока не реализовано.

Предустановленные настройки в Pagespeed Ninja

Собрал настройки в таблицу для наглядного отображения состояния каждой опции во всех предустановленных пресетах.

SafeCompactOptimalUltraExperimental
Блок Общие.
* опция Enable for Logged Users отключена;
* Standard full HTML parser;
* метод доставки — Apache mod_rewrite+mod_headers;
* опция HTTP/2 Server Push отключена;
* опция Support badge отключена;
* Remote critical CSS generation — включена;
* Send anonymous statistics — включена.
* Fast simple HTML parser;* включена опция Enable for Logged Users;* libxml HTML parser;
Блок Решение проблем
Блок Enable Compression.
* опция Gzip compression отключена;
* опция Gzip compression in .htaccess отключена;
* опция Reorder attributes отключена;
* опция Gzip compression включена;
* опция Gzip compression in .htaccess включена;
* опция Reorder attributes включена;
Блок Leverage browser caching
* опция Caching in .htaccess отключена;
* опция Load external stylesheets отключена;
* опция Load external scripts отключена;
* опция Load external images отключена;
* опция Caching in .htaccess включена;* опция Load external stylesheets включена;
* опция Load external scripts включена;
* опция Load external images включена;
Блок Reduce server response time
* опция Caching включена;
* опция Experimental Caching отключена;
* Caching time-to-live 15 min
* опция DNS Prefetch отключена
* Caching time-to-live 1440 min
* опция DNS Prefetch включена
* опция Experimental Caching включена;
* Caching time-to-live 10080 min
Блок Minify CSS
* опция Merge CSS files включена;
* Exclude files list
* Merge embedded styles — Disable
* Minify CSS Method — Нет
* опция Minify style attributes отключена;
* Inline limit 4096 bytes
* опция Cross-files optimization отключена;
* опция Keep extra link tag attributes включена;
* опция Keep extra style tag attributes включена.
* Minify CSS Method — RESS* Merge embedded styles — только в <head>* Merge embedded styles — везде;
* Minify CSS Method — RESS + CSSTidy;
* опция Minify style attributes включена;
* опция Cross-files optimization включена;
Блок Minify HTML
* опция Merge whitespaces отключена;
* опция Remove comments включена;
* опция Minify URLs включена;
* опция Remove default attributes отключена;
* опция Remove IE conditionals отключена.
* опция Merge whitespaces включена;* опция Remove default attributes включена;
* опция Remove IE conditionals включена.
Блок Minify JavaScript
* опция Merge script files включена;
* Exclude files list
* Merge embedded scripts —
Disable;
* опция Auto async отключена;
* опция Skip initialization scripts отключена;
* Minify Javascript Method —
Нет;
* опция Minify event attributes отключена;
* Inline limit 4096 bytes;
* опция Cross-files optimization отключена;
* опция Wrap to try/catch включена;
* опция Keep extra script tag attributes включена;
* опция Optimize integrations (Facebook. Google Plus, etc.) отключена;
* Optimize Emoji loading — объединять с другими скриптами.
* опция Auto async включена;
* опция Skip initialization scripts включена;
* опция Keep extra script tag attributes отключена;
* опция Optimize integrations (Facebook. Google Plus, etc.) включена;
* Merge embedded scripts — только в <head>;* Merge embedded scripts — везде;
* Minify Javascript Method — JsMin ;
* опция Minify event attributes включена;
* опция Cross-files optimization включена;
Блок 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 — Нет;
* опция Non-blocking Javascript отключена;
* опция Above-the-fold CSS включена;
* Google Fonts loading — flash of unstyled text;
* опция Non-blocking Javascript включена;
Блок Optimize images
* опция Optimization отключена;
* Images handler GD2;
* JPEG quality 95 %;
* Scale large images — Нет;
* Template width (reference) 960 px;
* опция Wrap wide images отключена;
Wide image wrapper class
* JPEG quality 85 %;* опция Optimization включена;
* Scale large images — fit;
Блок Prioritize visible content
* опция Lazy Load Images отключена;
* опция Lazy Load Iframes отключена;
* опция Low-quality image placeholders отключена;
* Vertical lazy loading threshold
0 px;
* Skip first images 10;
* Noscript position — after;
* опция Generate srcset отключена;
* опция Lazy Load Images включена;
* опция Lazy Load Iframes включена;
* опция Low-quality image placeholders включена;
* Skip first images 3;
* опция Low-quality image placeholders отключена;* Skip first images 1;
* опция Generate srcset включена;
* Skip first images 0;
Блок Avoid plugins
* опция Remove embedded plugins включена;
Блок Configure the viewport
* Viewport width 0px
Блок Size content to viewport
Блок Size tap targets appropriately
Блок Use legible font sizes

Тестирование плагина Pagespeed Ninja

Сделал несколько сравнительных тестов на сайте wp-best.ru.

Стоит заметить, что сайт на легкой теме Astra, обслуживается оптимизированным centmimod стеком, подключены cloudflare и оптимизация изображений в jetpack. Скорость высокая, поэтому сложно оценить потенциальный прирост. Но можно проверить свои ожидания, и в целом работоспособность сайта.

Тесты проведены на вкладке Audit в браузере Google Chrome.

С выключенным Autoptimize

Аудит в Chrome с выключенным плагином autoptimize

C включенным autoptimize

Аудит в Chrome с включенным плагином Autoptimize.

С включенным Pagespeed Ninja

Аудит в Chrome с включенным плагином Pagespeed Ninja

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

В целом, мне плагин понравился. Буду продолжать тестировать в разных условиях.

Есть еще один положительный момент — здоровая конкуренция. Это позволяет схожим продуктам быстрее развиваться и улучшаться.

Напишите ваши впечатления, если плагин Pagespeed Ninja у вас уже установлен. Если только собираетесь устанавливать, не знаете какую опцию выбрать или возникает ошибка, напишите вопрос в комментарии — постараюсь помочь.

Подписаться
Уведомление о
guest
2 комментариев
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Вадим
Вадим
2 месяцев назад

Здравствуйте! А как долго проводится проверка сайта плагином? Установил на 2 сайта, 1 сайт большой, проверяется уже часов 8-9, до сих пор не проверен, все крутится.
Второй сайт меньше, максимум страниц 50 — также до сих пор проверяется.
Может вопрос глупый, надо держать вкладку проверки открытой, или он автоматически проверяет? Спасибо!

2
0
Оставьте комментарий.x
()
x
Пролистать наверх