Как ускорить медленные страницы и улучшить Core Web Vitals
Core Web Vitals показывают, насколько быстро страница ощущается для пользователя: как быстро появляется основной контент, как быстро она реагирует и насколько стабильно выглядит. У каждого показателя есть короткий список типичных причин проблем.
Три показателя, к которым нужно стремиться
| Метрика | Что измеряет | Хорошо |
|---|---|---|
| LCP | Когда появляется основной контент | 2,5 с или меньше |
| INP | Как быстро страница реагирует на действия пользователя | 200 мс или меньше |
| CLS | Насколько сильно смещается макет | 0,1 или меньше |
Запустите Тест скорости страницы, чтобы увидеть свои показатели. Результаты отличаются от запуска к запуску, а только что опубликованный сайт может работать медленнее, пока не заполнятся кэши, поэтому тестируйте несколько раз.
Лабораторные тесты имитируют визит. Полевые данные поступают от реальных пользователей Chrome, и именно их Google использует для оценки качества работы страницы. У нового сайта полевых данных может пока не быть.
Как исправить медленный LCP
Самым большим элементом обычно становится главное изображение или заголовок. Начните с изображения:
- Сожмите его и измените размер до того, в котором оно отображается, и используйте WebP или AVIF.
- Никогда не включайте отложенную загрузку для главного изображения и сообщите браузеру, что оно важно:
<img src="hero.webp" width="1200" height="630" fetchpriority="high" alt="...">- Проверьте, что сервер отвечает быстро. Медленный хостинг задерживает всё остальное, поэтому используйте CDN и кэшируйте HTML там, где это возможно.
- Включите сжатие и проверьте его с помощью Теста сжатия сайта.
Как исправить медленный INP
INP плохой, когда JavaScript постоянно загружает браузер, и нажатия и касания приходится ждать. Частая причина — сторонние скрипты, например виджеты чатов и трекеры.
- Удалите ненужные скрипты, а остальные загружайте с атрибутом
defer. - Откладывайте тяжёлые задачи до завершения загрузки страницы или до момента, когда они действительно понадобятся.
- Разбивайте длинные задачи на более мелкие части, чтобы браузер мог реагировать между ними.
Как исправить высокий CLS
Контент смещается, когда что-то загружается с опозданием и выталкивает остальное вниз.
- Задайте каждому изображению и видео атрибуты
widthиheight. - Зарезервируйте место для рекламы и встраиваемых элементов с помощью фиксированной минимальной высоты.
- Не добавляйте баннеры над контентом, который уже загрузился.
С чего начать
Сначала исправьте самые посещаемые шаблоны: главную страницу, страницу товара и шаблон записи блога. Обычно они покрывают большую часть сайта. Меняйте одну вещь за раз и тестируйте снова, чтобы понимать, что именно помогло.
