Веб Мастерская | Веб разработка и программирование | ИТ | IT
Без категории · 29 сентября 2026 г.
БАЗА:
БАЗА: Коллеги, loading="lazy" — одна строка, а профита как от второго монитора. Как работает: Браузер видит <img loading="lazy"> или <iframe loading="lazy"> и не качает файл сразу. Он ждёт, пока элемент приблизится к вьюпорту. Скролл — картинка подгружается. Экономим сеть, память и время загрузки. Когда нужен: — длинные лендинги, блоги, каталоги; — картинки ниже первого экрана; — тяжёлые фото, галереи, превью; — неважные сразу iframe: карты, виджеты, видео. Когда не нужен: — Главный баннер и всё, что влияет на LCP. Если изображение видно сразу, ставим loading="eager" или ничего. — Мелкие иконки на пару КБ — лишний отложенный запрос может дать мерцание. — Контент для печати, скриншотов, экспорта и автотестов. — CSS-фоны: у background-image атрибут не работает. Нужны IntersectionObserver, media query или content-visibility. Из практики: — не вешайте lazy на всё подряд; — всегда задавайте width и height, чтобы не было прыжков макета; — проверяйте страницу в DevTools → Network → Slow 4G; — если главный блок грузится последним, вы не оптимизировали, а сломали первый экран. Бонус из мастерской: если картинка важная, но хочется ускорить, используйте не только loading, а ещё fetchpriority="high", preload и srcset. Ленивая загрузка лечит лишний вес страницы, но не заменяет нормальную архитектуру. Lazy — не магия, а инструмент. Хороший мастер знает, что можно отложить, а что надо грузить немедленно. Вот так. Идем кодить дальше! 🚀