CSS-фон вместо тега img — двойная потеря для LCP

Картинка фоном через CSS (background-image) — привычный способ сделать обложку на всю плитку: текст поверх, картинка под ним, кадрирование через background-size: cover. Для декора это нормально. Для заметной картинки — особенно на первом экране — это двойная потеря.

Это двадцать пятая часть цикла «PageSpeed без мифов».

Почему фон проигрывает

• Браузер узнаёт о фоне поздно. Адрес <img> виден сразу при разборе HTML. Адрес фона — только когда загружен CSS, вычислены стили и элемент попал в вёрстку. Если фон — LCP, вся эта цепочка идёт в «задержку загрузки ресурса».
• У фона нет ни ленивой загрузки, ни приоритета. Нельзя сказать loading="lazy" для фонов ниже сгиба и нельзя поставить fetchpriority="high" для главного.
• Нет srcset. Один и тот же файл и на телефоне, и на большом экране (или громоздкий image-set в стилях).

На странице раздела «Статьи и видео» одного сайта плитки были с фоновыми обложками, и первая из них становилась LCP. В фазах LCP — 2,7 секунды «задержки загрузки ресурса»: браузер просто поздно узнавал о картинке.

Лечение: обычный img с object-fit

<!-- было -->
<a class="tile" style="background-image:url(/cover.jpg)">…</a>

<!-- стало -->
<a class="tile">
  <img src="/cover-490.webp" srcset="/cover-490.webp 490w, /cover-770.webp 770w"
       sizes="(min-width: 760px) 341px, 100vw" width="770" height="570" alt=""
       fetchpriority="high">   <!-- только у первой плитки -->
  …текст поверх…
</a>

.tile { position: relative; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

• object-fit: cover кадрирует так же, как background-size: cover;
• первой плитке — fetchpriority="high", остальным ниже сгиба — ленивая или отложенная загрузка;
• размеры файла — под место показа, а не «на всякий случай».

Результат на той же странице: оценка 77 → 92.

Заодно: размер файла под место показа

Когда переводили плитки на <img>, увидели и второе: обложки отдавались файлами 770×570 при плитке 341×244 на телефоне. Отдельный мобильный размер 490×363 (с запасом под плотные экраны) срезал вес картинок втрое. Без srcset, то есть с фоном, сделать это было бы куда сложнее.

Когда фон всё-таки уместен

• декоративные текстуры и узоры, которые не несут смысла;
• маленькие повторяющиеся элементы;
• картинки далеко ниже сгиба, если их адрес подставляется после первой отрисовки (через data-bg, как в двадцать четвёртой части).