Быстрая страница: что измерять первым

Разделите три вида проблем

LCP оценивает появление крупнейшего видимого элемента, INP — задержку реакции на взаимодействия, CLS — неожиданные сдвиги макета. Это разные задачи. Уменьшение изображения не обязательно исправит долгий обработчик клика.

Измерения реальных посещений и лабораторный тест дополняют друг друга. Один запуск Lighthouse полезен для диагностики, но не показывает опыт всей аудитории. Сравнивайте одинаковые условия и сохраняйте результат до изменения.

Сначала изображения и размеры

Задавайте изображениям реальные width и height, чтобы браузер мог заранее оставить место. Для изображения ниже первого экрана часто подходит loading="lazy". Главное изображение первого экрана не стоит автоматически делать ленивым.

<img src="/images/example.webp"
     width="960" height="640"
     alt="Сетка карточек на узком экране"
     loading="lazy" decoding="async">

Изменяйте по одной причине

Откройте Network и Performance в инструментах разработчика. Посмотрите на размер ресурсов, время ответа сервера и длительные задачи главного потока. Удаление неиспользуемого скрипта иногда полезнее, чем дополнительная настройка сборщика.

После исправления повторите измерение. Также проверьте функциональность: агрессивная отсрочка скриптов не должна ломать меню, форму или навигацию. Зафиксируйте, что изменилось и при каких условиях это было измерено.