Lazy loading

Lazy loading откладывает работу до необходимости: изображения ниже fold, некритичные routes, тяжёлые компоненты, off-screen media. Цель — быстрее critical path, а не отложить всё подряд.

					<img src="thumb.jpg" loading="lazy" width="400" height="300" alt="…" />
				

| Ресурс | Рекомендация | |--------|--------------| | Hero/LCP image | Eager; `fetchpriority="high"`; не lazy | | Below-fold images | `loading="lazy"` с явными размерами | | Routes | `React.lazy` / dynamic import для admin или settings | | Third-party | После consent или взаимодействия |

Сочетайте lazy loading с **placeholder** и зарезервированными размерами против CLS. В React — `lazy()` и осмысленные Suspense fallback под layout skeleton.

На интервью: native image lazy vs Intersection Observer; lazy hydration; когда deferral бьёт по INP, если пользователь кликает до прихода chunk.

Типовые ошибки: lazy LCP-кандидата; skeletons с collapse и shift; infinite scroll без virtualization.

Компромисс — отложенные байты против задержки взаимодействия при быстром scroll/click.

Чеклист:

• Не lazy-load LCP element.
• width/height для отложенного media.
• Third-party по необходимости.
• Совместная оценка INP и LCP.