Что измеряет LCP
LCP — время, за которое на экране появляется самый крупный видимый элемент: обычно главное изображение, видео-обложка или большой блок текста. Именно с этого момента пользователь чувствует, что страница загрузилась. Хорошим считается результат до 2,5 секунды.
Из чего оно складывается
Главные причины медленного LCP
| Часть | Типичная проблема | Что сделать |
|---|---|---|
| Ответ сервера | Медленная генерация страницы, цепочка редиректов | Кеширование, ускорение сервера, один редирект — см. время до первого байта |
| Обнаружение ресурса | Главное изображение подключается скриптом или фоном в CSS | Выводить изображение в HTML обычным тегом |
| Загрузка ресурса | Слишком тяжёлое изображение | Уменьшить размер и формат — см. оптимизацию изображений |
| Отрисовка | Блокирующие стили и скрипты в начале страницы | Отложить второстепенные ресурсы, выделить критические стили |
Практические приёмы
- Не откладывайте загрузку главного изображения: атрибут ленивой загрузки для него вреден.
- Подскажите браузеру о важности изображения приоритетом загрузки, чтобы оно начало скачиваться раньше.
- Отдавайте изображение в подходящем размере для устройства, а не оригинал.
- Используйте сеть доставки содержимого для уменьшения расстояния до пользователя.
<img src="/img/hero.webp" width="1200" height="600"
fetchpriority="high" alt="Диван «Альфа» в гостиной">Как найти проблемный элемент
- Запустите лабораторный тест страницы: он покажет, какой именно элемент считается LCP.
- Определите, какая из четырёх частей занимает больше всего времени.
- Исправьте именно эту часть и повторите тест.
Частая ошибка: оптимизировать изображение, когда проблема в медленном ответе сервера. Сначала выясните, на какую часть уходит время. Общий разбор метрик — в статье про Core Web Vitals.
Чем отличаются типичные страницы
| Страница | Обычный элемент LCP | На что смотреть в первую очередь |
|---|---|---|
| Главная | Баннер или главное изображение | Размер и приоритет загрузки баннера |
| Категория | Первое изображение товара или баннер раздела | Скорость ответа сервера и изображения |
| Карточка товара | Главное фото товара | Формат, размер и отсутствие ленивой загрузки |
| Статья | Обложка или заголовок с текстом | Шрифты и блокирующие стили |
Пример анализа
- Лабораторный тест показывает LCP 4,2 секунды для карточки товара.
- Разбор по частям: ответ сервера — 0,4 с, загрузка изображения — 2,6 с.
- Вывод: главное фото слишком тяжёлое. Меняем формат и размер.
- Повторный тест: LCP снижается — значит, причина найдена верно.
Частые вопросы
Что считается элементом LCP?
Самый крупный видимый элемент первого экрана: чаще всего главное изображение, обложка видео или большой блок текста.
Нужно ли откладывать загрузку главного изображения?
Нет: ленивая загрузка для главного изображения вредна, его наоборот стоит загружать с повышенным приоритетом.
Как понять, что именно тормозит LCP?
Запустить лабораторный тест и определить, какая из четырёх частей — ответ сервера, обнаружение, загрузка или отрисовка — занимает больше всего времени.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.