Panasonic Eplaza: как увеличить скорость загрузки страниц сайта интернет-магазина

1. Вводная задача от заказчика, проблематика, цели

Заказчик обратился к Progressive Media с просьбой увеличить скорость загрузки сайта интернет-магазина Panasonic.

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

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

Еще одна задача, которая стояла перед Progressive Media - сделать дизайн адаптивным, так как почти половина пользователей заходит на сайт с мобильных устройств.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

По итогам аудита было принято решение переписать все основные страницы сайта, используя современный фреймворк Vue.js. Это решение было обосновано тем, что ранее специалисты Progressive Media применяли Vue.js на других проектах, фреймворк хорошо себя зарекомендовал с точки зрения скорости загрузки и возможности создания новых страниц.

Vue.js - фреймворк с открытым исходным кодом для создания пользовательских интерфейсов. Он легко интегрируется в проекты с использованием других библиотек, и функционирует, как веб-фреймворк для разработки в реактивном стиле.

Все ключевые страницы сайта переписаны на Vue.js: каталог, карточка товара, личный кабинет, корзина, титульная и ряд контентных (информационных) страниц.

Основной визуальный фокус при работе с карточкой товара и каталогом был направлен на улучшение читабельности и взаимодействия пользователя с ними. Специалисты упростили разделы и оптимизировали структуру ключевых страниц сайта:

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

Так как большая часть аудитории сайта Panasonic посещает его с мобильных устройств, специалистами Progressive Media были включены работы по созданию адаптивной версии сайта.

Также команда Progressive Media настроила интеграцию интернет-магазина Panasonic с 1С. Интеграция поможет поддерживать актуальность каталогов на сайте и в 1С, позволит решать такие задачи, как вывод количества товара, имеющегося на складе, отображение актуальных цен, быстрый обмен данными между сайтом и системой учета.

3. Результаты сотрудничества

Специалисты Progressive Media подошли к решению задачи комплексно и фактически на базе старого ресурса создали новый сайт: выполнили редизайн и добавили новый функционал. В новых проектах команда использует современный фреймворк Vue.js. Разработчики переписали основные страницы сайта Panasonic, тем самым увеличили скорость загрузки веб-страниц сайта.

Обновление позволило сайту грузиться быстрее, особенно в тех частях, которые ранее работали медленно, а использовались пользователями сайта постоянно.

По показателям Lighthouse скорость загрузки списка товаров выросла с 8,0 до до 7,1 секунды, карточки товара с 15,7 до 7,5 секунды, замеры были произведены на сайте eplaza.panasonic.ru.

Количество уникальных посетителей за аналогичные периоды выросло на 32%, из них количество посетителей, смотрящих сайт с мобильных устройств, на 20%.