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

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

Структура ответа:
1. Краткое вступление на 1-2 предложения о том, зачем нужна ленивая и отложенная загрузка.
2. Основной список приемов, отсортированный по приоритету: от наиболее полезных к менее значимым. Для каждого приема укажи:
- краткое объяснение;
- техническую реализацию с фрагментом HTML или JavaScript;
- при необходимости один короткий пример для Webpack, Vite, React или Next.js;
- ограничения и совместимость;
- влияние на метрики, например LCP, FCP, TBT.
3. Отдельно разберись с несущественными ресурсами:
- сторонние скрипты и виджеты;
- шрифты;
- изображения;
- CSS;
- веб-шрифты и iframe.
Для каждого ресурса покажи, как откладывать загрузку, и приведи короткий пример.
4. Обязательно затронь async, defer, dynamic import, code splitting, IntersectionObserver, preload, prefetch, modulepreload, requestIdleCallback, setTimeout или fetch в idle, loading="lazy", font-display, sandboxing и consent-механизмы.
5. Добавь микро-паттерн для ленивой загрузки аналитики или чат-виджета: HTML плюс JavaScript, с защитой от блокировщиков и fallback.
6. Раздел "Чего не делать": 4-6 типичных ошибок.
7. Чек-лист внедрения и тестирования: 5-8 пунктов, включая Lighthouse, WebPageTest, Chrome DevTools и целевые пороги метрик.
8. Пример замера до и после: какие показатели сравнить и как трактовать изменения.
9. Итог: 3-5 кратких рекомендаций для немедленного применения.

Требования:
- Общий объем: до 900 слов.
- Кодовые фрагменты делай короткими, не длиннее 20 строк каждый.
- Используй нумерованные разделы и маркированные списки.
- Не добавляй вопросы и не уходи в общие рассуждения.