Как улучшить LCP без случайной оптимизации всего сайта

Откройте Lighthouse или DevTools Performance и определите, что стало LCP: изображение hero, заголовок, фон или другой крупный блок. На разных viewport и шаблонах элемент может отличаться.

Разделите время на TTFB, задержку обнаружения ресурса, длительность загрузки и задержку отрисовки. Без этого легко сжать картинку, когда основная проблема — медленный HTML или поздняя вставка элемента JavaScript.

Если HTML приходит поздно, начните с backend: кеш страницы, база данных, PHP/Node workers, внешние API и география origin. CDN помогает только там, где ответ можно корректно кешировать.

LCP-ресурс должен быть обнаружим в исходном HTML. Не лениво загружайте hero-изображение, задайте fetchpriority="high" там, где оно действительно главное, и используйте preload только для доказанного критичного ресурса.

Отдавайте изображение в размере, близком к отображаемому, с современным форматом и корректными srcset/sizes. Слишком большое изображение тратит сеть, слишком маленькое ухудшает качество.

Критический CSS должен позволить отрисовать первый экран, а тяжёлые стили и скрипты не должны блокировать его без необходимости. Шрифты требуют разумного subset, preload только используемых начертаний и стратегии fallback.

Сделайте несколько одинаковых лабораторных запусков до и после. Смотрите не только LCP, но и побочные эффекты: CLS, качество изображения, загрузку сети и функциональность.

Затем дождитесь полевой динамики CrUX. Если lab улучшился, а field нет, проверьте другие шаблоны, устройства, consent-баннер и реальные пользовательские маршруты.