Оптимизация производительности WordPress: Core Web Vitals, кэш и замеры

По документации Web Vitals на web.dev (последнее обновление 31 октября 2024 года) Google оценивает скорость страницы тремя метриками Core Web Vitals: LCP до 2,5 секунды, INP до 200 миллисекунд и CLS не больше 0,1. Смотрят на 75-й процентиль реальных визитов, отдельно для мобильных и десктопа. С марта 2024 года INP заменил FID, так что старые советы про «первую задержку ввода» уже не про то.

Для сайта на WordPress это значит, что ускорять нужно не абстрактную «скорость», а конкретные вещи: время до появления главного блока, отклик на клики и прыжки вёрстки. Ниже порядок действий: сначала замер, потом правки по одной.

Замер: PageSpeed Insights и WebPageTest

Начните с PageSpeed Insights. Он показывает и лабораторный прогон Lighthouse, и полевые данные Chrome UX Report, если у сайта достаточно трафика. Полевые данные важнее: это то, что видят живые посетители.

Когда нужно понять, что именно тормозит, пригодится WebPageTest от Catchpoint. Там видна водопадная диаграмма запросов, TTFB, порядок загрузки шрифтов и скриптов, можно выбрать регион, браузер и скорость сети. Зафиксируйте исходные цифры и после каждой правки прогоняйте тест заново.

Сервер и кэш: TTFB и page cache

Если сервер долго отвечает, остальное уже не спасёт. Слабый общий хостинг под нагрузкой первым портит TTFB, поэтому начните с площадки: о вариантах я писал в заметке какой хостинг выбрать. Актуальный PHP тоже даёт заметный прирост: wordpress.org рекомендует PHP 8.3 и новее.

Дальше кэш. Руководство по оптимизации на developer.wordpress.org называет кэширование самым выгодным шагом при минимуме усилий. Кэш страниц отдаёт готовый HTML без запуска PHP, а объектный кэш на Redis или Memcached разгружает базу. Плагин выбирайте под сервер: LiteSpeed Cache для LiteSpeed, WP Fastest Cache, W3 Total Cache или WP Rocket для nginx и Apache.

Картинки, скрипты и плагины: что режет LCP и INP

  • Картинки. Сжимайте и отдавайте в WebP или AVIF, указывайте размеры, чтобы не прыгал CLS. Главное изображение первого экрана не откладывайте через lazy load, иначе вырастет LCP.
  • Тема. Тяжёлые универсальные темы тянут CSS и JS на каждую страницу. Лёгкая тема с блоками обычно быстрее любой настройки.
  • Внешние скрипты. Счётчики, чаты, пиксели и встроенные карты чаще всего портят INP. Загружайте их отложенно и убирайте лишнее.
  • CSS и JS. Минификация и отложенная загрузка помогают, а слепое объединение всех файлов на HTTP/2 уже почти ничего не даёт.
  • Сжатие. Brotli или Gzip включают на уровне nginx, Apache или CDN.
  • База данных. Чистите ревизии, спам, просроченные транзиенты и следите за автозагружаемыми опциями в wp_options.
  • Плагины. Каждый активный плагин добавляет хуки в каждый запрос. Неиспользуемые удаляйте.

В итоге ускорение WordPress складывается из нескольких слоёв: нормальный сервер и свежий PHP, кэш страниц, лёгкая тема, сжатые картинки и минимум сторонних скриптов. Мерьте до и после в PageSpeed Insights, меняйте по одному фактору и ориентируйтесь на полевые LCP, INP и CLS, а не на баллы в лаборатории.

Источники и ссылки


Комментарии загружаются…