LCP больше 2.5 секунд

Симптом

• В PageSpeed Insights / Lighthouse: LCP > 2.5s (хороший — < 2.5s, средний — 2.5–4.0, плохой — > 4.0).
• Google Search Console → Core Web Vitals → отчёт «Требуется улучшение».
• Пользователь видит белый экран дольше 2.5 секунд.

Причина

LCP — обычно одно из:

1. Большое изображение в первом экране (hero-картинка не оптимизирована).
2. Медленный TTFB — сервер тормозит на стартовом ответе.
3. Render-blocking resources — большие CSS/JS блокируют отрисовку.
4. Шрифты грузятся синхронно — браузер ждёт .woff2.
5. Первый контент рендерится JavaScript’ом — нет SSR.

Как проверить

1. PageSpeed Insights — там сразу пишут, какой именно элемент LCP.
2. Chrome DevTools → Performance → запись + перезагрузка страницы. В таймлайне видно момент LCP с пометкой.
3. CrUX — реальные данные пользователей за 28 дней.

Решение

Изображение в hero

<!-- preload главной картинки -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

<!-- responsive picture -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="..." width="1200" height="600" fetchpriority="high">
</picture>

• Формат AVIF/WebP вместо JPEG (-50% размер).
• Размер под viewport — не грузить 4К на мобайл.
• Атрибуты width/height — браузер сразу резервирует место (даёт +CLS).

Медленный TTFB (см. отдельную статью)

См. TTFB > 800мс.

Render-blocking CSS/JS

<!-- загружать критичный CSS inline в head -->
<style>/* первые 14кб критичного CSS */</style>

<!-- остальное — асинхронно -->
<link rel="stylesheet" href="all.css" media="print" onload="this.media='all'">

<!-- JS — defer/async -->
<script src="app.js" defer></script>

Шрифты

<link rel="preload" as="font" href="/fonts/inter-variable.woff2"
      type="font/woff2" crossorigin>

В CSS — font-display: swap чтобы текст показывался даже без шрифта.

JS-rendered content

Если первый контент собирается React/Vue без SSR — рассмотреть переход на Next.js / Nuxt / Astro с server-side rendering.

Связанные

• TTFB > 800мс: оптимизация сервера
• CLS: смещение макета при загрузке