Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

seoАвтор: Пуск‑Медиа (импорт)Просмотры: 3

Native lazy loading: loading="lazy" без сторонних библиотек

Когда браузер сам откладывает картинки ниже fold, почему LCP-изображению lazy вредит и какие fallback для старых клиентов.

Изображение статьи: Native lazy loading: loading="lazy" без сторонних библиотек

Атрибут loading="lazy" на <img> и <iframe> откладывает загрузку до приближения к viewport — экономит трафик на длинных лентах и каталогах.

LCP-элемент и первый экран не должны быть lazy: браузер задержит главный кадр и ухудшит Core Web Vitals.

- [Browser-level image lazy loading — web.dev](https://web.dev/articles/browser-level-image-lazy-loading) — Рекомендации Google по lazy и LCP.

- [Lazy loading — MDN](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading) — Обзор техник отложенной загрузки.

---

## Каталоги

Для первых N карточек в сетке используйте eager или fetchpriority=high только для видимых в первом ряду.

Сохраняйте width/height, чтобы lazy не вызывал CLS при подгрузке.

#изображения#производительность#HTML

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.