Скорость сайта: изображения, JavaScript и Core Web Vitals

Core Web Vitals описывают разные стороны опыта: LCP — появление основного крупного содержимого, INP — отзывчивость взаимодействия, CLS — неожиданные сдвиги. Ориентиры хорошего опыта: LCP до 2,5 секунды, INP до 200 мс и CLS до 0,1, с оценкой на 75-м процентиле.

Лабораторная проверка помогает воспроизводить проблему, полевые данные показывают опыт посетителей. Один быстрый запуск на рабочем компьютере не описывает весь сайт и все устройства.

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

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

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

Проверьте сторонние скрипты, повторные запросы и работу вне экрана. Для анимации сравните сценарий с эффектом и без него на обычном устройстве.

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

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