Імовірне головне зображення не видно з HTML

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

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

Що зробити

Відкрийте знахідку: у ній показано елемент, його оголошений розмір і позицію в основній області, слова перед ним, правило CSS, що задає його фон, з таблицею стилів і позицією, а також розв’язану адресу зображення.
Перевірте в браузері, чи це зображення — головна картинка, яку бачать люди, коли відкривається сторінка.
Якщо так, показуйте його звичайним <img>, у якого src — ця адреса, або додайте <link rel="preload" as="image" href="…"> з тією самою адресою в <head> сторінки.
fetchpriority="high" чи preconnect можуть додатково допомогти, але жодне з них не вимагається цією перевіркою й саме по собі не робить зображення видимим.

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

Що ми читаємо

Ми читаємо повний початковий HTML сторінок, які повернули 200 і, схоже, рендеряться на сервері, у тому самому дереві HTML5, яке будує аналізатор браузера, разом зі стилями, які застосовує сторінка: підключеними таблицями стилів, блоками <style>, їхніми файлами @import і вбудованими атрибутами style. Нічого не рендериться, і JavaScript не виконується.

Сторінка має мати одну чітку основну область: елемент <main>; якщо його немає — елемент, роль якого містить токен main; якщо немає й такого — <article>. Якщо перший наявний із них трапляється більше одного разу або жодного немає, сторінка не перевіряється.

В основній області за порядком у документі ми беремо перший <img> або елемент із фоновим зображенням CSS, оголошений розмір якого (з атрибутів HTML чи CSS) щонайменше 600 × 300 пікселів. Менші пропускаються. Якщо перед ним іде понад 200 слів основної області, правило не застосовується; якщо це <img> з придатним до читання джерелом, сторінка проходить перевірку.

Для фону ми розв’язуємо його адресу відносно власної адреси таблиці стилів і шукаємо ту саму адресу у звичайному <img> будь-де на сторінці або в <link rel="preload" as="image"> всередині <head>, що застосовується до екранів. Про сторінку повідомляється, коли немає ні того, ні іншого. srcset чи imagesrcset з кількома файлами, попереднє завантаження поза <head> або з нерозв’язаною умовою media не можуть підтвердити збіг і залишають сторінку неперевіреною, коли саме воно могло б бути збігом. <picture> з нерозв’язаними альтернативами <source srcset> не може довести, що адреса його резервного зображення збігається. Шар CSS в імпорті також залишає розмір непідтвердженим.

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

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

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

Сторінка https://bakery.example/ підключає /assets/site.css, що містить таке правило:

.hero {
  width: 1200px;
  height: 400px;
  background-image: url("/img/hero.jpg");
}

<main>
  <div class="hero"></div>
  <h1>Fresh bread every morning</h1>
</main>

Перший великий елемент в основній області — фон 1200 × 400, зображення якого назване лише в CSS, тому про сторінку повідомляється.

<link rel="preload" as="image" href="/img/hero.jpg">

Можливе виправлення: додайте це попереднє завантаження в <head> сторінки або показуйте картинку через <img>, у якого src — /img/hero.jpg. Наступний повний аудит підтверджує виправлення, коли повністю читає ту саму сторінку та її CSS і знаходить адресу в HTML; якщо не лишилося кандидата, що відповідає умовам, чи основної області, попередня проблема лишається непідтвердженою.

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

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

Повторна перевірка: Повний аудит — запустіть новий повний аудит сайту. Знахідка вважається підтверджено виправленою, лише коли ту саму сторінку прочитано повністю з усіма її таблицями стилів, а її перше велике зображення в основній області тепер є <img> або його адреса з’являється у звичайному <img> чи у відповідному попередньому завантаженні зображення в head. Якщо не лишилося кандидата, що відповідає умовам, чи основної області або таблицю стилів чи відповідне оголошення не вдається прочитати, знахідка лишається непідтвердженою.

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

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

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

Джерела

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

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