Мало уметь писать код. Нужно уметь оценивать качество его работы. Поэтому решил детально разобраться и написать серию постов о Core Web Vitals. Начну с LCP.

Largest Contentful Paint (LCP) - скорость загрузки самого большого видимого элемента на странице (изображение, видео, крупный заголовок). Нормально за 2,5 секунды. Чем быстрее тем лучше!

👉 Замер LCP начинается с момента начала навигации (Navigation Start). Этот момент наступает каждый раз когда запускается процесс перехода на новый URL или на якорь в пределах текущей страницы (ввод URL в адресную строку, Нажатие кнопок "Назад"/"Вперед", Клик по закладке, JavaScript-навигации, обновление страницы F5).

👉 Измерение заканчивается при выполнении одного из сценариев: - Пользователь начал взаимодействовать со страницей (tap, click, scroll, key press и т.д.). - Проходит достаточно времени после начала навигации (обычно браузер перестаёт вычислять LCP через несколько секунд после того, как основная загрузка завершилась). - Пользователь перешёл на другой  URL.

👉 Размер элемента (<img>, <svg>, <video>, <p>, <h1>, <div>) рассчитывается как произведении высоты и ширины в px и только той части которая попадает в область видимости . У <p>, <h1>, <div> площадь прямоугольника не учитывает внутренние и внешние отступы и рамку.

О способах замера речь пойдёт дальше!

Источники: - https://web.dev/articles/lcp?sjid=15549909702458160740-AP&hl=ru - https://w3c.github.io/largest-contentful-paint/