Наибольшая отрисовка контента (LCP) — это одна из метрик, отслеживаемых в разделе «Производительность» отчета Lighthouse. Каждая метрика отражает определенный аспект скорости загрузки страницы.
Маяк отображает LCP за считанные секунды:
Что измеряет LCP
LCP измеряет, когда самый большой элемент контента в области просмотра отображается на экране. Это примерно соответствует тому моменту, когда основное содержимое страницы видно пользователям. Дополнительные сведения о том, как определяется LCP, см. в разделе «Определение наибольшего содержимого» .
Как Lighthouse определяет ваш балл LCP
Lighthouse извлекает данные LCP из инструмента трассировки Chrome .
В таблице ниже показано, как интерпретировать ваш показатель LCP:
| время ЛКП (в секундах) | Цветовое кодирование |
|---|---|
| 0-2,5 | Зеленый (быстро) |
| 2,5-4 | Оранжевый (умеренный) |
| Более 4 | Красный (медленный) |
Как улучшить свой показатель LCP
Если LCP — это изображение, время можно разбить на четыре фазы. Знание того, какие этапы занимают больше всего времени, поможет вам оптимизировать LCP . Lighthouse отобразит элемент LCP вместе с разбивкой по фазам в диагностике «Самый большой элемент Contentful Paint».
| Фаза LCP | Описание |
|---|---|
| Время до первого байта (TTFB) | Время с момента, когда пользователь начинает загрузку страницы, до момента получения браузером первого байта ответа HTML-документа. Узнайте больше о TTFB . |
| Задержка загрузки | Разница между TTFB и моментом, когда браузер начинает загрузку ресурса LCP. |
| Время загрузки | Время, необходимое для загрузки самого ресурса LCP. |
| Задержка рендеринга | Разница между моментом завершения загрузки ресурса LCP и полной визуализацией элемента LCP. |