Ускорение сайта на Next.js и React

Что оптимизирую

• Изображения: next/image, современные форматы, правильные размеры и приоритет загрузки
• Шрифты: next/font, подмножества, отсутствие сдвигов текста
• JavaScript-бандл: разделение кода, ленивая загрузка, удаление лишних зависимостей
• Рендеринг: перевод страниц на SSG/ISR, серверные компоненты вместо клиентских
• Сторонние скрипты: Метрику, чаты, виджеты — загрузку без блокировки страницы
• Кеширование страниц, данных и статики, заголовки Cache-Control
• Ответ сервера: медленные запросы к базе и API
• Сдвиги макета (CLS) из-за баннеров, картинок и шрифтов

Какие задачи бизнеса решает

• Сайт медленно открывается с телефона, посетители уходят до загрузки
• PageSpeed Insights показывает красные показатели
• После добавления виджетов и скриптов сайт стал тормозить
• Нужно понять, что конкретно замедляет сайт и сколько стоит это исправить

Core Web Vitals: что измеряем

LCP — как быстро появляется основной контент страницы. INP — насколько быстро страница реагирует на клики и ввод; в 2024 году эта метрика заменила FID. CLS — насколько «прыгает» вёрстка при загрузке. Эти показатели Google учитывает при ранжировании, а посетители чувствуют их напрямую: медленный первый экран и задержка при нажатии на кнопку снижают количество заявок.

Частые причины медленного Next.js

Изображения без оптимизации и без указанных размеров, весь проект помечен как клиентский ('use client'), тяжёлые библиотеки грузятся на каждой странице, данные запрашиваются на клиенте после загрузки, страницы рендерятся на сервере при каждом запросе, хотя могли бы кешироваться. Отдельная тема — сторонние скрипты: чат, виджеты и счётчики нередко весят больше самого сайта.

Если сайт на React без Next.js

Для SPA на React (Vite, Create React App) тоже есть что оптимизировать: разделение кода по маршрутам, ленивая загрузка, размер бандла, изображения. Если же проблема в том, что поисковики плохо видят контент одностраничного приложения, обсудим переход на Next.js с серверным рендерингом.

Сторонние скрипты и Метрика

Метрику, чаты и виджеты подключаю так, чтобы они не блокировали отрисовку страницы. От Вебвизора и тяжёлых виджетов иногда лучше отказаться на мобильных — решение принимаем вместе, потому что это компромисс между аналитикой и скоростью.

Чего не обещаю

Не гарантирую конкретную цифру в PageSpeed: она зависит от контента, сторонних сервисов и хостинга. Обещаю найти реальные причины замедления, исправить то, что возможно в коде, и показать измеримую разницу до и после.

Сроки и стоимость

Аудит скорости — от 3 000 ₽, обычно занимает один-два дня. Стоимость исправлений зависит от найденных причин: часть правок — это часы работы, переделка архитектуры рендеринга — больше. Оценка идёт вместе с отчётом аудита.

Примеры функционала

• Замеры до и после: лабораторные (Lighthouse) и полевые данные, если они есть
• Отчёт с конкретными причинами, а не общими советами
• Правки небольшими этапами с проверкой, что ничего не сломалось
• Приоритет на то, что даёт наибольший эффект

Как проходит разработка

1. 1.Замеряю текущую скорость ключевых страниц на мобильных и десктопе
2. 2.Анализирую бандл, сетевые запросы, рендеринг и ответ сервера
3. 3.Отдаю отчёт с причинами и планом правок по приоритету
4. 4.Вношу правки в код и конфигурацию
5. 5.Повторяю замеры и сравниваю результат

Используемые технологии

FAQ