Ускорение магазина модной одежды SOGU в 15 раз

Проблема

Клиент обратился с запросом: "Очень медленная загрузка сайта. Задача ускорить его." Магазин модной одежды работал на InSales, но страницы открывались мучительно долго.

Мы провели аудит и обнаружили критичные проблемы. Страница товара загружалась 18.5 секунд, а полная загрузка всех ресурсов занимала 43 секунды. Причина — неоптимизированные видео весом до 18 MB в формате MP4 и MOV.

Наш подход

Мы не стали делать точечные правки. Провели комплексный аудит и составили план оптимизации по всем критичным точкам: изображения, видео, скрипты, стили.

Что сделали

1. Конвертация видео в WEBM

Главная проблема — видео в форматах MP4 и MOV. Файлы весили от 11 до 18 MB каждый. На странице товара таких видео было несколько, что приводило к огромной нагрузке.

Мы конвертировали все видео в формат WEBM с оптимальным битрейтом. Результат: файл 17.92 MB стал весить 3.43 MB — сжатие в 5 раз без потери визуального качества.

2. Отложенная загрузка видео

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

3. Ленивая загрузка изображений

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

4. Оптимизация размеров изображений

В каталоге использовались изображения в разрешении large_url (1000+ пикселей), хотя на экране они отображались размером 300×400 пикселей.

Мы заменили их на medium_url и настроили автоматическую конвертацию в формат WebP. Вес изображений уменьшился на 40-60% без видимой потери качества.

5. Отключение неиспользуемых библиотек

Проанализировали все подключенные скрипты. Обнаружили, что reCAPTCHA загружалась на всех страницах, хотя использовалась только в форме обратной связи. Отключили её на остальных страницах. Также убрали дублирующиеся CSS-файлы и неиспользуемые виджеты.

6. Настройка предварительной загрузки

Добавили preload для критичных ресурсов: логотип, шрифты, главный CSS-файл. Браузер теперь загружает их приоритетно, что ускоряет первое отображение контента.

Результаты

Страница	Метрика	До	После	Улучшение
Главная	Запросы	107	105	-2%
Передано данных	8.2 MB	3.1 MB	-62%
Ресурсы	10.9 MB	5.9 MB	-46%
Load Time	2.37 s	1.56 s	-34%
DOMContentLoaded	1.12 s	0.65 s	-42%
Каталог	Запросы	112	97	-13%
Передано данных	12.2 MB	2.2 MB	-82%
Ресурсы	14.6 MB	4.7 MB	-68%
Load Time	2.23 s	1.32 s	-41%
DOMContentLoaded	0.56 s	0.76 s	+36%
Товар	Запросы	216	92	-57%
Передано данных	179 MB	2.5 MB	-99%
Ресурсы	183 MB	5.4 MB	-97%
Load Time	18.48 s	1.21 s	-93%
DOMContentLoaded	2.39 s	0.60 s	-75%
Finish Time	43.25 s	1.50 s	-97%

Все замеры проводились с отключенным кешем в панели разработчика браузера (вкладка Network). Для реальных пользователей со включенным кешем скорость будет ещё выше.

Ключевые достижения

Страница товара — максимальное улучшение: снижение объема данных с 179 MB до 2.5 MB (-99%), время загрузки сокращено с 18.5 сек до 1.2 сек (-93%)
Все страницы показывают значительное уменьшение объема передаваемых данных (от -46% до -99%)
Время загрузки улучшено на всех страницах, особенно критично на странице товара
Количество запросов сократилось в два раза на странице товара

Техническая реализация

Конвертация видео

Все видео были конвертированы из форматов MP4, MOV, M4V в WEBM с оптимизированным битрейтом. Примеры сжатия:

Файл	MP4 размер	WEBM размер	Сжатие
4x5_grey_top	17.92 MB	3.43 MB	-81%
IMG_8601	18.09 MB	4.1 MB	-77%
4x5_grey_bottoms	16.77 MB	2.95 MB	-82%
4x5_white_bottoms	14.29 MB	2.9 MB	-80%

Методика замеров

Все замеры производились в режиме инкогнито с помощью Chrome DevTools (вкладка Network):

Открыли страницу в режиме инкогнито (Ctrl+Shift+N)
Зашли в инструменты разработчика (F12) → вкладка Network
Включили галочку "Disable cache"
Нажали кнопку "Clear" для очистки истории запросов
Перезагрузили страницу (Ctrl+R)
Дождались полной загрузки всех ресурсов

Выводы

Комплексная оптимизация показала впечатляющие результаты. Страница товара, которая раньше загружалась почти минуту, теперь открывается за полторы секунды. Это критически важно для конверсии — пользователи не ждут медленных сайтов.

Ключевой фактор успеха — работа с видео. Конвертация в WEBM и отложенная загрузка дали максимальный эффект. Вторая по важности оптимизация — ленивая загрузка изображений в каталоге.

Ваш сайт тормозит?

Проведем аудит и покажем, что можно улучшить. Обычно находим 5-10 критичных мест, которые тормозят загрузку. Напишите нам для бесплатной консультации.