LCP: большие визуальные эффекты

Фокус LCP при оптимизации изображений

На многих сайтах элементом LCP обычно является основное изображение (главное изображение). Если это изображение загружается поздно, это означает, что ваш сайт работает медленно в глазах Google. Улучшение оценки LCP напрямую влияет как на удобство пользователя, так и на ваш рейтинг в поиске.

Стратегии улучшения LCP

• Предварительная загрузка: Заранее объявите основное изображение LCP в браузере с помощью .
• Современные форматы: Сэкономьте 50–70 % без потери качества, используя WebP или AVIF вместо JPG.
• Адаптивные изображения. Прекратите отправку огромных изображений с рабочего стола мобильным пользователям с помощью srcset и sizes.
• Использование CDN: Уменьшите задержку, вызванную физическим расстоянием, путем подачи изображений с пограничных серверов.

Функция приоритета выборки

Вы можете добавить атрибут fetchpriority="high", который поставляется с HTML5, к изображениям LCP, чтобы браузер отдавал приоритет этому ресурсу. Эта функция поддерживается в версиях Chrome 101+.

Внимание при отложенной загрузке

Никогда не добавляйте loading="lazy" в образ LCP! Это задержит загрузку изображения, что ухудшит ваш показатель LCP. Отложенную загрузку следует использовать только для изображений, расположенных ниже сгиба.