foundation

Lazy loading

Откладывайте below-the-fold images, routes, modules и data, защищая LCP и избегая layout shifts.

Lazy loading откладывает работу до момента, когда она вероятно понадобится. Изображения, компоненты, маршруты, данные и сторонние scripts можно грузить позже, но LCP-кандидат и код критичного взаимодействия нельзя задерживать случайно. Хорошие реализации резервируют место и дают предсказуемые состояния загрузки.

					<img src="hero.jpg" fetchpriority="high" width="1200" height="630" alt="...">
<img src="thumb.jpg" loading="lazy" width="320" height="180" alt="...">

Dynamic import маршрутов и IntersectionObserver распространяют идею на JavaScript и данные. Всегда обрабатывайте ошибки и skeleton.

На интервью: нативный loading, IntersectionObserver, route splitting, skeletons и когда eager лучше.

Типовые ошибки: lazy hero бьёт по LCP; контент без размеров даёт CLS.

Компромисс: удобство против контроля — выбирайте механизм под вашу связность и бюджет производительности.

Чеклист:

Не откладывайте LCP-элемент.
Резервируйте width и height.
Осознанные thresholds и rootMargin.
UI загрузки и ошибок.