TitanFittings: как оптимизировать скорость сайта электронной коммерции для достижения максимальной производительности и молниеносной загрузки
Отрасли: производство, промышленное оборудование
Миграция с Volusion на CS-Cart + Lightning
Сверхбыстрая загрузка страниц — зеленая зона в Google Page Speed Insight
Мгновенный поиск по магазину — менее 3 мс
Решение Lightning Commerce для создания стабильного и безопасного интернет-магазина.
Скорость сайта TitanFittings по данным Google PageSpeed
Главная страница
Страница категории
Страница продукта
О проекте
В 2023 году наш постоянный клиент доверил нам еще один свой проект.
Интернет-магазин TitanFittings продает гидравлические изделия под собственным брендом Titan по всей территории США.
Этот интернет-магазин включает:
2,000 категорий
20,000 товаров
Интернет-магазин Titanfittings был создан на Volusion CMS в 2014 году.
Основные проблемы, с которыми столкнулся клиент:
Неудобная CMS Volusion
Серьезные проблемы с кастомизацией Volusion в соответствии с бизнес-требованиями
Медленный поиск и фильтрация на витрине магазина
Сайт иногда зависает во время процессов импорта и экспорта
Старый дизайн сайта, требующий обновления
Мы работали как выделенная команда разработчиков.
Веб-разработчики потратили много часов на этот проект.
Более того, наши специалисты по SEO и контент-менеджеры также были вовлечены в этот проект.
Услуга выделенного разработчика - клиент нанял несколько специалистов Alt-team (тимлид, бэкенд и фронтенд программисты, SEO специалист, контент-менеджер). Мы работали в течение года как выделенная команда.
В результате мы получили настоящую модульную систему электронной коммерции. Финальный интернет-магазин имеет интеграции с этими сервисами:
Meilisearch - с открытым исходным кодом, молниеносный и гипер-релевантный поисковый движок, который улучшит ваш поисковый опыт.
ShipStation - веб-решение для доставки, которое упрощает процесс выполнения заказов для вашего интернет-бизнеса. ShipStation объединяет заказы более чем из 70 каналов электронной коммерции.
Наша команда
Факты об этом сайте электронной коммерции
Цели: почему клиент решил уйти с Volusion CMS?
У этого клиента есть 4 веб-сайта электронной коммерции, связанных с его основной сферой бизнеса, продажей фитингов из нержавеющей стали и гидравлических шлангов в офлайн и онлайн. У него есть 4 различные панели управления для всех этих веб-сайтов.
CMS CS-Cart позволяет управлять несколькими магазинами из одной панели администрирования. Вот почему клиент решил использовать CS-Cart для всех своих проектов в будущем.
Volusion CMS нельзя легко настроить, как того требует клиент. Но решение CS-Cart - гибкая платформа, у которой есть множество готовых дополнений, и любой разработчик может легко настроить эту CMS. Более того, это богатая функциональность система для электронной коммерции.
Цель клиента - получить более современный и красивый интернет-магазин, который будет иметь необходимые функции современной электронной коммерции: удобный интерфейс, адаптивный веб-дизайн, интеграция с платежными провайдерами клиента и службами доставки.
Одна из основных проблем для клиента - медленная загрузка веб-страниц на мобильных устройствах. Мы уже проинформировали клиента о нашем новом продукте, Lightning Commerce. Наш продукт увеличивает производительность веб-сайта до невероятных цифр, делает онлайн-магазин стабильным во время периода распродаж или быстро увеличивает трафик на веб-сайте и улучшает безопасность веб-сайта.
Мечта каждого владельца веб-сайта - сделать свой веб-сайт крайне популярным и получить от него выгоду: больше заказов, больше клиентов. Клиент ожидал увеличения трафика на веб-сайте после миграции с Volusion CMS на CS-Cart + Lightning Commerce.
Вызовы:с чем нам пришлось столкнуться в ходе веб-разработки
Мы не можем сказать, что этот проект был очень сложным для нашей команды. У нас обширный опыт в веб-разработке, и редко бывает случай, когда мы сталкиваемся с серьезными вызовами в наших проектах.
В течение нашей долгосрочной работы над этим проектом, наша команда столкнулась с различными небольшими проблемами, которые мы хотим отметить как незначительные вызовы для нас.
Процесс миграции CMS всегда является задачей с скрытыми подводными камнями. В этот раз мы столкнулись с вызовом перемещения данных клиентов с Volusion на CS-Cart. Как и любая система, Volusion CMS не предоставляет доступ к хэшам паролей. Конечно, мы обдумали эту проблему, и все пользователи получили электронные письма с информацией о том, что из-за переезда нашего сайта пользователю нужно обновить свой пароль.
Разработка супербыстрого поискового инструмента на витрине Медленный поиск был одной из основных проблем для клиента. Мы столкнулись с вызовом улучшения скорости поиска до менее чем 3 мс.
Статические веб-сайты быстры, и наша цель была достичь максимальной производительности веб-сайта с учетом большого количества страниц товаров в магазине.
Прогресс: насколько сайт быстрый и стабильный?
Результаты: быстрый интернет-магазин с панелью администратора на CS-Cart
Lightning Commerce
Мы запустили этот проект с помощью Lightning Commerce, который отличается высокой скоростью, высокой безопасностью и масштабируемостью.
Старый сайт загружался чрезвычайно медленно. Мобильная версия всегда находилась в красной зоне по Google Page Speed. Новый сайт работает быстро и находится в зеленой зоне как на десктопах, так и на мобильных устройствах.
Разработчики Alt-team смогли перенести все данные с Volusion на CS-Cart, включая:
клиентов;
заказы.
Клиент сам перенес продукты и категории продуктов, используя функцию импорта/экспорта CS-Cart, так как он решил реорганизовать все категории продуктов на своем новом интернет-магазине.
Все URL-адреса на старом сайте (Volusion) имели в конце .html.
Клиент решил создать новую структуру для категорий товаров и всех URL-адресов сайта.
Нашей задачей было правильно настроить 301 редирект. На сервере Vercel было настроено большое количество редиректов для сокращения времени загрузки страниц.
Некоторые 301 редиректы были настроены с помощью функции CS-Cart по умолчанию в админ-панели по многим причинам.
Быстрая загрузка страниц и отличный пользовательский опыт важны для крупных интернет-магазинов. Этот интернет-магазин постоянно увеличивает трафик.
Мы использовали ISR (инкрементальную статическую регенерацию) для страниц с контентом и CSR (рендеринг на стороне клиента) для оформления заказа и обработки заказов. Эти методы позволяют обновлять контент без необходимости повторного развертывания страницы, что приводит к улучшению производительности и безопасности, а также сокращению времени сборки.
Этот интернет-магазин имеет мгновенный поиск. Вы вряд ли найдете другие магазины с такой быстрой поисковой функцией или функцией сортировки/фильтрации.
Поиск по сайту является одной из слабых сторон любого интернет-магазина. Медленный поиск, сортировка или фильтрация характеристик продуктов обычно являются причинами высокого уровня отказов в магазине.
Мы используем интеграцию с сервисом Meilisearch для увеличения скорости поиска на этом интернет-магазине.
Мы используем наше решение Lightning Commerce для улучшения функций сортировки и фильтрации продуктов в магазине.
Был сторонний аддон для системы CS-Cart, который клиент купил на маркете, но аддон не был идеален для клиента, и наша задача заключалась в том, чтобы переписать весь код аддона, чтобы сделать его совместимым с CS-Cart.
Архитектура высокой доступности AWS
Этап 1.
Когда мы сделали фронтенд на NextJS и отделили его от CS-Cart, это значительно улучшило скорость загрузки страниц на витрине. Бэкенд на CS-Cart работал стабильно, и мы могли на этом остановиться и больше не улучшать скорость этого сайта. Но мы решили создать отказоустойчивую систему, чтобы предотвратить “падение” веб-сайта при большом количестве заказов в сезон высокого спроса, распродаж или активной рекламной кампании.
Этап 2.
Мы настроили хостинг Amazon с автоматическим масштабированием для бэкенда на CS-Cart, чтобы гарантировать доступность веб-сайта во время наибольшей нагрузки на бэкенд.
Если нагрузка на CS-Cart превышает 10%, дополнительный сервер мгновенно подключается для обработки запросов. AWS облако повышает отказоустойчивость системы, обеспечивая бесперебойную работу даже при высокой нагрузке или в периоды большого объема заказов.
Наша команда об этом проекте
Я была SEO-консультантом в процессе разработки. Я посмотрела их старый веб-сайт на Volusion CMS и провела базовый SEO-аудит, в котором перечислила все требования для интернет-магазинов. Когда разработчики создавали новый веб-сайт на CS-Cart, они учли все требования SEO для интернет-магазинов.
Это один из моих лучших проектов. Я приложил все усилия, чтобы довести его до идеального варианта быстрого и мощного интернет-магазина с моментальным поиском. Фильтры работают с молниеносной скоростью. Стабильность онлайн-магазина просто магическая. Я даже не могу представить сценарий, при котором этот сайт мог бы рухнуть.
Я не могу сказать, что я был вовлечен в разработку этого проекта на постоянной основе, но я внес значительный вклад в процесс разработки. Я обсуждал с клиентом те области, в которых я был единственным специалистом, и помогал организовать работу между full-stack разработчиком, фронтенд разработчиком и SEO-консультантом. Проект был интересным для меня, так как в нем было много нетривиальных задач.
Клиент о компании Alt-team
Большое спасибо за работу. Ребята, спасибо вам огромное! Это был долгий путь, но мне нравится результат!
Вы хотите иметь молниеносно быстрый интернет-магазин?
Our email is manager@alt-team.com
Please, do not hesitate to contact us via e-mail or use the form below if you need a quote for your E-commerce project or have any questions about our products or services. We will be glad to answer you in a short time.