Як оптимізувати 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-елементом може стати інша картинка, інша версія responsive-зображення або навіть заголовок замість десктопного банера.

• Переконайтеся, що 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 та загальний вигляд сторінки.