Як оптимізувати LCP для hero-зображення в Elementor

Що таке LCP і чому hero-зображення важливе

LCP показує, скільки часу потрібно браузеру, щоб відобразити найбільший видимий елемент у першому екрані. Ним може бути заголовок, текстовий блок, відео або зображення. На сторінках із великим банером найчастіше саме hero-зображення стає таким елементом.

На швидкість LCP впливають не лише розмір файлу. Браузеру потрібно знайти ресурс у HTML або CSS, встановити з’єднання із сервером, завантажити файл, декодувати його та намалювати на екрані. Тому важливо одночасно оптимізувати зображення, спосіб його підключення та порядок завантаження.

Перевірити результат можна в PageSpeed Insights, Lighthouse або Chrome DevTools. Аналізуйте не тільки загальний бал, а й діагностику LCP: який елемент визначено як LCP, коли почалося його завантаження та чи не витрачається час на очікування сервера або блокування CSS.

• Якщо LCP-елементом є hero-зображення, зосередьте оптимізацію саме на ньому.
• Якщо LCP-елементом є заголовок або текст, проблема може бути у вебшрифті, CSS чи відповіді сервера, а не в картинці.
• Перевіряйте сторінку на мобільному пристрої або в мобільній емуляції: там великі файли впливають на результат сильніше.

Використовуйте Image замість background-зображення

Коли це дозволяє дизайн, додайте головну картинку через віджет Image в Elementor, а не як background для секції або контейнера. Зображення в HTML легше виявити під час побудови сторінки, і браузер може застосувати до нього стандартні атрибути srcset та sizes для адаптивного завантаження.

Background-зображення зазвичай підключається через CSS. Браузер спочатку має завантажити й обробити таблицю стилів, а вже потім знайти ресурс. Це може відкласти початок завантаження hero-файлу, особливо якщо CSS великий, об’єднаний або частково генерується плагінами оптимізації.

Заміна background на Image не завжди можлива. Наприклад, фон може бути потрібен для накладання тексту, декоративного кадрування або складної композиції. У такому разі використовуйте оптимізований CSS background, але окремо перевірте, чи саме він є LCP-елементом і чи не можна побудувати цей блок через звичайне зображення з object-fit.

• Для зображення в Image збережіть правильне співвідношення сторін і налаштуйте його відображення через стилі.
• Не створюйте дублікати: якщо hero вже виводиться як Image, не підключайте ту саму картинку ще й як background.
• Після зміни структури очистьте кеш Elementor, кеш сторінки та CDN, якщо вони використовуються.

Підготуйте правильний файл для першого екрана

Не завантажуйте оригінал фотографії на кілька мегабайтів, якщо на екрані вона відображається у значно меншому розмірі. Спочатку визначте найбільшу реальну ширину hero-блоку на десктопі та підготуйте файл із невеликим запасом. Для мобільної версії бажано мати окремий кадр або принаймні адаптивний варіант, якщо композиція на вузькому екрані змінюється.

WebP підходить для більшості фотографій і графіки. AVIF часто дає ще менший розмір, але його варто перевірити в конкретному браузерному та серверному оточенні. WordPress і Elementor можуть генерувати або використовувати адаптивні варіанти, проте після завантаження потрібно переконатися, що сторінка справді віддає потрібний формат, а не важкий оригінал.

Стиснення не повинно руйнувати сприйняття головного зображення. Для hero важливі деталі, текстура та читабельність об’єктів, тому перевіряйте не лише вагу, а й якість на реальному екрані.

• Обріжте зайві ділянки, які не видно у макеті.
• Експортуйте фотографію в WebP або AVIF, якщо цей формат коректно підтримується вашою системою.
• Перевірте, що в HTML використовуються srcset і sizes, а не лише один великий URL.
• Вкажіть width і height або використовуйте коректні атрибути розміру, щоб зменшити ризик зміщення макета.

Налаштуйте пріоритет завантаження hero-зображення

Для зображення, яке видно одразу і яке є LCP-елементом, зазвичай доречно не відкладати завантаження. У Elementor це можна зробити через розширені атрибути віджета Image. У полі Custom Attributes додайте окремі пари атрибутів у форматі, який використовує ваша версія Elementor: loading|eager та fetchpriority|high.

