Как мы ускорили сайт клиента на 80%
5 ноября 2024 г.
Кейс оптимизации производительности для e-commerce проекта
Вводные
В середине осени к нам обратился клиент — крупный e-commerce проект с десятками тысяч товаров и высокой рекламной нагрузкой. Основной трафик шёл с мобильных устройств, где сайт загружался за 6–8 секунд. Конверсия падала, отказы росли.
Их внутренняя команда была перегружена фичами. На оптимизацию просто не хватало времени. Мы подключились как внешний партнёр и за две недели довели сайт до уровня Lighthouse 90+.
Цели
Перед нами стояли конкретные задачи:
- Уменьшить LCP (Largest Contentful Paint) и TTFB
- Ускорить первую визуальную загрузку
- Снизить вес страницы и число блокирующих запросов
- Повысить техническую оценку Google PageSpeed на мобильных
Важно: не нарушить текущую функциональность, не ломать интеграции и не усложнять поддержку.
Этапы оптимизации
1. Аудит производительности
Мы начали с замеров. Использовали Google Lighthouse, WebPageTest, Chrome DevTools. Выявили проблемные зоны:
- Слишком много third-party скриптов (чаты, аналитика, отзывы)
- Неиспользуемый CSS из старых компонентов
- Глобальные библиотеки вроде Moment.js и jQuery в бандле
- Изображения без сжатия, без WebP и без lazy-loading
2. Упрощение и декомпозиция
Удалили ненужные зависимости. Разделили страницу на изолированные зоны — карточки, фильтры, рекомендации — и перевели их на динамический импорт. Контент «ниже первого экрана» стал загружаться асинхронно.
Вместо Moment.js — Day.js. Вместо тяжёлых каруселей — легковесные компоненты на IntersectionObserver. Всё это дало ощутимый прирост.
3. SSR и критический CSS
Серверная генерация (Nuxt SSR) позволила отрисовывать HTML сразу, без задержки. Для CSS использовали Tailwind с PurgeCSS и встроили критический CSS в <head>. Это сократило время до первого отрисованного контента.
4. Изображения и кеширование
Мы конвертировали все изображения в WebP, использовали srcset и loading="lazy". В дополнение настроили Cloudflare как CDN, активировали кеширование и заголовки Cache-Control.
Результаты
После деплоя мы сразу увидели эффект:
- Время загрузки на мобильных сократилось с ~6,5 до 1,3 секунд
- LCP упал до 1.4 секунды
- TTFB снизился с 900 мс до 200 мс
- Оценка Google PageSpeed на мобильных выросла с 42 до 92
Пользователи начали видеть контент почти сразу, отказов стало меньше, а конверсии — выше.
Выводы
Большинство проблем производительности — это не «тяжёлый сайт», а набор мелких упущений: лишние скрипты, неоптимизированные картинки, неоправданные блокировки. Современный стек позволяет решать это системно.
Мы не трогали CMS, не меняли архитектуру и не требовали редизайна. Всё решается точно и поэтапно.
Нужна оптимизация?
Если ваш сайт:
- грузится дольше 3 секунд,
- теряет мобильный трафик,
- плохо индексируется или получает штрафы в PageSpeed —
пора что-то менять.
📩 Свяжитесь с нами — сделаем технический аудит бесплатно и предложим решение без переписывания всего проекта.
Готовы обсудить ваш проект?
Оставьте заявку, и мы свяжемся с вами в течение дня
