Бесплатные руководства по ИИ и веб-разработке · 10 статей · 5 живых демо-проектов

Core Web Vitals простыми словами

Core Web Vitals — три показателя, которыми Google описывает реальное впечатление от страницы: как быстро она загружается, как быстро отвечает и насколько стабильно выглядит.

1. LCP: Largest Contentful Paint

LCP измеряет, сколько времени нужно самому крупному видимому элементу, часто главному изображению или заголовку, чтобы появиться. Хороший результат — 2,5 секунды или меньше. Улучшайте его сжатием изображений, предзагрузкой главного изображения и быстрым хостингом.

2. INP: Interaction to Next Paint

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

3. CLS: Cumulative Layout Shift

CLS измеряет неожиданное смещение содержимого при загрузке. Хороший результат — 0,1 или меньше. Задавайте ширину и высоту изображений и встраиваемых блоков и резервируйте место под рекламу и баннеры.

4. Как измерять

Используйте Google PageSpeed Insights для быстрого отчёта и отчёт Core Web Vitals в Search Console для данных реальных посетителей. Лабораторные тесты и реальные данные могут отличаться.

5. Простой план улучшения

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