Как улучшить LCP сайта
LCP (Largest Contentful Paint) — когда рисуется основной visible элемент (обычно hero image или H1+para). Порог "good" ≤ 2.5s. Типичные LCP-убийцы: тяжёлые hero-images без preload, render-blocking CSS/JS, медленный TTFB origin. Фиксы: preload hero, critical CSS inline, defer non-critical JS, image srcset, Cloudflare cache.
Ниже: пошаговая инструкция, рабочие примеры, типичные ошибки, FAQ.
Пошаговая настройка
- Идентифицируйте LCP element: DevTools → Performance → запись → секция "Largest Contentful Paint"
- Preload hero image:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high"> - Image срезать <= 100KB:
cwebp -q 80 hero.jpg -o hero.webp - Critical CSS инлайн в
<head>(или via Next.js inline-stylesheets) - Defer non-critical JS:
<script defer src="..."> - TTFB снизить: CDN (Cloudflare/Fastly), origin RPC time
- Проверьте через Enterno Speed — LCP field data (CrUX) + lab
Рабочие примеры
| Сценарий | Конфиг |
|---|---|
| Preload hero | <link rel="preload" as="image" href="/hero-desktop.webp" media="(min-width: 1024px)" fetchpriority="high"> |
| Responsive srcset | <img src="hero.webp" srcset="hero-sm.webp 640w, hero-md.webp 1024w, hero-lg.webp 1920w" sizes="100vw" fetchpriority="high"> |
| Critical CSS в head | <style>
/* Above-fold styles — 14KB max */
body { margin: 0; font-family: system-ui; }
.hero { min-height: 50vh; ... }
</style> |
| Defer analytics | <script defer src="https://analytics.example.com/tag.js"></script> |
| nginx Cache-Control immutable | location ~* \.(webp|jpg|css)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
} |
Типичные ошибки
- Preload более 1-2 ресурсов — congestion, ухудшает LCP
- Lazy-load hero image (loading="lazy") — браузер ждёт intersection observer → slow
- Hero image как CSS background — browser не может preload его (не в DOM)
- Font from Google Fonts без font-display: swap — FOIT блокирует text LCP
- TTFB > 600ms — независимо от optimization LCP не будет < 2.5s
Почему нам доверяют
Как это работает
Введите URL страницы
Lighthouse анализирует
Получите CWV и советы
Почему скорость сайта важна?
Скорость загрузки напрямую влияет на конверсию, SEO-позиции и удовлетворённость пользователей. Google использует Core Web Vitals как фактор ранжирования. Каждая лишняясекунда загрузки может стоить до 7% конверсии.
Lighthouse-анализ
Анализ на основе Google Lighthouse: Performance, Accessibility, Best Practices, SEO.
Core Web Vitals
LCP (скорость отрисовки), FID (интерактивность), CLS (визуальная стабильность) — ключевые метрики Google.
Анализ ресурсов
Разбивка по типам: HTML, CSS, JavaScript, изображения, шрифты. Размер, количество запросов, блокирующие ресурсы.
Действенные советы
Конкретные рекомендации с оценкой экономии: сжатие изображений, кеширование, минификация и т.д.
Mobile vs Desktop
- Тестирование на эмуляции Moto G Power (медленный CPU)
- Сеть: 4G (1.6 Mbps, 150ms RTT)
- Строже оценивает скорость
- Google индексирует mobile-first
- Приоритет для SEO-оптимизации
- Высокая производительность CPU
- Быстрое соединение без ограничений
- Результаты обычно выше на 20-40 баллов
- Важен для B2B и корпоративных сайтов
- Используйте для baseline-сравнений
Кому это нужно
SEO-специалисты
Core Web Vitals для ранжирования
Разработчики
оптимизация производительности
Маркетологи
скорость = конверсия
DevOps
регрессия производительности
Частые ошибки
async/defer блокируют отрисовку. Переместите в конец или добавьте атрибут.Cache-Control браузер перезагружает CSS/JS при каждом визите.Лучшие практики
loading="lazy" для изображений ниже first fold.brotli on;Cache-Control: max-age=31536000, immutable. HTML: max-age=0, s-maxage=60.<link rel="preload"> для шрифтов и CSS. Уменьшает LCP на 200-500ms.Получите больше с бесплатным аккаунтом
История проверок скорости, сравнение с конкурентами и мониторинг PageSpeed.
Зарегистрироваться (FREE)Больше по теме
Часто задаваемые вопросы
Что обычно является LCP element?
Статистика: hero image (55%), H1+intro paragraph (30%), hero video (10%), other (5%). Идентифицируйте через DevTools.
Почему mobile LCP в 2× хуже desktop?
Slow mobile networks (LTE-4G), weaker CPU (JS parse), smaller batch sizes. Оптимизация: mobile-first + Responsive images + lazy non-critical.
INP vs LCP — что важнее?
Оба входят в Core Web Vitals. LCP — рендер, INP — responsiveness. Google учитывает оба для ranking.
Как тестировать LCP?
<a href="/speed">Enterno Speed</a> показывает field data из CrUX (real users) + lab data. Plus <a href="/s/research-core-web-vitals-runet-2026">наш CWV benchmark</a>.