Как оптимизировать загрузку страницы на React?

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

Уменьшить бандл

• Code splitting: React.lazy + Suspense по маршрутам и тяжёлым виджетам (редактор, графики).
• Анализ бандла (rollup-plugin-visualizer): выкинуть/заменить тяжёлые зависимости (moment → date-fns, lodash → точечные импорты).
• Tree-shaking (ESM, sideEffects: false), минификация, современный target без лишних полифиллов.
• Динамический import() для редких библиотек (PDF, редактор).

Ускорить доставку

• gzip/brotli, HTTP/2, CDN, долгое кеширование хешированных ассетов.
• <link rel="preconnect"> к API/шрифтам, preload критичных ресурсов, prefetch следующего маршрута.
• Шрифты: font-display: swap, subset; изображения: WebP/AVIF, размеры, loading="lazy", fetchpriority для LCP-картинки.

Отдать контент раньше

• SSR/SSG (Next.js, Remix): пользователь видит HTML до загрузки JS — резко лучше LCP и SEO.
• Стриминговый SSR + Suspense: каркас приходит сразу, медленные блоки позже.
• Server Components: код серверных компонентов вообще не едет в браузер.

Меньше работы на клиенте

• Не грузить данные каскадом (запрос → запрос): параллелить, префетчить на уровне маршрута, кешировать (React Query).
• Не рендерить невидимое: виртуализация списков, отложенный рендер вкладок/модалок.
• Следить за INP/TBT: тяжёлые вычисления — в Web Worker.

Как действовать

Сначала измерить: Lighthouse/Web Vitals (LCP, INP, CLS) и bundle analyzer — потом оптимизировать конкретное узкое место.

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

Измерить (Lighthouse, Web Vitals, анализатор бандла), затем: code splitting по маршрутам (React.lazy), удаление тяжёлых зависимостей, сжатие/CDN/кеширование, preload и оптимизация шрифтов и изображений, SSR/SSG или серверные компоненты для раннего контента, параллельные запросы с кешем, виртуализация и Web Workers против блокировки главного потока.