HTML5: ленивая загрузка изображений и iframe — loading, decoding и fetchpriority на практике

Запрос «Ленивая загрузка изображений в HTML5» стабильно популярен: всем нужен быстрый сайт без сложных настроек. HTML5 дал нам нативный инструмент — атрибуты loading, decoding и fetchpriority, которые помогают управлять загрузкой медиа почти без JavaScript. Разберёмся, как применять их правильно, не ломая LCP и не вызывая CLS.

Что такое ленивая загрузка и зачем она нужна

Ленивая загрузка откладывает загрузку ресурсов, которые пользователь ещё не видит (ниже «сгиба»), до момента, когда они попадают в область просмотра. Это уменьшает трафик, ускоряет первичную отрисовку и помогает показателям Core Web Vitals — особенно FCP и TBT. Но важно не «ленизировать» критические изображения, влияющие на LCP.

Быстрый старт: один атрибут

Минимально рабочий пример ленивой загрузки изображения в HTML5:

<img
  src="/images/gallery/photo-01.jpg"
  alt="Интерьер кофейни"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
/>

Пояснения:

Главные (hero) изображения: не ленизируйте, помогайте браузеру

Изображение, формирующее LCP (крупнейший элемент), нельзя грузить лениво. Наоборот, дайте браузеру понять, что оно важно:

<img
  src="/images/hero.jpg"
  alt="Главный баннер — весенняя коллекция"
  width="1600"
  height="900"
  fetchpriority="high"
  decoding="async"
  style="max-width:100%;height:auto;"
/>

Ленивая загрузка iframe

Встроенные карты, видео и виджеты часто «тяжелее» картинок. Нативный loading="lazy" работает и для iframe:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Видеообзор"
  loading="lazy"
  width="560" height="315"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
></iframe>

Совет: пока iframe не виден, показывайте лёгкий превью-плейсхолдер (постер-картинку). Это снижает блокировку потока и экономит запросы.

Поддержка и fallback на JS (по необходимости)

Поддержка loading="lazy" сегодня есть в современных браузерах. Если всё же нужен запасной вариант, можно добавить небольшой JS, который подменит data-src на src при попадании элемента в область просмотра.

<img
  data-src="/images/large-01.jpg"
  alt="Галерея"
  width="1200" height="800"
  class="js-lazy"
/>
<script>
  (function(){
    const nativelySupported = 'loading' in HTMLImageElement.prototype;
    if (nativelySupported) {
      document.querySelectorAll('img[js-lazy], img.js-lazy').forEach(img => {
        img.setAttribute('loading', 'lazy');
        if (img.dataset.src) img.src = img.dataset.src;
      });
      return;
    }
    const imgs = document.querySelectorAll('img[js-lazy], img.js-lazy');
    if ('IntersectionObserver' in window) {
      const io = new IntersectionObserver((entries, obs) => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            const img = e.target;
            if (img.dataset.src) img.src = img.dataset.src;
            obs.unobserve(img);
          }
        });
      }, { rootMargin: '200px' });
      imgs.forEach(img => io.observe(img));
    } else {
      // Простейший бэкап без IO: прогружаем сразу
      imgs.forEach(img => { if (img.dataset.src) img.src = img.dataset.src; });
    }
  })();
</script>

Этот подход пригодится для очень старых браузеров. В большинстве проектов сегодня хватает одного лишь loading="lazy".

Чек-лист лучших практик

Как проверить эффект

Типичные ошибки и как их избежать

Мини-шаблон для страницы с героем и галереей

<!-- Hero: важное изображение без lazy -->
<img
  src="/images/hero.jpg"
  alt="Весенняя коллекция"
  width="1600" height="900"
  fetchpriority="high"
  decoding="async"
  style="display:block;max-width:100%;height:auto;"
/>

<!-- Галерея ниже: lazy -->
<section class="gallery" aria-label="Фотогалерея">
  <img src="/images/g1.jpg" alt="Фото 1" width="1200" height="800" loading="lazy" decoding="async"/>
  <img src="/images/g2.jpg" alt="Фото 2" width="1200" height="800" loading="lazy" decoding="async"/>
  <img src="/images/g3.jpg" alt="Фото 3" width="1200" height="800" loading="lazy" decoding="async"/>
</section>

<!-- Встроенное видео ниже: lazy iframe -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Видеообзор коллекции"
  width="560" height="315"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
></iframe>

Итоги

Для большинства проектов достаточно: не ленизировать LCP-изображение, добавить ему fetchpriority="high", а для всего ниже «сгиба» — loading="lazy" и decoding="async". Не забывайте про размеры изображений и проверку метрик. Такой набор даёт быстрый и стабильный прирост производительности без сложных инструментов.

Хотите системно прокачать вёрстку и научиться уверенно работать с производительностью на реальных макетах? Загляните в практический курс «Вёрстка сайта с нуля 2.0 — хочу прокачать навыки на практике».

Источник