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 для статики
Для видео как LCP-элемента рекомендую заменить авто-воспроизведение на постер с кнопкой play - это снизит начальный вес страницы. Используйте <video preload="metadata"> вместо auto, а для превью - сжатый thumbnail в WebP. Если LCP - текстовый блок, проверьте загрузку шрифтов: подключите WOFF2 с font-display: swap, избегайте кастомных шрифтов для заголовков. Инструменты: в Chrome DevTools смотрите вкладку «Performance» для анализа водопада загрузок, а Squoosh.app - для сжатия изображений без потерь. Важный нюанс: preload для LCP-изображения должен стоять в первых 1-2 КБ HTML, иначе браузер может его пропустить.
Для динамических сайтов (React, Vue) используйте SSR или hydration-on-scroll, чтобы основной контент рендерился без ожидания JS. Проверьте TTFB сервера: если выше 500 мс, настройте кеширование через CDN (Cloudflare, Varnish). Мой чек-лист: после каждой оптимизации перезамеряйте LCP в поле с помощью CrUX Dashboard - лабораторные данные (PageSpeed) иногда расходятся с реальными пользовательскими метриками. Если элемент «прыгает» (например, из-за поздней загрузки стилей), добавьте резервный фон через background-color в CSS.