Core Web Vitals в WordPress: что измеряют LCP, INP и CLS и как их улучшить

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

Три показателя и их цели

• LCP (самая большая по содержанию краска): время до отрисовки самого большого изображения или текстового блока в области просмотра. Хорошо — 2,5 секунды или меньше.
• INP (Взаимодействие со следующей отрисовкой): сколько времени требуется странице, чтобы визуально отреагировать на клик, касание или нажатие клавиши в течение всего посещения. Хорошо — 200 миллисекунд или меньше. INP заменил первую задержку ввода в качестве основного веб-важного параметра в марте 2024 года.
• CLS (кумулятивный сдвиг макета): сколько видимого контента неожиданно перемещается. Хорошо – 0,1 или меньше.

Google оценивает страницу по 75-му процентилю реальных посещений, разделенному по мобильным и настольным компьютерам. Быстрый ноутбук с офисным Wi-Fi мало что вам скажет; число, которое имеет значение, исходит от обычных телефонов при обычном соединении. Определения и пороговые значения взяты из Обзор Web Vitals от web.dev.

Прежде чем что-то менять, измерьте

Проведите ключевые страницы через Статистика PageSpeed. В верхнем разделе отображаются данные полей пользователей Chrome, если на вашем сайте достаточно трафика; лабораторный раздел ниже представляет собой одну смоделированную нагрузку. Исправьте то, что показывают полевые данные, и используйте отчет лаборатории, чтобы найти причину. В отчете Search Console Core Web Vitals группируются похожие URL-адреса, поэтому одно исправление шаблона может очистить сотни страниц.

Улучшение LCP

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

• Подавайте главное изображение в формате WebP или AVIF в том размере, в котором оно показано, а не в исходном загруженном виде.
• Никогда не лениво загружайте изображение выше сгиба. WordPress добавляет fetchpriority="высокий" к первому большому изображению; убедитесь, что ваша тема или плагин не отменяет это.
• Используйте кэширование страниц, чтобы HTML-код доставлялся быстрее. Кэшированная страница на приличном хостинге должна начать прибывать менее чем за секунду.
• Загрузите веб-шрифты с помощью шрифт-дисплей: поменять местами и предварительно загрузите только один или два файла, которые нужны первому экрану.

Руководство по оптимизации LCP разбивает метрику на четыре части, что помогает, когда исправление неочевидно.

Улучшение ИЯФ

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

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

Улучшение CLS

Сдвиг макета происходит, когда что-то появляется и сдвигает контент вниз. Чаще всего причиной этого являются изображения без размеров, шрифты с поздней загрузкой, которые меняют размер текста, баннеры cookie, вставленные над контентом, и реклама без зарезервированного места.

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

Скорость — это также SEO-управление

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

Где помогает FluxWP

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