Оптимизация WordPress для Google PageSpeed Insights • WP Best

Что такое PageSpeed Insights и как он работает

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

PageSpeed выдает два типа данных: лабораторные и полевые.

Лабораторные данные полезны для отладки производительности, но не всегда захватывают реальные критические ошибки.

Полевые данные отражают взаимодействие пользователей, но набор метрик более ограничен.

В начале страницы PageSpeed Insights выдает общий счет производительности через инструмент lighthouse, который собирает и анализирует полевые данные.

Отчет Lighhouse можно смотреть в инструментах разработчика в браузере, в консоли, или просто установив расширение для Chrome.

Пример отчета для сайта wp-best.ru. Отчет лучше выполнять в инкогнито режиме, потому что может конфликтовать с другими установленными расширениями и выдать некорректные данные.

пример отчета lighthouse для сайта wp-best.ru

Lighthouse выдает большой объем. Его можно сохранить, экспортировать в удобный вариант, и загрузить в просмотрщик для изучения позже.

При анализе страницы, PageSpeed Insights также анализирует полевые данные из отчетов CrUX (Chrome User Experience Report) — реального взаимодействия пользователей.

Метрики производительности, ориентированные на пользователя

Одним из частых заблуждений является предположение, что сайт грузится х.хх секунд. Это не так, потому что сайт грузится в разных условиях, на разных экранах, на разных типах соединений.

Поэтому в реальности скорость загрузки больше похожа на график количества обращений (пользователей) к шкале времени загрузки.

Также скорость загрузки нельзя оценивать в х.хх секунд, потому что она не ограничивается конкретной метрикой, а отражается по целому набору факторов. Производительность это не только время/скорость загрузки, но то, как пользователь воспринимает её.

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

Первая отрисовка (FP/FCP/FMP)

First Paint — время, когда браузер начинает производить любую отрисовку на экране.

First Contentful Paint — начало появления содержания DOM элементов.

Данные метрики дают обратную связь пользователю, что что-то начинает происходить.

First Meaningful Paint — первая полезная отрисовка.

Долгое время выполнения

Браузер исполняет JavaScript в одном потоке, а все генерируемые пользователем события ставятся в очередь.

Поэтому принято считать, что задача, выполняющаяся более 50 мс, является потенциальной проблемой производительности.

Время до взаимодействия (TTI/FID)

 Time to interactive (TTI) — время, когда страница визуально отобразилась и способна отвечать на действия пользователя.

First Input Delay (FID) — время между началом выполнения пользователем каких-то действий и готовностью браузера на них отвечать.

Приложение может быть не готово отвечать по двум причинам:

  • необходимые javascript компоненты еще не загрузились;
  • длительное исполнение кода блокирует основной поток.

Как PageSpeed Insights классифицирует страницы по скорости

PageSpeed Insights делит полевые данные на три группы по производительности: быстрая, средняя, низкая.

Быстрая производительность — FCP [0, 1000ms],  FID [0, 50ms]

Средняя — FCP[1000ms, 2500ms], FID [50ms, 250ms] 

Низкая —  FCP [2500ms], FID [250ms]

Распределение FCP/FID по шкале отмечено также цветами: зеленый (быстрая), оранжевый (средняя), красный (низкая). Метрики показывают производительность страниц из анонимных отчетов пользователей (CRUX) за 30 дней.

Как улучшить метрики FP, FCP, FMP, TTI, FID

Уменьшить время до FCP (первой отрисовки контента) можно за счет удаления/откладывания загрузки скриптов и стилей. В идеале, включить в раздел <head> только код, который необходим для FMP (первой полезной отрисовки).

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

 Чтобы устранить задержку во взаимодействии (TTI, FID), мы также должны максимально сократить исполняемый код на странице, потому что браузер обрабатывает его в очереди.

Если вам понятны все перечисленные термины, вопрос поиска проблем производительности и выбор способа их исправления не будет вызывать затруднений.

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

Оптимизация WordPress для PageSpeed Insights

Если хотите добиться хороших метрик в PageSpeed, в большинстве случаев это возможно только с помощью чистки кода.

Кэширование страниц поможет сократить время ответа сервера, но не повлияет на время выполнения скриптов.

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

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

Как можно максимально увеличить результат, обращая внимание на самые важные параметры в расчете оценки скорости?

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

Рекомендую прочитать — The Science Behind Google PageSpeed Insights: How It Works & What It Actually Measures.

Расчет показателя PSI на примере блога

Сайт wp-best работает на быстрой и легкой теме Astra, без дополнительных скриптов, чатов и т.д. Поэтому мне повезло получить высокий показатель > 85.

В формировании показателя участвуют 5 важных метрик. Счет берем по соответствию значений из таблицы Lighthouse v3 Score Weighting.

