Сайт может работать безупречно… и при этом быть неудобным для пользователя.
Изображение появляется слишком поздно, кнопка реагирует медленно, содержимое сдвигается во время загрузки — такие мелочи быстро начинают раздражать.
К счастью, Chrome DevTools позволяет увидеть, что на самом деле происходит за экраном.
Особого внимания заслуживают три показателя:
- CLS - Сдвигается ли содержимое во время загрузки или использования?
- LCP - Быстро ли появляется основной контент?
- INP - Быстро ли сайт реагирует на действия пользователя?
На вкладке Performance можно проанализировать эти показатели и найти элементы, вызывающие замедления или сдвиги макета.
А Lighthouse позволяет получить первоначальную оценку производительности, доступности и SEO.
Отсутствие ошибок ещё не означает, что сайт производителен.
Поэтому отладка нужна не только тогда, когда что-то перестаёт работать. Это полезная привычка на протяжении всей разработки.
А вы проверяете Core Web Vitals во время разработки?