Lazy loading и code splitting
Тема дорожной карты · Frontend разработчик
Ленивая загрузка — это техника оптимизации производительности, откладывающая загрузку некритических ресурсов (изображений, компонентов или целых маршрутов) до момента, когда они действительно нужны, уменьшая начальный размер бандла и улучшая Time to Interactive и Largest Contentful Paint. Нативная браузерная ленивая загрузка изображений и iframe включается атрибутом loading="lazy" без JavaScript и поддерживается всеми современными браузерами. Для разделения JavaScript-кода динамический import() обеспечивает ленивую загрузку на уровне маршрутов и компонентов; в React React.lazy() в сочетании с <Suspense fallback={...}> загружает компоненты по запросу, тогда как Next.js и Remix предоставляют встроенное разделение кода по маршрутам автоматически. IntersectionObserver API даёт детальный контроль над тем, когда элементы входят в viewport, обеспечивая пользовательские стратегии ленивой загрузки для сложных сценариев (бесконечная прокрутка, отложенные сторонние виджеты) — улучшения, которые Lighthouse измеряет в категориях аудитов «Defer offscreen images» и «Remove unused JavaScript».
Как это работает
Lazy loading и code splitting меряется Core Web Vitals: LCP (Largest Contentful Paint, цель < 2.5s), INP (Interaction to Next Paint, цель < 200ms), CLS (Cumulative Layout Shift, цель < 0.1). Инструменты: Chrome DevTools Performance + Lighthouse, WebPageTest, real-user monitoring (Sentry, web-vitals lib). Победы: минимизация JS-бандла (code split, tree shake), современные форматы (AVIF/WebP для картинок, woff2 для шрифтов), lazy-load below-the-fold, preconnect к API, CDN.
Когда применять
Оптимизируйте по реальным данным юзеров (RUM), не только lab-тестам на гигабитном wifi. Performance-бюджеты в CI (bundle-size-action); вальте PR при превышении. Performance — это фича: каждый квартал спринт на неё. Lighthouse < 80 на mobile = оставляете платящих юзеров за бортом.
Типичные ошибки
Ловушки Lazy loading и code splitting: оптимизация на "100 Lighthouse" без реальных юзеров (другие боттлнеки); preload всего ("preconnect/prefetch-шум" жрёт bandwidth); JS-тяжёлые "loading"-state маскируют реальный баг (большой бандл); анимация layout-затрагивающих свойств (используйте transform + opacity для дешёвого GPU compositing). Профилируйте на реальных mid-range mobile, не на M-series Mac.