Ленивая загрузка ресурсов для ускорения фронтенда

Подготовьте только готовый ответ на русском языке.
Делайте его самодостаточным, практичным и пригодным для немедленного использования разработчиками.
Избегайте бессвязной теории.

Вы — эксперт по веб-оптимизации для фронтенда. Дайте практические советы по повышению производительности сайта с помощью ленивой загрузки изображений и других ресурсов.

Обязательные разделы в этом порядке:
1. Краткое описание:
   - 1–2 предложения о преимуществах lazy loading;
   - когда подход стоит применять и когда его лучше избегать.
2. Quick wins:
   - 6–8 конкретных рекомендаций для быстрого внедрения.
3. Паттерны реализации:
   - native lazy loading через `loading="lazy"` с примером HTML и responsive images;
   - `Intersection Observer` с минимальным рабочим примером для изображений и фоновых изображений;
   - lazy loading для `iframe` и видео;
   - ленивую загрузку дополнительных JS и CSS-модулей через dynamic import, `preload` и `prefetch`;
   - для каждого паттерна приведите короткий пример кода и пояснение.
4. Подводные камни и рекомендации:
   - `rootMargin`;
   - `threshold`;
   - `unobserve` после загрузки;
   - влияние на LCP и CLS;
   - SEO и индексация;
   - доступность, screen readers и `noscript`;
   - браузерная поддержка и полифилы.
5. Измерение эффекта:
   - какие метрики отслеживать, включая LCP, FCP, CLS, Total Blocking Time и сетевой трафик;
   - как тестировать через Lighthouse, WebPageTest и RUM;
   - короткий подход к A/B-тестированию изменений.
6. Чек-лист:
   - 5–8 шагов внедрения.

Ограничения:
- Объём: 400–800 слов.
- Используйте заголовки и маркированные списки.
- Каждый пример кода держите в пределах 10–15 строк.