Ленивая загрузка (loading="lazy") удобна: экономит трафик и ускоряет загрузку страницы за счёт отложенной загрузки картинок, которые пока не видны пользователю.Однако если вы не укажете приоритет для критичных картинок, браузер сам примет решение о порядке загрузки — а его алгоритмы могут не совпасть с вашими целями. ☹️ В результате изображение или шапка могут загрузиться позже, чем нужно: это ухудшит LCP и создаст ощущение «медленной» страницы; при отсутствии заданных размеров это ещё и может привести к CLS.
🧩 Что делать?
✔️ Для некритичных изображений — смело ставьте
loading="lazy". Это экономит трафик и не вредит UX;✔️ Для критичных изображений на первом экране — НЕ полагайтесь только на
loading="lazy":✨ уберите
loading="lazy", или✨ явно укажите приоритет (
fetchpriority="high"), или✨ предзагрузите ресурс (
<link rel="preload" as="image" href="…">✔️ Всегда задавайте width/height или используйте aspect-ratio — это защитит от CLS;
✔️ Используйте srcset/sizes (и современные форматы WebP/AVIF) — чтобы браузер мог выбрать оптимальный файл для устройства;
✔️ Проверяйте LCP в реальных условиях — локальные тесты не всегда отражают боевое поведение.
🧩 Пример:
<!-- Важное изображение -->
<link rel="preload" as="image" href="/image.jpg">
<img src="/image.jpg" width="1200" height="600" fetchpriority="high" alt="...">
<!-- Некритичное изображение -->
<img src="/thumb.jpg" loading="lazy" width="400" height="300" alt="...">
🧩 Несколько частых ошибок:
⏺️ Применять
loading="lazy" ко всем изображениям подряд — и потерять контроль над LCP;⏺️ Положиться только на
fetchpriority и забыть про preload и адаптивные форматы;⏺️ Предзагружать слишком много ресурсов — это может ухудшить общую загрузку.
Как итог, ленивую загрузку стоит применять выборочно. Для картинок первого экрана давайте явный приоритет (
preload или fetchpriority) или вовсе не лениво загружайте их; для всего остального — смело лениво загружайте. Так вы получите и экономию трафика, и предсказуемую, быструю загрузку для пользователя. 👍