Оптимизация React/Next.js: Как мы ускорили сайт в 3 раза
Борьба за Core Web Vitals: Server Components, динамические импорты и правильная мемоизация.
Проблема медленного Frontend'а
Много JS = долгий TTI (Time to Interactive). Мы получили проект, который грузил 2MB бандла на мобильных устройствах. Сайт тормозил, конверсия падала.
Шаг 1: React Server Components (RSC)
Мы перевели тяжелые компоненты (карусели, списки статей) на Server Components в Next.js 14. Это позволило рендерить HTML на сервере и не отправлять JavaScript-код библиотек клиенту.
Шаг 2: Динамические импорты
Тяжелые библиотеки (например, графики ECharts или PDF-генераторы) мы обернули в next/dynamic. Теперь они загружаются только тогда, когда пользователь доскроллил до нужного блока.
Результаты
- LCP (Largest Contentful Paint) снизился с 4.5с до 1.2с.
- Оценка Google PageSpeed выросла с 45 до 95 баллов.
Где это применить в проекте
Если задача для вас актуальна, переходите в услугу: там уже формат работ, сценарий внедрения и следующий шаг для проекта.
Разработка web и mobile приложений
Web и mobile разработка на заказ: сайты, кабинеты, сервисы и приложения под ваши процессы.
Перейти к услугеТехническая поддержка сайтов и приложений
Поддержка сайтов, кабинетов и приложений по SLA: инциденты, релизы и развитие.
Перейти к услугеЧто почитать дальше
Разработка web и mobile приложений на заказ: как запустить MVP и не сжечь бюджет
Практический разбор: как запускать web/mobile продукт так, чтобы первая версия не стала дорогим тупиком.
NestJS vs Express: Почему мы выбрали фреймворк с архитектурой
Конец лапшекоду. Разбираем плюсы Dependency Injection и строгой структуры в NestJS.
Хотите решить похожую задачу?
Подскажем, с чего начать: разработка, поддержка, инфраструктура или внедрение. Обсудим задачу, ограничения и следующий практический шаг для вашего проекта.