Монолітний бандл гальмує старт: як ми це виправляємо

Типова ситуація: React-застосунок збирається в єдиний бандл, і навіть на сторінці входу браузер завантажує код адмінки з графіками та редакторами. TTI (Time to Interactive) на мобільних досягає 5 секунд, LCP іде в червону зону. Один наш клієнт зіткнувся з цим: після впровадження lazy loading початковий бандл скоротився з 900 KB до 270 KB — на 70%, а TTI впав з 4.2 до 2.1 секунди. Завдяки цьому конверсія зросла на 15%, що зекономило близько $300 на місяць на рекламі.

Наш досвід — понад 50 проєктів за останні кілька років. У цій статті даємо перевірені методи: від базового React.lazy до комбінованих рішень з IntersectionObserver. Усі підходи перевірені на продакшені.

Навіщо потрібен lazy loading?

Відкладене завантаження зменшує розмір початкового бандла, прискорює TTFB та TTI, знижує витрати трафіку. Ми гарантуємо зростання метрик Core Web Vitals після впровадження.

Як реалізувати lazy loading компонентів у React?

React.lazy та Suspense

Це стандартний дует для відкладеного завантаження компонентів. React.lazy визначає компонент як динамічний імпорт, Suspense показує fallback до завершення завантаження.

import { lazy, Suspense } from 'react' const HeavyChart = lazy(() => import('@/components/HeavyChart')) const DataTable = lazy(() => import('@/components/DataTable')) function Dashboard() { return ( <div> <Suspense fallback={<ChartSkeleton />}> <HeavyChart data={chartData} /> </Suspense> <Suspense fallback={<TableSkeleton />}> <DataTable rows={rows} /> </Suspense> </div> ) } 

Suspense ловить проміс від lazy-компонента і показує fallback. Як тільки чанк завантажено — рендерить компонент. Це краще, ніж ручний асинхронний import, оскільки інтегрується з механізмом очікування React.

Іменовані експорти: обгортка через .then

Якщо компонент експортується іменовано, потрібен проміжний модуль:

const BarChart = lazy(() => import('@/components/charts').then(module => ({ default: module.BarChart, })) ) 

Коли використовувати IntersectionObserver?

Для компонентів нижче fold — наприклад, карта внизу сторінки. Завантажуємо лише коли користувач прокрутить до блока. Такий підхід економить до 40% трафіку на важких компонентах.

// hooks/useLazyComponent.ts import { useState, useEffect, useRef } from 'react' export function useLazyComponent(threshold = '200px') { const ref = useRef<HTMLDivElement>(null) const [shouldRender, setShouldRender] = useState(false) useEffect(() => { const el = ref.current if (!el) return const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setShouldRender(true) observer.disconnect() } }, { rootMargin: threshold } ) observer.observe(el) return () => observer.disconnect() }, [threshold]) return { ref, shouldRender } } 

const HeavyMap = lazy(() => import('@/components/Map')) function ContactPage() { const { ref, shouldRender } = useLazyComponent('400px') return ( <div> <ContactForm /> <div ref={ref} style={{ minHeight: 400 }}> {shouldRender ? ( <Suspense fallback={<MapSkeleton />}> <HeavyMap lat={53.9} lng={27.5} /> </Suspense> ) : ( <MapSkeleton /> )} </div> </div> ) } 

Lazy loading зображень

Найпростіший спосіб — нативний атрибут loading="lazy":

<img src={product.image} alt={product.title} loading="lazy" decoding="async" width={400} height={300} /> 

Для тонкого контролю використовуємо кастомний хук із IntersectionObserver (див. вище). Він дозволяє задати rootMargin і відображати скелетон до повного завантаження.

Next.js dynamic import

Обгортка next/dynamic спрощує відкладене завантаження і вимикає SSR:

import dynamic from 'next/dynamic' const RichTextEditor = dynamic( () => import('@/components/RichTextEditor'), { loading: () => <EditorSkeleton />, ssr: false } ) 

Порівняння метрик до та після lazy loading

Що входить у нашу роботу з впровадження lazy loading

1. Аудит бандла: використовуємо webpack-bundle-analyzer, знаходимо кандидатів.
2. Проектування стратегії завантаження: які компоненти відкласти, які завантажувати за видимістю.
3. Реалізація: React.lazy, Suspense, кастомні хуки, next/dynamic.
4. Тестування: перевірка чанків, fallback-UI, гідратації.
5. Документація для команди.
6. Підтримка після впровадження.

Оптимальний вибір методу залежить від сценарію. React.lazy з Suspense підходить для більшості випадків, коли компонент невеликий і не вимагає контролю видимості. IntersectionObserver дає гнучкість, але потребує більше коду — його варто застосовувати для важких компонентів нижче fold або при обмеженні трафіку. Next.js dynamic import зручний для SSR-залежних бібліотек. Наш досвід показує, що комбінація цих підходів дає найкращий результат: до 80% скорочення бандла та прискорення завантаження вдвічі.

Зв'яжіться з нами — ми проведемо безкоштовний аудит вашого бандла і запропонуємо оптимальне рішення. Отримайте консультацію вже сьогодні і скоротите розмір бандла вдвічі.

Які компоненти найвигідніше відкласти?

Аналіз бандла часто виявляє великі бібліотеки: графіки (Chart.js, D3), текстові редактори (Quill, Tiptap), карти (Leaflet), важкі UI-таблиці. Їх виносимо в lazy chunks. Також дивимося на сторінки з низькою відвідуваністю — їх компоненти завантажуємо лише за необхідності. Метод гарантує зниження TTFB та покращення Google PageSpeed Insights.