Імовірне головне зображення завантажується відкладено

Чому це важливо

Посібник web.dev про оптимізацію Largest Contentful Paint не радить відкладено завантажувати зображення, яке стає найбільшим елементом у першому екрані, бо відкладене завантаження затримує початок його завантаження.

Що зробити

Відкрийте знахідку: у ній показано позицію зображення в основному HTML, його оголошений розмір, джерело та значення loading і те, скільки видимих слів іде перед ним. Пункт на перегляд із низькою впевненістю також наводить оригінальний відкривальний тег зображення, а також його <picture>, якщо він є, коли їх вдалося прочитати повністю, і знайдені ознаки відкладеного завантаження.
Перевірте в браузері, чи є це зображення першим великим зображенням, яке бачать люди, коли сторінка відкривається.
Якщо так, приберіть loading="lazy" або задайте loading="eager". Якщо зображення завантажує скрипт, вкажіть справжню адресу зображення в src у HTML і приберіть ознаки відкладеного завантаження, як-от data-src або клас lazy, щоб зображення не чекало на скрипт. Сам fetchpriority="high" не скасовує декларації lazy.

Коли залишити як є: Якщо зафіксоване зображення не лежить у першому екрані сторінки, наприклад тому, що першим з’являється інший великий елемент, можна залишити як є.

Що ми читаємо

Ми читаємо оригінальний HTML сторінок, доступних для індексування, які повернули 200 і мають одну унікальну явну основну область (елемент main, role="main" або article). Нічого не завантажується й не рендериться: файли зображень та їхні справжні розміри не читаються. Сторінка, яка в іншому залежить від рендерингу на клієнті, не перевіряється. Сторінку, де від скриптів залежать лише зображення з відкладеним завантаженням, а оригінальний HTML містить достатньо тексту, ми перевіряємо за цим статичним HTML, і зафіксований чи пройдений результат для неї про це повідомляє.

Ми розглядаємо елементи <img> у порядку джерела й пропускаємо лише ті, чиї оголошені цілочислові width і height показують, що вони вужчі за 600 або нижчі за 300. Перше з решти зображень, перед яким не більше 200 слів основної області, про які відомо, що вони видимі, є кандидатом; якщо його розмір чи видимість не вдається прочитати, пізніше зображення з оголошеним великим розміром не оцінюється замість нього. Контент, прихований за допомогою hidden, inert чи вбудованого стилю, не враховується; зовнішній CSS не вимірюється. Контент навігації, aside, футера й форм пропускається; шапка в межах основної області читається.

Кандидат фіксується із середньою впевненістю, коли він оголошує цілочислові width щонайменше 600 і height щонайменше 300, непорожній src і loading="lazy", навіть якщо має ще й ознаку скриптового завантажувача, як-от data-src. З низькою впевненістю він фіксується, коли оголошує loading="lazy", але його розмір не оголошено або його src відсутній чи порожній, або коли його src відсутній, порожній чи є URI data:, а <img> чи його батьківський <picture> має data-src, data-srcset, data-lazy-src, data-lazy-srcset, data-original, data-hi-res-src, data-url або токен класу lazy. Обидва випадки потребують допустимого значення loading, видимого зображення й доведеної позиції: перед ним не більше 200 видимих слів, і всі вони діляться на слова. Інші назви класів, як-от lazyload, інші назви data-* і джерело data: без однієї з цих ознак самі собою не роблять зображення пунктом на перегляд. Значення eager або відсутнє loading на повністю прочитаному кандидаті без ознаки скриптового завантажувача проходить; поза двома описаними вище випадками фіксації повністю прочитаний кандидат зі звичайним або відсутнім loading і такою ознакою, наприклад справжній src поруч із data-src або джерело data: без ознаки відкладеного завантаження, позначається як неперевірений. Коли кандидата не вдається прочитати повністю і він не є відкладеним у цей спосіб, сторінка проходить, лише якщо кожне зображення в межах перших 200 видимих слів, оголошений розмір якого не замалий, разом із кандидатом, прочитано в оригінальному HTML без ознак відкладеного завантаження: немає значення loading, відмінного від eager, немає ознаки скриптового завантажувача і немає відсутнього джерела чи заглушки. Інакше, а також коли текст перед цією межею не вдається поділити на слова, сторінка позначається як неперевірена. Джерела <picture> і srcset записуються як декларації; те, який файл обрав би браузер, не передбачається.

Приклад і докази

Ілюстративний приклад — схематичний HTML, а не реальний аудит.

<img src="/hero.jpg" width="1200" height="600" loading="lazy" alt="Fresh bread">

Перше велике зображення оголошує відкладене завантаження, тому сторінка фіксується.

<img src="/hero.jpg" width="1200" height="600" alt="Fresh bread">

Можливе виправлення: завантажуйте це зображення без відкладеного завантаження.

Підтвердити й перевірити знову

Перевірте самі: відкрийте сторінку в браузері й перевірте, чи є зафіксоване зображення першим великим зображенням, яке ви бачите; панель Performance в інструментах розробника Chrome показує, який елемент був Largest Contentful Paint.

Повторна перевірка: Повний аудит — запустіть новий повний аудит сайту. Знахідка закривається, коли ту саму сторінку знову прочитано повністю, вона досі підпадає під перевірку, а її перше зображення на початку основного контенту проходить: повністю прочитаний кандидат не завантажується відкладено й не має ознаки скриптового завантажувача, або кандидата не вдається прочитати повністю, але кожне зображення на початку основного контенту прочитано в оригінальному HTML без ознак відкладеного завантаження; це не мусить бути той самий файл зображення. Для зображення, яке завантажує скрипт, це означає справжній src у HTML і відсутність ознак відкладеного завантаження. Сторінка без придатного зображення на початку, зображення, яке досі завантажується відкладено або має ознаку скриптового завантажувача, або сторінка, яку більше не вдається прочитати повністю, не доводять виправлення, і попередня знахідка зберігається.

Обмеження та джерела

Розмір 600 × 300 і позиція у 200 слів — це фіксовані правила цієї перевірки, а не пороги viewport браузера чи LCP. Справжній Largest Contentful Paint, viewport і відмальовування не вимірюються, а зміна декларації сама собою не доводить, що сторінка стала швидшою.

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

Упевненість: Середня, бо оголошені в HTML розміри й позиції слів лише підказують, яке зображення з’являється першим, а браузер може першим відмалювати інший елемент; зображення невідомого розміру чи без джерела або таке, чиє відкладене завантаження виведено з ознак скрипту, який не запускається, позначено низькою впевненістю.

Джерела

web.dev, Оптимізація Largest Contentful Paint — радить не завантажувати зображення LCP відкладено, бо відкладене завантаження затримує початок його завантаження. Перевірено 7 жовтня 2026.

Редакційна перевірка: 2 листопада 2026