Google с 2025 года усилил влияние Core Web Vitals на ранжирование, а в 2026 добавил INP вместо FID и ужесточил пороги LCP до 2 секунд. React-приложения без SSR и ленивой загрузки теряют 40-60% органического трафика из-за низких баллов PageSpeed. Команда ZORKA доводит метрики до 95-100 баллов через серверный рендеринг Next.js, code-splitting на уровне роутов и оптимизацию кода с помощью Lighthouse CI в пайплайне сборки.
Что изменилось в Core Web Vitals и почему старые методы больше не работают
Google заменил FID на INP (Interaction to Next Paint) и снизил порог хорошего LCP с 2,5 до 2 секунд. INP измеряет задержку между кликом и визуальным откликом: если JS блокирует поток больше 200 мс, сайт попадает в красную зону. Для React-приложений это означает необходимость отказа от блокирующих useEffect, тяжелых синхронных вычислений и монолитных бандлов.
Типичная ошибка: загрузка всего приложения одним чанком 800-1200 КБ. При таком подходе браузер парсит и компилирует JS 3-5 секунд на мобильных устройствах, LCP вылетает за 4 секунды, а PageSpeed падает до 30-40 баллов. ZORKA разбивает приложение на роут-чанки по 80-150 КБ, использует динамический импорт React.lazy для модальных окон и тяжелых виджетов, встраивает критический CSS inline и переносит аналитику в Web Worker.
Измеряйте INP в production через RUM (Real User Monitoring) с помощью библиотеки web-vitals. Если медиана превышает 150 мс, проверьте event listeners и уберите тяжелые операции из обработчиков кликов в requestIdleCallback.
Next.js SSR и гибридный рендеринг: как убрать блокирующий JS с первого экрана
Классический CSR (Client-Side Rendering) в Create React App отправляет пустой HTML с тегом root, браузер ждет загрузки JS, парсинга, выполнения и только потом рисует контент. Это гарантирует LCP 3-5 секунд. Next.js App Router с Server Components рендерит разметку на сервере, отправляет готовый HTML и гидратирует интерактивность постепенно. Результат: LCP падает до 0,8-1,2 секунды, TTI снижается на 60%.
ZORKA использует гибридную стратегию: статические страницы через SSG (getStaticProps), динамические данные через Streaming SSR с Suspense boundaries, а формы и модалки через Client Components. Критический путь рендеринга сокращается до 400-600 мс, браузер не блокируется на парсинге JS. Дополнительно подключаем Partytown для изоляции Google Tag Manager и Яндекс.Метрики в Web Worker, чтобы аналитика не влияла на INP.
Используйте loading='lazy' для изображений за первым экраном, fetchpriority='high' для hero-баннера и preload для критических шрифтов в формате woff2. Это снижает LCP на 200-400 мс без изменения логики.
Code-splitting, tree-shaking и удаление мертвого кода: как уменьшить JS на 70%
Webpack и Vite по умолчанию включают в бандл неиспользуемые экспорты из библиотек, полифиллы для старых браузеров и дублирующиеся зависимости. Lodash целиком весит 70 КБ, хотя используется 3 функции. Moment.js тащит за собой 230 КБ локалей, которые никогда не загружаются. ZORKA заменяет тяжелые библиотеки на легкие аналоги: lodash на lodash-es с поштучным импортом, moment на date-fns (2 КБ на функцию), react-icons на lucide-react (tree-shakeable SVG).
Дальше настраиваем SplitChunksPlugin: vendor-чанк для React и ReactDOM (кешируется навсегда), отдельные чанки для роутов, динамический импорт для chart.js и PDF-генераторов. Включаем Terser с drop_console и dead_code elimination, минифицируем CSS через cssnano, сжимаем статику Brotli на уровне 11. Итоговый main.js сокращается с 900 КБ до 180 КБ, время парсинга на мобильном CPU падает с 4,2 до 0,9 секунды.
Подключите Webpack Bundle Analyzer и найдите самые тяжелые зависимости. Если библиотека весит больше 50 КБ, проверьте, есть ли более легкая альтернатива или можно ли написать функцию руками за 20 строк.
WebP, AVIF и variable fonts: как снизить вес медиа на 80% без потери качества
JPEG и PNG весят в 3-5 раз больше современных форматов. Фотография 1920x1080 в PNG весит 2,8 МБ, в JPEG - 450 КБ, в WebP - 180 КБ, в AVIF - 90 КБ при идентичном визуальном качестве. Next.js Image автоматически конвертирует изображения в WebP/AVIF, генерирует srcset для адаптивной загрузки и добавляет loading='lazy' для контента ниже fold. ZORKA дополнительно использует sharp для ресайза на сервере, CloudFlare CDN для кеширования и ImageOptim для сжатия исходников.
Шрифты грузятся через font-display: swap, чтобы браузер сразу показал fallback, а не ждал загрузки WOFF2. Variable fonts заменяют 6-8 файлов разных начертаний одним файлом с осью wght от 300 до 700. Inter Variable весит 110 КБ вместо 480 КБ для полного набора статических шрифтов. Подгружаем только latin subset, если кириллица не нужна, используем preload для критических начертаний и self-host вместо Google Fonts, чтобы избежать блокирующего запроса к стороннему домену.
Используйте srcset с дескрипторами w и sizes для адаптивных изображений. Браузер загрузит версию 800px для мобильного экрана вместо оригинала 3000px, экономия трафика составит 90%.
Lighthouse CI и автоматические проверки: как не откатиться назад после релиза
Разработчик добавил тяжелую библиотеку анимаций, PageSpeed упал с 95 до 62 баллов, но это заметили только через неделю после релиза, когда конверсия просела на 18%. ZORKA встраивает Lighthouse CI в GitLab/GitHub Actions: каждый merge request автоматически прогоняется через Lighthouse, если Performance Score падает ниже 90 или LCP растет больше чем на 200 мс, пайплайн падает с ошибкой и код не попадает в main.
Дополнительно настраиваем Sentry Performance Monitoring для отслеживания Core Web Vitals в production: получаем перцентили LCP, INP, CLS по странам и устройствам, видим, какие компоненты тормозят рендеринг, находим медленные API-запросы. Раз в месяц прогоняем полный аудит через WebPageTest с эмуляцией 3G на реальном Moto G4, фиксируем результаты в Confluence и планируем оптимизации на следующий спринт.
Установите бюджет производительности: main.js не больше 200 КБ, total JS не больше 500 КБ, LCP не больше 1,5 секунды. Интегрируйте проверку в CI через bundlesize или lighthouse-ci, чтобы автоматически блокировать регрессии.
- Монолитный бандл 900 КБ: парсинг 4 секунды на мобильном CPU
- Client-Side Rendering: пустой HTML, LCP за 4 секунды
- Lodash, moment.js целиком: 300 КБ мертвого кода
- PNG и JPEG без сжатия: 3-5 МБ изображений на страницу
- PageSpeed 35-50 баллов: потеря 40% органического трафика
- Next.js SSR: готовый HTML, LCP 0,9 секунды
- Code-splitting по роутам: 80-150 КБ на чанк, ленивая загрузка модалок
- Tree-shaking и замена на легкие библиотеки: бандл 180 КБ
- WebP/AVIF через Next.js Image: 90 КБ вместо 2,8 МБ
- PageSpeed 95-100 баллов: рост конверсии на 22-35%
- Lighthouse-аудит текущего сайта: метрики, бутылочные горлышки, приоритеты оптимизации
- Анализ бандла через Webpack Bundle Analyzer: поиск тяжелых зависимостей и дубликатов
- Выбор стратегии рендеринга: SSR, SSG или гибридный подход с ISR
- Настройка Lighthouse CI в GitLab/GitHub Actions для автоматических проверок
- Миграция на Next.js App Router: Server Components, Streaming SSR, Suspense boundaries
- Code-splitting: динамический импорт React.lazy, разбивка роутов, vendor-чанк для библиотек
- Замена тяжелых библиотек: lodash-es, date-fns, lucide-react вместо react-icons
- Оптимизация изображений через Next.js Image: WebP/AVIF, srcset, loading='lazy'
- Настройка шрифтов: variable fonts Inter, font-display: swap, preload критических начертаний
- Изоляция аналитики в Web Worker через Partytown: Google Tag Manager, Яндекс.Метрика
- Прогон через WebPageTest на реальных устройствах: Moto G4, iPhone 8, 3G-соединение
- Проверка Core Web Vitals в Sentry Performance: перцентили LCP, INP, CLS по регионам
- Настройка бюджета производительности: ограничения на размер JS, CSS, изображений
- Финальный аудит Lighthouse CI: фиксация PageSpeed 95-100 баллов, документация результатов
Часто задаваемые вопросы
Можно, но потребуется гибридный подход: статический контент через SSG, интерактивные виджеты через динамический импорт React.lazy, тяжелые библиотеки типа chart.js или mapbox загружаются только при клике. ZORKA для B2B-порталов с дашбордами использует skeleton screens на SSR, а данные подгружает после гидратации через Suspense. Результат: LCP 1,2 секунды, PageSpeed 98 баллов, графики появляются через 200 мс после клика.
Настройте A/B-тест: 50% пользователей получают оптимизированную версию, 50% старую. Отслеживайте метрики через Google Analytics 4: Add to Cart, Purchase, средний чек, bounce rate. Для e-commerce улучшение LCP с 4 до 1,5 секунды дает рост конверсии на 20-30%, для B2B-порталов снижение INP с 400 до 150 мс увеличивает количество заполненных форм на 15-25%. ZORKA фиксирует базовые метрики до старта, повторно измеряет через 2 недели после релиза и считает ROI оптимизации.
Да, если текущий PageSpeed ниже 60 баллов и вы теряете органический трафик. Миграция занимает 2-3 недели: перенос роутов в app/ или pages/, настройка SSR для критических страниц, рефакторинг useEffect на Server Components. Выигрыш: LCP сокращается в 3-4 раза, бандл уменьшается на 40-60%, SEO-позиции растут на 15-30% через 2 месяца. ZORKA проводит такую миграцию поэтапно: сначала лендинг и каталог на Next.js, потом личный кабинет, чтобы минимизировать риски.
Интегрируйте Lighthouse CI в пайплайн: каждый merge request проверяется на Performance Score, если падение больше 5 баллов или LCP растет на 200 мс, CI блокирует слияние. Установите бюджет производительности через bundlesize: main.js не больше 200 КБ, total JS не больше 500 КБ. ZORKA дополнительно настраивает Sentry Performance Monitoring: получаем алерты в Slack, если медиана INP превышает 200 мс или CLS вырастает выше 0,1. Раз в квартал проводим полный аудит через WebPageTest и обновляем приоритеты оптимизации.
Планируете аудит производительности или миграцию на Next.js?
Команда ZORKA проведет Lighthouse-аудит текущего сайта, предложит дорожную карту оптимизации под Core Web Vitals 2026 и подготовит фиксированную смету за 2 дня.