LCP — метрика, которую чаще всего пытаются улучшить и чаще всего улучшают не там. Сжимают все картинки сайта, подключают кэш, меняют хостинг, а показатель стоит на месте, потому что проблема была в шрифте или в скрипте, который блокировал отрисовку. Разбираем, как найти настоящую причину и в каком порядке за неё браться.
Коротко
- Сначала найдите элемент, который определяет LCP: часто это не то, что вы думаете.
- LCP складывается из четырёх частей — правьте самую большую, а не все подряд.
- Изображению первого экрана нужен приоритет загрузки, а не ленивая подгрузка.
- Целевое значение — 2,5 секунды по полевым данным, а не по одному замеру.
Шаг первый: найти элемент LCP
До любых правок нужно узнать, какой именно элемент страницы считается самым крупным. Инструменты измерения показывают это прямо: в PageSpeed Insights есть отдельная строка, в инструментах разработчика элемент подсвечивается.
Результат часто неожиданный. Оптимизируют баннер в шапке, а LCP определяет текстовый блок ниже или фоновое изображение секции. Правки при этом не дают ничего.
Элемент может отличаться на мобильных и десктопе. На узком экране в первый экран попадает другое содержимое, и LCP определяет другой элемент. Проверяйте оба варианта: мобильные данные обычно важнее, потому что там и трафика больше, и условия хуже.
Из чего складывается LCP
Время до появления главного элемента делится на четыре отрезка. Понимание, какой из них длиннее, экономит недели бессмысленной работы.
| Часть | Что происходит | Куда смотреть |
|---|---|---|
| Ответ сервера | От запроса до первого байта | Хостинг, кэш, база данных |
| Задержка загрузки ресурса | Браузер узнал об элементе не сразу | Приоритеты, предзагрузка |
| Загрузка ресурса | Скачивание картинки или шрифта | Вес файла, формат, CDN |
| Задержка отрисовки | Файл получен, но не показан | Блокирующие скрипты и стили |
Практическое правило: беритесь за ту часть, которая занимает больше половины времени. Если ответ сервера — полторы секунды из двух, оптимизация картинок ничего не изменит.
Ответ сервера
Включите кэширование страниц
Самая результативная мера для сайтов на CMS. Готовая страница отдаётся без обращения к базе.
Проверьте тяжёлые запросы к базе
Один неоптимальный запрос легко съедает секунду. На сайтах с каталогом это частая причина.
Обновите версию языка и окружения
Устаревшие версии работают заметно медленнее современных при той же логике.
Оцените хостинг
Если сервер отвечает медленно при пустом кэше и лёгкой странице, дело может быть в тарифе или в соседях по серверу.
Подключите CDN
Особенно если аудитория распределена по стране: расстояние до сервера влияет ощутимо.
Если LCP — изображение
Самый частый случай, и самый благодарный для оптимизации.
- Уберите ленивую загрузку с этого изображения. Главная ошибка: атрибут
loading="lazy"на картинке первого экрана откладывает именно то, что нужно показать первым. - Задайте высокий приоритет. Атрибут
fetchpriority="high"подсказывает браузеру загрузить её раньше остального. - Сожмите и переведите в современный формат. WebP или AVIF обычно дают заметную экономию при том же качестве.
- Отдавайте размер под экран. Мобильному не нужна картинка шириной 2000 пикселей: атрибуты srcset и sizes решают это.
- Проставьте width и height. Это не ускоряет загрузку, но убирает сдвиг макета и заодно улучшает CLS.
- Предзагрузите, если элемент известен заранее. Особенно когда картинка подставляется скриптом или задана фоном в стилях.
Про фоновые изображения. Картинка, заданная фоном в CSS, обнаруживается браузером позже обычной: сначала нужно скачать и разобрать стили. Если элемент LCP — фон, перевод его в обычный тег даёт заметный выигрыш.
Задержка отрисовки
Ситуация, когда ресурс давно загружен, а на экране его нет. Виноваты блокирующие ресурсы: браузер не отрисовывает страницу, пока не обработает все стили и синхронные скрипты в шапке.
Что блокирует
- Синхронные скрипты в head
- Большие файлы стилей целиком
- Шрифты без font-display
- Сторонние виджеты в шапке
Что помогает
- Атрибуты defer и async
- Критические стили внутри страницы
- font-display: swap
- Виджеты после загрузки страницы
Про шрифты. Если текстовый блок является элементом LCP, а шрифт грузится долго, браузер может держать текст невидимым до его загрузки. Свойство font-display со значением swap показывает текст запасным шрифтом сразу — LCP улучшается, хотя визуально шрифт подменится с задержкой.
Как проверять результат
Замерьте до правок
И лабораторные, и полевые значения. Без точки отсчёта спорить будет не с чем.
Вносите по одной правке
Иначе непонятно, что сработало, а что ухудшило.
Проверяйте сразу лабораторным замером
Он покажет эффект немедленно.
Ждите полевые данные
Они накапливаются неделями. Окончательный вывод делается по ним.
Проверьте мобильные отдельно
Там другой элемент LCP, другие условия сети и обычно худшие результаты.
Частые вопросы
Какой LCP считается хорошим?
До 2,5 секунды по полевым данным. Значения до 4 секунд — «требует улучшения», выше — «плохо». Ориентироваться нужно на полевые данные, а не на единичный лабораторный замер.
Почему LCP не улучшается после сжатия картинок?
Скорее всего, элементом LCP является не картинка, а текстовый блок или фон, либо основное время уходит на ответ сервера. Сначала выясните, какой элемент определяет метрику и какая часть времени самая длинная.
Нужно ли убирать lazy loading со всех изображений?
Нет, только с тех, что в первом экране, — и прежде всего с элемента LCP. Для картинок ниже ленивая загрузка полезна: она экономит трафик и ускоряет первую отрисовку.
Через сколько после правок изменится оценка в Search Console?
Полевые данные накапливаются за длительный период, поэтому заметное изменение обычно видно через несколько недель. Лабораторный замер покажет эффект сразу, но это не то, по чему оценивают итог.
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