loading="eager" підказує браузеру не застосовувати до цього зображення відкладене завантаження. fetchpriority="high" повідомляє, що ресурс важливий і його бажано завантажити з вищим пріоритетом. Ці атрибути не замінюють оптимізацію файлу: великий JPEG залишиться повільним навіть із високим пріоритетом.

Після збереження перевірте вихідний HTML сторінки в браузері. У потрібного зображення мають з’явитися відповідні атрибути. Якщо Elementor, тема або плагін кешування змінює розмітку, орієнтуйтеся на фактичний HTML, а не лише на значення в редакторі.

• Застосовуйте eager і high лише до головного зображення, яке справді видно у першому екрані.
• Не додавайте ці атрибути до всіх зображень: браузер отримає забагато високопріоритетних ресурсів і втратить перевагу правильного порядку завантаження.
• Не використовуйте loading="lazy" для hero-зображення, якщо воно є LCP-елементом.
• Якщо hero розташований нижче першого екрана, йому не потрібен високий пріоритет лише через те, що це велике зображення.

<img src="hero.webp" alt="Опис зображення" width="1600" height="900" loading="eager" fetchpriority="high">

Залиште lazy loading для зображень нижче першого екрана

Зображення в секціях нижче першого екрана не повинні конкурувати з hero за пропускну здатність і ресурси браузера. Для них lazy loading зазвичай є правильним вибором: файл починає завантажуватися ближче до моменту, коли користувач прокручує сторінку до відповідного блоку.

У WordPress відкладене завантаження часто додається автоматично, а Elementor або оптимізаційні плагіни можуть додатково змінювати поведінку. Переконайтеся, що автоматична оптимізація не встановила lazy loading для головної картинки та водночас не вимкнула його для всіх інших зображень.

Верхній блок може містити кілька картинок: логотип, іконки, декоративні елементи та hero. Не кожен із них потрібно робити високопріоритетним. Визначте один основний ресурс, а дрібні декоративні файли залиште з нижчим пріоритетом.

• Hero — eager/high лише тоді, коли він видимий одразу.
• Зображення в галереях, відгуках і нижніх секціях — lazy loading.
• Не додавайте lazy loading до маленького логотипа або іконки без потреби, але й не підвищуйте їхній пріоритет замість hero.
• Після оптимізації перевірте мережеві запити в DevTools: спочатку мають завантажуватися критичні ресурси першого екрана.

Як знайти причину повільного LCP

Якщо після оптимізації картинки LCP залишається повільним, розділіть проблему на етапи. У Lighthouse або PageSpeed Insights перегляньте breakdown LCP: очікування відповіді сервера, затримка пошуку ресурсу, час завантаження та час відображення. Це допомагає зрозуміти, чи потрібно працювати із сервером, HTML, CSS або самим файлом.

Перевірте вкладку Network у Chrome DevTools. Знайдіть URL hero-зображення, його фактичний формат, розмір, час початку запиту та наявність кешу. Якщо запит стартує лише після завантаження великого CSS, це ознака проблеми з background-підключенням або блокуючими стилями. Якщо файл завантажується рано, але довго передається, потрібне додаткове стиснення або швидший сервер.

Тестуйте сторінку після очищення кешу та в режимі, наближеному до реального користувача. Результат у редакторі Elementor може відрізнятися від результату опублікованої сторінки, оскільки редактор завантажує додаткові скрипти та стилі.

• Перевірте мобільну й десктопну версії окремо.
• Порівняйте результат із кешем і без кешу.
• Переконайтеся, що CDN віддає оптимізований формат, а не резервний оригінал.
• Після кожної зміни змінюйте лише один фактор, щоб зрозуміти його вплив.

Типові помилки під час оптимізації hero

Найчастіша помилка — додати fetchpriority="high" до всіх зображень на сторінці. Це не прискорює кожну картинку, а створює конкуренцію за мережеві ресурси. Інша поширена проблема — використати eager для великого банера, але залишити файл у початковому форматі та розмірі.

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

Також не плутайте LCP із CLS. Атрибути width і height не роблять файл швидшим, але допомагають зарезервувати місце під нього та зменшити зміщення контенту під час завантаження.

• Не використовуйте оригінальне фото на кілька мегабайтів без адаптивних варіантів.
• Не залишайте lazy loading на hero, якщо саме він визначає LCP.
• Не оптимізуйте лише оцінку в Lighthouse — перевіряйте реальну розмітку та мережеві запити.
• Не видаляйте alt: він важливий для доступності, хоча безпосередньо не прискорює LCP.