ПоказательВесЗначениеСчетВес * Счет
Time to Interactive (TTI)53,990450
Speed Index43,990360
First Contentful Paint (FCP)32,580240
First CPU Idle23,590180
First Meaningful Paint (FMP)12,98080
Итого:151310

1310 / 15 = 87,3333333 (с округлением 87)

Более подробную информацию о расчете и о параметрах можно брать из документации Lighthouse. Scoring.

В таблице (на вкладке Score calculator) можно подставлять свои предполагаемые значения и наблюдать изменения показателя.

Плагины для увеличения оценки PageSpeed Insights

Для WordPress написаны десятки плагинов, ориентированные на увеличение скорости загрузки разным типом способов: включение gzip сжатия, задание сроков хранения статических ресурсов, сжатие кода (минификация html, js, css), сборка js и css в файлы и откладывание их загрузки, асинхронная загрузка, оптимизация изображений, ленивая загрузка (изображения, iframe, video), динамическое кэширование (генерация статических страниц), оптимизация загрузки шрифтов, отключение лишнего функционала и т.д.

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

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

Уменьшение времени ответа сервера. Обычно достигается включением динамического кэширования (WP Super Cache, Cache Enabler и др.).

Оптимизация кода (минификация, сборка, откладывание). Я использую для этих целей популярный плагин Autoptimize. Есть другие плагины, имеющие аналогичный функционал — WP Rocket, Pagespeed Ninja, WP Fastest Cache.

Безопасность и легкость этого процесса зависит от слоёв кода сайта. Если повезет — оптимизацию удастся выполнить в несколько кликов. Но в реальности очень часто возникают ошибки и требуются технические навыки для их поиска и исключения.

Оптимизация кода позволяет сократить вес страниц, снять блокировку ресурсов, которые препятствуют отображению (частично, за исключением jquery и основного файла стилей), и сократить количество запросов (обычно в 1,5 — 2 раза)

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

В принципе, любой плагин подойдет и пользоваться ими просто.

Вместо максимальных настроек сжатия имеет смысл сочетать с технологией ленивой загрузки.

Ленивая загрузка. Позволит очень существенно сократить вес страницы. Многие плагины поддерживают включение ленивой загрузки изображений (практически все вышеперечисленные). Но нередко появляются ошибки в визуальном отображении, и появляется необходимость исключать оптимизацию изображений в некоторых блоках.

Но продвинутые настройки ленивой загрузки есть не во всех плагинах. Сюда также можно добавить ленивую загрузку видео (youtube) и iframe (вставки карт), — эти скрипты очень увесистые, — если удастся их отложить, будет значительный прирост.

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

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

window.addEventListener('scroll', () => {
        
        setTimeout(() => {

        }, 1000)
    }
});

Такая оптимизация потребует определенного уровня знаний и навыков.

Поэтому, увы, достижение высокой оценки PageSpeed Insights одними лишь плагинами для WordPress, зачастую задача невыполнимая.

Сколько может стоить услуга ускорения сайта на WordPress по Pagespeed Insights

Глубокая оптимизация затратна по времени и требует набора навыков.

На кворке я предлагаю базовый вариант ускорения сайта, и ориентируюсь в основном по Gtmetrix. Причина в том, что он позволяет быстрее определить необходимые действия, и за небольшой бюджет и ограниченное количество времени получить хороший результат (по принципу Парето 20/80).

Получение высокой оценки в Pagespeed Insights потребует больше доработок в коде, чистку и замену функционала, правки вёрстки. Больше часов, больше опыта, больше бюджет. Исходя из собственного опыта, я думаю, адекватная цена от 100 долларов и выше. Но никак она не будет стоить 500 рублей, только если её не выполняет новичок или человек, не ценящий ни своё ни чужое время.

По поводу фанатизма в показателях Pagespeed Insights.

Во-первых, оценки во всех сервисах составляются роботами, и они могут быть ошибочными.

Во-вторых, указание на возможность оптимизации не всегда нужно расценивать как руководство к действию. Есть здравый смысл. Если вы выбрали конструктор для создания страниц, для этого были причины, и объективно, его код будет тяжелее и потребует ресурсы при выполнении.

Если вы работаете с клиентскими сайтами, старайтесь доносить это до владельцев.

PageSpeed Insights часто ругается на время выполнения работы скриптов. Особенно это касается внешних сервисов, — капчи, метрик, чатов. В то же время, они незначительно влияют непосредственно на визуальную скорость загрузки.

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

Вкратце, что имеем.

Сайты жиреют. Сайты на WordPress, благодаря своей популярности и расширяемости, не исключение.

У PageSpeed Insights высокие требования.

Эти требования по сути являются всего-лишь рекомендациями.

Подключение плагинов зачастую недостаточно для получения высокой оценки.

В процессе оптимизации возникают ошибки, которые требуют навыка их поиска и решения.

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

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

Спасибо за статью. Очень полезная!

trackback

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

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