Как оптимизировать LCP-изображение в Elementor и ускорить первый экран

Что такое LCP-изображение и почему оно важно

LCP — это метрика Core Web Vitals, которая показывает, когда пользователь увидел крупнейший контентный элемент в верхней части страницы. Им может быть не только изображение, но и крупный заголовок, видео или блок с фоновым изображением. На страницах Elementor LCP-элементом чаще всего становится hero-изображение или большая картинка в Image Widget.

Браузер не всегда загружает такую картинку первой. Если для неё включён lazy loading, запрос может быть отложен до момента, когда браузер решит, что изображение приближается к области просмотра. Для изображения, которое уже видно при открытии страницы, это создаёт лишнюю задержку.

При этом не каждое большое изображение нужно принудительно загружать с высоким приоритетом. Задача заключается в том, чтобы определить один главный элемент первого экрана и оптимизировать именно его.

• LCP-изображение должно быть видно без прокрутки.
• Изображение должно загружаться без lazy loading.
• Для него уместно использовать высокий приоритет запроса.
• Файл должен быть достаточно качественным, но не больше, чем необходимо для фактического отображения.

Как определить, какое изображение является LCP

Не стоит оптимизировать изображения наугад. Откройте страницу в режиме инкогнито или используйте инструменты разработчика браузера, затем проверьте её с помощью Lighthouse или PageSpeed Insights. В отчёте обычно можно увидеть, какой элемент определён как Largest Contentful Paint.

Для дополнительной проверки откройте вкладку Network в DevTools, перезагрузите страницу и найдите запрос к hero-изображению. Обратите внимание, когда он начинается, какой файл фактически загружается и не ожидает ли он завершения других ресурсов.

Проверяйте страницу отдельно на мобильном устройстве и на компьютере. На мобильном LCP-элементом может оказаться другая картинка, другая адаптивная версия изображения или даже заголовок вместо десктопного баннера.

• Убедитесь, что LCP-элемент действительно является изображением.
• Проверьте, является ли он тегом img, а не background-image в CSS.
• Убедитесь, что на мобильном устройстве сначала не загружается слишком большая десктопная версия.
• После изменений очищайте кеш, иначе отчёт может показывать старую версию страницы.

Подготовьте правильный файл изображения

Формат и размер файла напрямую влияют на время загрузки. Для большинства фотографий и сложных иллюстраций стоит рассмотреть WebP или AVIF. Обычно они дают файл меньшего размера, чем JPEG или PNG, при сопоставимом визуальном качестве.

Сам по себе формат не решит проблему, если исходное изображение имеет чрезмерные размеры. Например, нет смысла загружать картинку шириной в несколько тысяч пикселей, если в hero-блоке она отображается значительно меньше. Подготовьте версию, которая соответствует реальному размеру контейнера и плотности экрана.

Для фотографий обычно подходит WebP или AVIF с контролируемым уровнем сжатия. PNG лучше использовать для прозрачных изображений, логотипов или графики, где важна чёткость мелких элементов. После конвертации обязательно проверьте, не появились ли артефакты на текстурах и контрастных участках.

• Не загружайте оригинал с фотокамеры без оптимизации.
• Не увеличивайте маленькое изображение с помощью CSS — это ухудшает качество и не ускоряет загрузку.
• Проверьте, не создаёт ли плагин оптимизации несколько дублирующих версий одного файла.
• Для адаптивности используйте корректные размеры изображений WordPress, а не одну слишком большую картинку для всех экранов.

Как настроить Image Widget в Elementor

Откройте страницу в Elementor и выберите Image Widget, содержащий главное изображение первого экрана. Убедитесь, что это именно тот элемент, который был определён при проверке LCP, а не просто самая большая картинка на странице.

В настройках изображения выберите оптимизированный файл WebP или AVIF, если такая версия доступна и корректно поддерживается вашей конфигурацией. Если формат автоматически создаётся плагином оптимизации, проверьте HTML страницы: важно, какой файл получает браузер, а не только какое имя отображается в медиатеке.

Для hero-изображения отключите lazy loading. В разных версиях Elementor, WordPress и плагинов оптимизации названия и расположение соответствующих параметров могут отличаться. Если отдельного переключателя в Elementor нет, проверьте, не добавляется ли атрибут loading автоматически WordPress или сторонним плагином.

