LCP показывает момент появления крупнейшего значимого элемента первого экрана. Часто это hero-изображение, заголовок или баннер товара.
Оптимизировать нужно цепочку конкретного LCP: HTML → обнаружение ресурса → загрузка → отрисовка.
Как проявляется проблема
- LCP-картинка грузится поздно
- TTFB занимает большую часть времени
- hero в CSS background
- слишком большой исходник
- слайдер ухудшил LCP
Основные причины
1. Медленный TTFB
Браузер поздно получает HTML.
2. Ресурс скрыт в CSS/JS
Фоновое изображение обнаруживается позже обычного img.
3. Ошибочный lazy-load
Картинка первого экрана ждёт IntersectionObserver.
4. Большой файл
Исходник значительно больше реального размера блока.
5. Конкуренция preload
Слишком много приоритетных ресурсов делят сеть.
Пошаговая диагностика
Шаг 1. Найти LCP element
Используйте Lighthouse или Performance.
Шаг 2. Разложить время
Смотрите TTFB, load delay, load duration и render delay.
Шаг 3. Проверить waterfall
LCP должен стартовать рано.
Шаг 4. Проверить srcset
Размер изображения должен соответствовать viewport.
Шаг 5. Тестировать холодный кеш
Повторный запуск может скрыть реальные задержки.
Как исправить
Не lazy-load LCP
Главное изображение первого экрана должно грузиться сразу.
Использовать fetchpriority осознанно
high ставится только на действительно важный ресурс.
Ускорить HTML
Серверный кеш и backend-оптимизация уменьшают задержку обнаружения.
Сократить блокирующий CSS
Не загружайте стили компонентов, которых нет на странице.
Что важно не делать
- Не меняйте сразу несколько настроек: после каждого действия проверяйте результат.
- Перед правками файлов и базы сделайте резервную копию.
- Не отключайте защиту, кеш или обновления навсегда только ради временного обхода ошибки.
- На интернет-магазине проверяйте решение не только под администратором, но и как обычный посетитель.
Когда нужна помощь разработчика
Если проблема повторяется, затрагивает продажи, заявки или индексацию, сохраните время ошибки и журналы сервера. Это позволяет найти первопричину вместо временного обхода.
Нужна диагностика? Можно обратиться за ускорением WordPress.
Связанные статьи
Часто задаваемые вопросы
Какой LCP хороший?
Обычно ориентируются на примерно 2,5 секунды на 75-м процентиле.
Почему LCP — текст?
Если заголовок визуально крупнее или картинка ещё не отрисована, браузер может выбрать текст.
Hero лучше img или background?
Для LCP img/picture обычно проще адаптивно загрузить и приоритизировать.