Почему LCP важен
Largest Contentful Paint (LCP) — воспринимаемое время загрузки страницы. Google считает хорошим LCP менее 2,5 секунды. Медленный LCP — главная причина низких оценок Page Experience.
Основные причины медленного LCP
1. Медленное время ответа сервера (TTFB)
Если сервер отвечает медленно — всё остальное не имеет значения. Цель: TTFB менее 800 мс. Решения: CDN, серверный кэш, оптимизация базы данных, Edge Computing.
2. Медленная загрузка изображений
Изображения — самый частый LCP-элемент. Оптимизация:
- Конвертация в WebP/AVIF (30-50% меньше размер)
- Атрибут fetchpriority="high" для LCP-изображения
- Preload через
<link rel="preload"> - Правильные srcset и sizes для адаптивных изображений
3. Блокирующие рендеринг CSS и JavaScript
Синхронный JS блокирует отображение страницы. Решения: defer/async для JS, Critical CSS inline, удаление неиспользуемых стилей.
4. Медленные сторонние скрипты
Аналитика, чат-боты, рекламные сети замедляют LCP. Используйте facade-паттерн: загружайте сторонние виджеты только после взаимодействия пользователя.
Чек-лист оптимизации LCP
- Включить HTTP/2 или HTTP/3
- Настроить CDN для статических ресурсов
- Добавить fetchpriority="high" к герою-изображению
- Включить сжатие Gzip/Brotli
- Активировать кэш браузера (Cache-Control)
- Удалить неиспользуемый JavaScript