LCP / Largest Contentful Paint

Метрика LCP сообщает время рендеринга самого большого изображения, текстового блока или видео, видимого в окне просмотра, относительно момента первого перехода пользователя на страницу.

Чтобы обеспечить удобство для пользователей, сайты должны стремиться к тому, чтобы время загрузки основного контента составляло 2,5 секунды или меньше. Рекомендуется ориентироваться на значение 75-ти процентного показателя, отдельно рассчитанного для мобильных и десктопных устройств.

При расчёте метрики рассматриваются следующие элементы страницы:

• элементы <img> (время представления первого кадра используется для анимированного контента, такого как GIF или анимированные PNG)
• элементы <image> внутри элемента <svg>
• элементы <video> (используется время загрузки изображения плаката или время презентации первого кадра для видео - в зависимости от того, что наступит раньше)
• элемент с фоновым изображением, загружаемый с помощью функции url()
• блочные элементы, содержащие текстовые узлы или другие дочерние текстовые инлайн элементы.

Помимо учета только некоторых элементов, измерения LCP используют эвристику для исключения определенных элементов, которые пользователи, вероятно, сочтут "неудовлетворительными". Для браузеров на базе Chromium к ним относятся:

• элементы с непрозрачностью 0, невидимые для пользователя;
• элементы, закрывающие всю область просмотра, которые, скорее всего, рассматриваются как фон, а не содержимое;
• изображения-заполнители или другие изображения с низкой энтропией, которые, вероятно, не отражают истинное содержание страницы;

Как прокачать LCP:

• Использование CDN
• Оптимизация серверных настроек
• Выбор надежного хостинг-провайдера
• Использование формата WebP
• Применение lazy loading
• Корректировка реальных размеров изображений
• Асинхронная загрузка скриптов
• Минификация и объединение файлов
• Удаление неиспользуемых ресурсов
• Использование font-display: swap