Обновление и оптимизация интернет-магазина Glossary

Начало работы

Среди первичных проблем интернет-магазина на момент обращения к нам были:

• устаревший внешний вид;
• плохой UX и UI-дизайн;
• проблемы в функционале.

Проведенные нашей командой аудиты, выявили ряд проблем с загрузкой страниц:

• подключенный композитный кэш конфликтовал с одним компонентом;

• в консоли были обнаружены ошибки;
• страница генерировалась сервером медленно из-за отладочной информации в коде;
• на сайте присутствовали изображения без оптимизации;
• видео в Youtube-плеере тормозили загрузку страницы;
• присутствовали 2 различные версии jQuery;
• множество JS-библиотек;
• страницы каталога генерировали 12 (!) тысяч запросов.

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

Цели проекта

Комплекс работ по сайту проводился совместно с компанией Promodo. Наши партнеры из Промодо занялась разработкой макетов, маркетингом и SEO. На нас лежала ответственность за оптимизацию сайта, расширение возможностей и верстке страниц.

Как изменился GLOSSARY 

Новый дизайн и верстка

Было произведено обновление верстки на страницах каталога, карточки товара, корзины и оформления заказа по предоставленным макетам. Использование техники верстки Pixel Perfect, позволило сайту приобрести вид, идентичный созданным макетам, пиксель в пиксель. 

Frontend-разработчик в паре с программистом изменили меню для корректного отображения на любых современных устройствах и комфортного использования.

Работы по дизайну шли параллельно с добавлением функционала на вышеперечисленных страницах. На этом этапе было проведено множество тестов для устранения багов и исправления некорректной работы сайта.

Важным шагом в работе над проектом стала адаптивность. Мы сверстали шаблоны под современные размеры экранов для ПК, мобильных и планшетных устройств:

• 320 пикс;
• 768 пикс;
• 1024 пикс;
• > 1024 пикс.

Ускорение работы

По результатам проведенных тестов мы обнаружили все причины, влияющие на производительность интернет-магазина. Этими данными мы поделились с GLOSSARY и предложили варианты по увеличению скорости загрузки сайта.

Предыдущие программисты написали компонент каталога, который и послужил главной причиной. Было обнаружено, что производительность напрямую зависит от количества товарных позиций в разделе. Из-за этого страницы генерировали в совокупности более 12 000 запросов.

Мы заменили этот компонент на стандартный и скорость загрузки существенно уменьшилась. Но, решив не останавливаться на достигнутом, наша команда разработчиков также включила кеширование компонента. По итогу количество запросов сократилось почти в 200 раз, а скорость загрузки самой медленной страницы уменьшилась в 40 раз.

Расширение функционала

Помимо дизайна и оптимизации сайт приобрел следующий функционал:

• оформление заказа на сайте;
• выбор подходящих способов доставки;
• расчет итоговой стоимости стал включать в себя скидки, промо-акции, промокоды, участие в дисконтной программе и доставку;
• онлайн-оплата через сервис FONDY;
• добавление «Корзины» и раздела «Избранное»;
• интерактивный слайдер на Главной странице;
• адаптивные фильтры и сортировка товаров на страницах каталога.

Повышение юзабилити

Была проведена работа для комфортного взаимодействия пользователей с ресурсом, а именно:

• упрощенный заказ товаров;
• «Избранное» доступно только авторизованным пользователям;
• возможность оформить заказ без авторизации и регистрации;
• после успешного совершения покупки клиенту показывается информация о заказе.

Удобный поиск

Для того чтобы облегчить поиск необходимого товара, наши разработчики реализовали поиск среди наименований, характеристик, описаний, состава и способа применения. Поиск с учетом морфологии позволил отображать весь ассортимент, учитывая любые формы ключевых слов. 

Настройка корректной работы дисконтной программы

До сотрудничества GLOSSARY с нашей веб-студией, этот функционал был внедрен на сайт предыдущими разработчиками. Но из-за того, что дисконт зависел от электронного ящика клиента, расчет итоговой стоимости мог производиться без скидки, так как не каждый ее обладатель указывал свой email-адрес.

Автоматическое создание аккаунта при оформлении заказа решило эту задачу. После внесения изменений в код, на электронную почту пользователя стали отправляться данные для входа и уведомление о привязке дисконта.

Что в итоге

Команда Красного хамелеона паре с агентством Promodo за несколько месяцев видоизменила и оптимизировала работу интернет-магазина по продаже органических товаров со всем требуемым функционалом.

Была проведена работа по:

• обновлению внешнего вида сайта;
• оптимизации;
• внедрению дизайна;
• расширению возможностей веб-проекта.

Самым главным и трудоемким процессом стало расширение функционала, влияющего на конверсию.

Смотрите полный кейс с подробным описанием доработок в нашем портфолио. 

Доверяйте создание и поддержку интернет-магазина профессионалам. Это гарантирует бесперебойность работы вашего ресурса.