LCP больше 2.5 секунд: как ускорить главное изображение

Largest Contentful Paint — главная метрика скорости. Сжимаем картинки, preload, CDN.

Симптом

LCP (Largest Contentful Paint) превышает 2,5 с.
На Lighthouse/Pagespeed Insights виден высокий показатель «Main‑thread work» до отрисовки изображения.
Пользователи жалуются, что сайт «залипает» и контент появляется медленно.
В отчёте указано, что главный контент – это изображение (hero‑баннер, фоновое фото и т.п.).
В сети виден большой «тайм‑ту‑флайт» (TTFB) для этого файла.

Большой размер изображения – не сжатое, не оптимизированное, слишком высокое разрешение.
Отсутствие preload/prefetch – браузер начинает загрузку только после начала рендеринга, а не сразу.
Недостаточная кеш‑политика – сервер отдаёт изображение без заголовков Cache‑Control, ETag, Expires.
Сжатие без image/webp/image/avif – современные форматы дают 30‑50 % меньше размера.
Неправильный порядок загрузки – скрипты и стили блокируют рендеринг до загрузки изображения.
CDN не используется – запрос идёт к исходному серверу, а не к ближайшему дата‑центру.

Шаг	Инструмент	Что искать
1	Lighthouse (Chrome DevTools)	В разделе «Largest Contentful Paint» указано конкретное изображение и время.
2	Network tab	Размер файла, MIME‑тип, заголовки `Cache‑Control`, `ETag`.
3	WebPageTest	Показатель «Start Render» и «First Paint» для изображения.
4	`curl -I https://example.com/hero.jpg`	Проверить наличие `Cache‑Control`, `Expires`, `ETag`.
5	`https://imagecompressor.com/`	Сравнить оригинал и сжатый вариант.
6	`https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link`	Наличие `<link rel="preload">` для изображения.

Оптимизировать изображение
bash # Установить ImageMagick sudo apt-get install imagemagick # Сжать JPEG до 80 % качества convert hero.jpg -quality 80 hero-optimized.jpg # Конвертировать в WebP cwebp -q 80 hero.jpg -o hero.webp Выбирайте WebP/AVIF, если поддержка браузера достаточна.
Добавить preload
html <link rel="preload" as="image" href="/images/hero.webp" type="image/webp"> Разместите в <head> до других ресурсов.
Установить кеш‑политику
В конфигурации сервера (Nginx) добавьте: nginx location ~* \.(?:jpg|jpeg|png|webp|avif)$ { expires 30d; add_header Cache-Control "public, max-age=2592000, immutable"; }
Использовать CDN
Перенесите изображения в облачный CDN (Cloudflare, Fastly, Akamai).
В настройках CDN включите: - Авто‑конвертацию в WebP/AVIF.
- Кеширование на уровне edge‑серверов.
Lazy‑load для остальных изображений
```html

```

Проверить порядок загрузки
Убедитесь, что критические стили и скрипты загружаются асинхронно (<script async> / <link rel="preload">).
```html

```

Проверить результат
- Запустите Lighthouse снова, убедитесь, что LCP < 2,5 с.
- Проверьте Network tab: размер изображения должен быть уменьшен, заголовки кеша присутствуют.
- На WebPageTest убедитесь, что «Start Render» пришёл раньше.