Оптимизация 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 — первая полезная отрисовка.

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

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

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

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

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

Новые метрики (LCP, CLS, TBT)

С последним обновлением инструмента Lighthouse версии 6.0 появились новые метрики, обновился подсчет показателя.

Калькулятор с подсчетами можно открыть прямо из отчета PageSpeed Insights.

https://googlechrome.github.io/lighthouse/scorecalc/#FCP=725&SI=1771&LCP=1052&TTI=725&TBT=0&CLS=0.03&FCI=725&FMP=725

В данном отчете между оценкой версии 5 и 6 нет разницы. Потому что сайт простой, на теме Astra, без конструкторов.

Небольшие исследования показали, что, в общем, 20% сайтов получили более высокие оценки, 30 % — остались без изменений, 50 % — заметили спад на 5 пунктов и более.

Largest Contentful Paint (LCP) — измеряет воспринимаемую скорость загрузки, момент когда пользователь видит основную (большую) часть контента на экране. Действует как дополнение к FCP, который отражает только начало загрузки. LCP до 2,5 секунд считается хорошим показателем.

Cumulative Layout Shift (CLS) — измеряет неожиданные сдвиги макета, когда видимые элементы меняют своё положение на странице. Хороший результат по CLS, если он не превышает 0,1.

Total Blocking Time (TBT) — измеряет сумму времени блокирования основного потока на всём участке загрузки от First Contentful Paint (FCP) до Time to Interactive (TTI). Основной поток считается заблокированным долгой задачей, если она выполняется более 50 мс.

С появлением новых метрик отказались от FMP, CPU Idle, FID.

Вес и распределение вы можете увидеть в калькуляторе.

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

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

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

Для 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 потребует больше доработок в коде, чистку и замену функционала, правки вёрстки. Больше часов, больше опыта, больше бюджет.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

trackback

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

Иван
Иван
1 месяц назад

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

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