Плюсы и минусы перехода на Headless для вашего интернет-магазина
Выполните поиск по запросу «Headless», и вы найдете тысячи статей об этом новом подходе. Большинство авторов ценят его за свободу, которую он предлагает для фронтенд-разработки, в то время как значительная часть его поклонников ценит его отличный пользовательский интерфейс (UI). Несмотря на это, именно предприятия электронной коммерции проявляют большой интерес к внедрению Headless для своих интернет-магазинов.
Я ранее обсуждал Progressive Web Apps, которые являются частью этого подхода. Подобная концепция была принята такими гигантами электронной коммерции, как Amazon, Flipkart и Nike, с единственной целью — обеспечить высокое качество обслуживания клиентов.
Является ли эта статья очередным любовным письмом к разработке веб-сайтов Headless? В некоторой степени, да. Но я предпочитаю обсудить его преимущества для предприятий электронной коммерции и то, как мы, как стороннее агентство по разработке веб-сайтов, помогли внедрить Headless для некоторых из самых популярных платформ электронной коммерции.
Оптимизируйте свой веб-сайт и многое другое
с помощью инструментов Semrush
Что такое Headless Ecommerce?
Основы: Каждый веб-сайт электронной коммерции состоит из двух функциональных половин: фронтенда и бэкенда.
Фронтенд веб-сайта выступает в качестве посреднического канала между пользователем и порталом электронной коммерции, в то время как бэкенд управляет данными о продуктах и всей работой портала. На протяжении многих лет популярные порталы электронной коммерции придерживались классического подхода, при котором фронтенд и бэкенд веб-сайта управляются с одной панели, что означает, что они используют общую платформу.
Войдите в Headless с совершенно новой стратегией. Если вы еще не слышали о Headless, по сути, он служит для разделения фронтенда и бэкенда веб-сайта. При меньшем вмешательстве каждая часть веб-сайта ведет себя независимо и преуспевает в своей области; у вас есть UI-эксперт для управления лицом портала и бэкенд-эксперт для укрепления базы:
Почему они так сильно отличаются?
Базовая архитектура порталов электронной коммерции
Не вдаваясь в подробности архитектуры электронной коммерции, ниже представлены примерно спроектированные структуры порталов, чтобы проиллюстрировать базовое функционирование веб-сайтов электронной коммерции и их взаимодействия на каждом этапе.
Full Stack архитектура
Архитектура Full Stack — это более традиционный подход, который мобильные веб-мастера использовали с тех пор, как разработка мобильных приложений стала трендом. Разработчики создают полноценную экосистему с торговой платформой в центре, соединенную с интегрированной витриной. Портал отображает отдельные платформы, такие как мобильные и веб, отдельно. Результаты более независимы и ориентированы на обслуживающую платформу.
С торговой платформой в центре торговый портал отдает приоритет бэкенд-функциям, таким как управление контентом, выполнение заказов и данные о продуктах.
Full-stack архитектура электронной коммерции
Headless Ecommerce
По сравнению с full-stack архитектурой, структура Headless электронной коммерции четко отделяет фронтенд веб-магазина от остальных функций веб-сайта. Полезно визуализировать эту архитектуру как отдельные части, а не как общую централизованную систему. Результаты управляются с помощью API, которые отображают общий фронтенд-интерфейс, который интеллектуально адаптируется ко всем платформам.
По очевидным причинам фронтенд теперь отдает приоритет таким функциям, как оплата и персонализация, в то время как торговая платформа управляет такими вещами, как управление контентом, выполнение заказов и управление продуктами.
Кажется слишком техническим? Это можно подытожить одним пунктом: Headless электронная коммерция гораздо более гибкая, чем традиционные подходы с точки зрения предоставления омниканального опыта.
Внезапный рост спроса на Headless
Retail Dive и BigCommerce недавно представили ошеломляющие цифры в опросе , в котором участвовали глобальные руководители и менеджеры по маркетингу, а также их проблемы с привлечением цифровых потребителей. Согласно отчету, 86% бизнес-лидеров указали, что они наблюдают рост стоимости привлечения клиентов (CAC). Поскольку платные медиа становятся все более дорогими и конкурентными, отчет предполагает, что предпочтительным вариантом является разработка лучших способов привлечения органического трафика.
Пользователи потребляют контент практически отовсюду. Помимо присутствия в Интернете и улучшенного опыта покупок, предприятия должны предоставлять потребителям простые варианты покупки на всех устройствах. Это утверждение подтверждается опросом Mediapost, который утверждает, что американцы будут подключены через 13 сетевых устройств на человека. Излишне говорить, что список включает устройства всех видов с различными размерами экранов, такие как ноутбуки, планшеты, мобильные телефоны, инструменты распознавания голоса, умные часы, киоски, автомобильные планшеты и каждое устройство, известное тем, что обеспечивает доступ к веб-сервисам.
Практические случаи в нашей лаборатории: Как мы разработали Headless архитектуру для наших клиентов
Как агентство, предлагающее индивидуальные решения для электронной коммерции, наши клиенты часто просят нас предоставить порталы, которые загружаются молниеносно и одинаково интуитивно понятны для пользователя. И мы рекомендуем подход headless. По очевидным причинам это требует от нас приложить дополнительные усилия, но это приносит им хорошие результаты.
Внедрение Headless Magento
Бэкенд: Торговая платформа Magento
Фронтенд: Angular JS
Проблема решена:
Проблемы с загрузкой, исходный веб-сайт загружался до 7 секунд. Что означало пустой экран более 7 секунд. Magento по умолчанию предлагает фронтенд, разработанный на CMS на базе KnockoutJS. Высокоинтегрированная витрина ограничивала веб-магазин по многим фронтам. Растущее число пользователей начало сказываться на производительности магазина.
Наше решение:
С помощью headless-шаблона, разработанного на Angular JS, мы отфильтровали бэкенд, чтобы он не влиял на витрину. Классический подход lazyload сократил время загрузки страницы почти вдвое.
Результат:
Время загрузки страницы резко сократилось с 7 секунд до 2,8 секунд.
Еще одно исследование случая Headless Magento
Бэкенд: Торговая платформа Magento
Фронтенд: VueJS
Решенная проблема:
Навигация по страницам, Опыт Magento ограничен производительностью бэкенда. Его фронтенд довольно жесткий и часто требует, чтобы вы совершали тур по бэкенду каждый раз, когда выполняете действие на витрине. Вы нажимаете на новую страницу, магазин передает запрос бэкенду Magento, обрабатывает данные и позволяет вам загрузить новую страницу. Навигация по страницам — это то, что пострадало в процессе.
Наше решение:
Мы смогли создать одностраничное приложение на Magento с VueJS. Пользователь теперь может перемещаться между страницами в самом шаблоне Vue. Большая часть запроса уже решена в шаблоне Vue, что спасает бэкенд Magento от перегрузки.
Результат:
Время навигации по страницам сокращается многократно.
Внедрение Headless в интернет-магазине Shopify
Бэкенд: Торговая платформа Shopify
Фронтенд: Gatsby JS
Длительные сеансы оформления заказа, Сеансы оформления заказа на любой платформе электронной коммерции, включая Shopify, обычно слишком длинные. Пользователей просят заполнить 4 длинные страницы перед оплатой. Предыстория: после каждой страницы магазин перезагружает следующую страницу из бэкенда Shopify, за чем следует задержка обработки сторонними платежными шлюзами. При этом у нас есть буферы на каждом этапе, что делает раздел оплаты трудоемким и раздражающим.
Прежде всего, Shopify ограничивает возможность настройки страницы оформления заказа, ограничивая контроль администратора над ее содержимым.
Наше решение:
С помощью Gatsby JS мы смогли создать виртуальный одностраничный раздел оформления заказа. Мы ограничили поля и отсортировали все детали на одной странице.
Результат:
Время сеанса оформления заказа сократилось многократно.
Headless не так уж безупречен
es
Растущие расходы:
Лучшая часть Headless commerce заключается в том, что у веб-магазина нет предопределенного фронтенда. Разработчики создают его с нуля, чтобы предоставлять контент, ориентированный на устройства. Худшая часть — это отнимает время, и стоимость может быть высокой.
В дополнение к этому, вам нужно тратить больше, так как маркетинговой команды недостаточно для охвата людей. Владельцы сильно зависят от ИТ-команды при запуске целевых страниц на нескольких устройствах.
Неудобно для маркетинга
В системе Headless commerce отсутствует уровень представления фронтенда. Это означает:
- Предварительный просмотр контента на устройствах конечных пользователей становится затруднительным.
- Маркетологи не могут создавать контент в обычной среде WYSIWYG.
- Идеи, создание и публикация контента становятся намного медленнее из-за повышенной зависимости от другого отдела.
Это означает, что Headless commerce в конечном итоге будет заставлять маркетологов работать больше, при этом они будут сильнее зависеть от ИТ-отдела в вопросах создания и доставки контента.
Ограниченные изменения в витрине
В системе Headless commerce отсутствует среда WYSIWYG, и она построена исключительно на JS-фреймворках. Хотя это дает вашему сайту достаточно места для расширения, это также ограничивает вас в дальнейшем редизайне фронтенда без сильной зависимости от JS-разработчиков.
Итоги
Ведущие компании электронной коммерции перешли на headless-архитектуру. Прежде всего, это идет им на пользу. У Headless есть свои преимущества, а также недостатки. Возможно, вам придется приложить дополнительные усилия, но результаты будут долговечными.