LCP (Largest Contentful Paint) — время загрузки самого крупного видимого элемента. Норма Google — до 2.5 секунд. Вот конкретные шаги для ускорения.
Определите LCP-элемент
Откройте PageSpeed Insights, найдите раздел «Largest Contentful Paint element». Обычно это:
- Hero-изображение
- Заглавный баннер
- Крупный блок текста (H1 + первый абзац)
- Видео-превью
Оптимизация по типу элемента
Если LCP — изображение:
- Формат WebP/AVIF вместо JPEG/PNG (экономия 30–50%)
- Атрибут
fetchpriority="high"— браузер загрузит первым - Не ставьте
loading="lazy"на LCP-изображение - Preload:
<link rel="preload" as="image" href="hero.webp"> - Задайте width/height — убирает CLS и ускоряет рендер
Если LCP — текст:
- Оптимизируйте шрифты:
font-display: swap, preload для основного шрифта - Инлайните критический CSS в
<head> - Уберите render-blocking JS из
<head>
Серверная оптимизация
- TTFB < 200 мс: кэширование, CDN, HTTP/2 или HTTP/3
- Gzip/Brotli: сжатие HTML, CSS, JS
- Кэширование: Cache-Control с длинным max-age для статики
