Сравни подходы для оптимизации загрузки сайта и объясни, когда какой подход выбрать.

Производительность в JS

Загрузку сайта оптимизируют по нескольким направлениям: уменьшение и разбиение бандла, оптимизация ресурсов, кеширование, стратегии загрузки и рендеринга. Выбор зависит от узкого места.

Направления и подходы

JavaScript

Code splitting — разбить бандл, грузить по маршрутам.
Lazy loading — ленивая загрузка компонентов/модулей.
Tree shaking — убрать неиспользуемый код.
`async`/`defer` для скриптов.

Ресурсы

Оптимизация изображений — сжатие, WebP/AVIF, srcset, lazy-load.
Минификация JS/CSS, сжатие (gzip/brotli).
Шрифты — font-display: swap, подмножества.

Сеть и кеш

CDN — раздача ближе к пользователю.
Кеширование — HTTP-заголовки, Service Worker.
Preload/prefetch/preconnect — приоритизация критичных ресурсов.
HTTP/2–3 — мультиплексирование.

Рендеринг

SSR/SSG — быстрый первый показ и SEO.
Critical CSS — инлайн критичных стилей.

Как выбирать

Большой JS → code splitting + lazy load.
Тяжёлые картинки → оптимизация изображений.
Медленный первый показ/SEO → SSR/SSG + critical CSS.
Повторные визиты → кеширование + CDN.

Сначала измеряют (Lighthouse, WebPageTest), потом оптимизируют узкое место.

Коротко для собеседования

Оптимизация загрузки: JS (code splitting, lazy load, tree shaking), ресурсы (сжатие изображений, минификация, шрифты), сеть (CDN, кеш, preload, HTTP/2-3), рендеринг (SSR/SSG, critical CSS). Выбор — по узкому месту, найденному измерением (Lighthouse).