Добились скорости интернет-магазина о которой мечтают владельцы магазинов на inSales
Когда мы начали работать с сайтом на платформе inSales, главная проблема была очевидной: скорость загрузки была неудовлетворительной. По умолчанию платформа не предоставляет оптимальную производительность, и обычный пользователь практически не может на это повлиять. Однако стандартная скорость была недостаточной для комфортного использования ресурса.
Начальное состояние
Сайт работал медленно. Были видны явные проблемы с рендерингом, некоторые фотографии не загружались вовсе, хотя технически изображение присутствовало на сервере, часть по нашей вине в том числе. Это была комбинация ошибок в коде разработки и отсутствия оптимизации.
Когда сайт работает с правильной скоростью, пользователь получает настоящее удовольствие от навигации. Возникает уважение к проекту, так как видно, что команда серьезно поработала над качеством.
Этапы оптимизации
Первый этап: исправление ошибок и оптимизация существующего кода
Работа началась примерно полтора-два года назад. Первый этап заключался в исправлении ошибок в собственном коде и базовой оптимизации:
- Установка лимитов на количество загружаемых товаров.
- Оптимизация конструкций на платформе.
Второй этап: внедрение кэширования
Затем произошел значительный скачок в улучшении производительности благодаря кэшированию. Это включало:
- Упрощение жидких (Liquid) конструкций.
- Вынос рендеринга из бэкенда на фронтенд.
Раньше товары в слайдерах выводились через серверный код. Теперь они отображаются с помощью JavaScript: сайт загружается, выполняется запрос к серверу inSales, товары подгружаются и рендерятся на стороне клиента. Это значительно уменьшило время отдачи страницы сервером.
Третий этап: оптимизация изображений с помощью CDN
Подключение сервиса Stackpath (Stackdir) дало дополнительный прирост производительности. Основные преимущества:
- Автоматическое сжатие фотографий.
- Интеллектуальная доставка разных размеров изображений в зависимости от экрана устройства.
- Конвертация в формат WebP для современных браузеров.
- Распределение контента между несколькими серверами.
Четвертый этап: оптимизация структуры кода
Была выполнена эффективная оптимизация: код из виджетов был вынесен в отдельные общие файлы CSS и JavaScript. Когда код находился в личных документах каждой страницы, он загружался вместе с каждым документом, увеличивая его размер и замедляя рендеринг.
Пятый этап: переделка корзины
Корзина товаров была полностью переделана для улучшения отзывчивости. Тесты показали, что код работает достаточно хорошо относительно всего сайта, потребляя всего 1–2 мегабайта памяти. Оптимизация стала возможной благодаря тому, что в коде отсутствуют сложные операции с данными и тяжелые алгоритмы.
Ключевые метрики и результаты
Мониторинг производительности выполняется по двум основным системам:
- Метрики внутри платформы inSales (время рендеринга виджетов).
- Google PageSpeed Insights (система анализа Core Web Vitals).
Динамика улучшения LCP (Largest Contentful Paint)
Метрика LCP показывает время рендеринга самого крупного контента страницы:
- В начале года: 4.1 секунды.
- После первых оптимизаций: 3.5 секунды.
- После внедрения кэширования и выноса рендеринга: 3.0 секунды.
- Текущее значение: примерно 2.3 секунды.
Итого: улучшение на 1.8 секунды, что составляет примерно 44% ускорения от исходного значения.
Общее улучшение производительности
Если рассматривать общую скорость загрузки сайта в комплексе:
- Примерный общий прирост производительности: 20–30% ускорения, в лучших случаях до 40%.
- Субъективное ощущение: сайт стал работать намного быстрее.
Вынесение общего кода в отдельные файлы дало значительное сокращение веса страниц:
- Главная страница: минус 300 килобайт.
- Каталог товаров: минус 100–150 килобайт.
- Карточка товара: минус 100 килобайт.
Потенциал дальнейшей оптимизации
На текущий момент основная структура страниц уже оптимизирована. Дальнейшие улучшения возможны в следующих направлениях:
- Оптимизация скриптов и сторонних библиотек.
- Внедрение автоматической минификации кода (может сэкономить до 50% размера).
- Поиск и устранение локальных узких мест в коде.
Теоретически можно выиграть еще 200–400 миллисекунд, но это потребует значительных усилий и даст минимальный прирост в ощущениях пользователя.
Ускорения сайтов на inSales
На основе накопленного опыта мы разработали комплексный метод ускорения сайтов на платформе inSales. Она включает в себя:
- Аналитику и диагностику проблем производительности.
- Исправление ошибок в существующей логике кода.
- Удаление лишних виджетов и внедрение кэширования.
- Вынос динамических элементов (слайдеры) в JavaScript.
- Настройку CDN для автоматического сжатия и конвертации изображений.
- Удаление тяжелых и ненужных расширений.
Заключение
Оптимизация сайта на inSales — это постоянный процесс, требующий анализа и комплексного подхода. Даже небольшие улучшения в каждом направлении в совокупности дают заметный результат, который влияет не только на метрики, но и на лояльность ваших покупателей.