Пошаговое руководство по анализу LCP и выявлению ключевых областей для улучшения.
Опубликовано: 30 апреля 2020 г., Последнее обновление: 31 марта 2025 г.
Самая большая отрисовка контента (LCP) — одна из трёх метрик Core Web Vitals , которая показывает скорость загрузки основного контента веб-страницы. В частности, LCP измеряет время с момента начала загрузки страницы пользователем до момента отображения в области просмотра самого большого изображения или текстового блока.
Чтобы обеспечить пользователям хороший опыт, сайты должны стремиться к тому, чтобы показатель LCP составлял 2,5 секунды или меньше как минимум для 75% посещений страниц.
На скорость загрузки и отображения веб-страницы браузером может влиять ряд факторов, и задержки, связанные с любым из них, могут оказать существенное влияние на LCP.
Редко бывает, что быстрое исправление одной части страницы приводит к значительному улучшению LCP. Чтобы улучшить LCP, необходимо проанализировать весь процесс загрузки и убедиться, что каждый его этап оптимизирован.
Понимание вашей метрики LCP
Прежде чем оптимизировать LCP, разработчикам следует попытаться понять, есть ли у них вообще проблемы с LCP, а также масштабы этих проблем.
LCP можно измерить с помощью ряда инструментов, и не все они измеряют его одинаково. Чтобы понять, с чем сталкиваются реальные пользователи, следует обращать внимание на то, что они испытывают, а не на то, что показывает лабораторный инструмент, такой как Lighthouse или локальное тестирование. Эти лабораторные инструменты могут предоставить обширную информацию для объяснения и помощи в улучшении LCP, но имейте в виду, что лабораторные тесты сами по себе могут не полностью отражать реальный опыт ваших пользователей.
Данные LCP, основанные на реальных пользователях, можно получить с помощью инструментов Real User Monitoring (RUM), установленных на сайте, или с помощью отчета об опыте использования Chrome (CrUX), который собирает анонимные данные от реальных пользователей Chrome для миллионов веб-сайтов.
Использование данных Chrome DevTools CrUX LCP
Панель «Производительность» в Chrome DevTools показывает ваш локальный опыт LCP рядом со страницей или исходным LCP CrUX в представлении текущих показателей , а также в разделе « Аналитика » трассировки производительности, включая разбивку времени подчастей LCP (мы вскоре объясним это).