В разделе Advanced → Attributes можно добавить атрибуты для ключевого изображения. В полях пользовательских атрибутов Elementor обычно используется формат «название|значение», каждый атрибут указывается с новой строки.

• loading|eager
• fetchpriority|high

loading|eager
fetchpriority|high

Что проверить после добавления атрибутов

Сохраните изменения, очистите кеш Elementor, кеш страницы и кеш CDN, если он используется. Затем откройте исходный HTML или инспектор элементов и убедитесь, что атрибуты добавлены именно к тегу img.

Иногда плагин оптимизации изменяет или удаляет атрибуты при формировании финального HTML. Если в коде остался loading="lazy", настройка Elementor сработала не полностью. В этом случае проверьте конфликт с кешированием, оптимизацией изображений или функциями WordPress.

• В финальном коде должно быть loading="eager", а не только настройка в редакторе.
• fetchpriority="high" должен относиться именно к LCP-изображению.
• Не добавляйте эти атрибуты ко всем Image Widget на странице.

Укажите width и height, чтобы избежать скачков макета

Желательно, чтобы браузер знал размеры изображения ещё до его загрузки. Атрибуты width и height помогают зарезервировать нужное место в макете и уменьшают риск смещения контента после появления картинки. Это влияет не только на стабильность страницы, но и на восприятие её скорости.

В WordPress размеры часто добавляются автоматически, но их нужно проверить в финальном HTML. Если изображение вставлено через фоновый стиль секции или контейнера, width и height могут отсутствовать, поскольку это уже не обычный тег img.

Не подменяйте реальные пропорции произвольными значениями. Соотношение ширины и высоты в HTML, CSS и самом файле должно быть согласовано, иначе изображение может непредсказуемо растягиваться или обрезаться.

• Проверьте наличие width и height в финальном теге img.
• Сохраняйте естественное соотношение сторон изображения.
• Для адаптивного отображения используйте CSS вроде max-width: 100%; height: auto;.
• Не задавайте фиксированную высоту, если дизайн предполагает другое соотношение сторон на мобильных устройствах.

Если hero-изображение установлено как фон секции

Фоновое изображение CSS не является тегом img, поэтому к нему нельзя напрямую применить loading="eager" или fetchpriority="high" через Attributes в Image Widget. Если именно фон определён как LCP-элемент, задержка может быть связана с CSS, стилями, ресурсами, блокирующими отрисовку, или поздней загрузкой файла.

Когда изображение является важной частью контента, часто практичнее использовать обычный Image Widget или другой HTML-элемент img. Это даёт браузеру больше информации о ресурсе и упрощает работу с адаптивными версиями и атрибутами.

Если дизайн требует именно background-image, не добавляйте preload без анализа. Предварительная загрузка имеет смысл только для ресурса, который точно нужен сразу; неправильный preload может создать лишний запрос или конкурировать с CSS, шрифтами и другими критически важными ресурсами.

• Сначала определите, действительно ли background-image является LCP-элементом.
• Не загружайте один и тот же файл одновременно как фон и как img.
• Проверьте мобильный фон: возможно, браузер загружает ненужную десктопную версию.
• Используйте preload только после проверки waterfall и рекомендаций конкретного отчёта.

Типичные ошибки при оптимизации LCP

Самая распространённая ошибка — включить eager loading и высокий приоритет для всех изображений. Браузер начинает загружать множество ресурсов одновременно, из-за чего критическое изображение может не получить реального преимущества. Для большинства картинок ниже первого экрана lazy loading, наоборот, является правильным решением.

Другая проблема — оценивать результат только по размеру файла. LCP может оставаться медленным из-за времени ответа сервера, блокирующих CSS и JavaScript, медленного CDN, неэффективной работы кеша или позднего формирования HTML. Оптимизация изображения важна, но не всегда является единственной причиной.

Также не стоит полагаться только на оценку в редакторе Elementor. Проверяйте опубликованную страницу после очистки кеша и просматривайте фактический HTML и сетевые запросы.

• Не используйте eager loading для каждой картинки.
• Не оставляйте огромный PNG только потому, что он выглядит качественнее.
• Не тестируйте страницу только из авторизованного аккаунта, где кеш может работать иначе.
• Не делайте выводы по одному локальному тесту — сравнивайте несколько запусков и разные типы устройств.
• После изменений проверяйте не только LCP, но и CLS, а также общий вид страницы.