GigaOM Radar Edge Platform Leader & Outperformer 2024 | 
Shopify Plus는 Tesla, Victoria Beckham Beauty, Staples, Oreo/Mondelez 및 Red Bull과 같은 세계 최대 브랜드를 끌어들인 인기있는 SaaS 전자 상거래 플랫폼입니다. 목록은 계속되고, 넓은 채택은 놀랄 일이 아닙니다 – Shopify Plus는 사용하기 쉽고 쉽게 사용자 정의 할 수 있습니다. 그것은 플러그인과 API의 과다를 제공 하 고 믿을 수 없을만큼 응답 지원 팀에 의해 지원 됩니다. 전자 상거래 플랫폼에서 기대할 수있는 다른 것은 무엇입니까? Shopify 매장이든 그렇지 않든 대답은 동일합니다 : 1 초 미만의 페이지 로딩 및 경쟁사를 능가하는 SEO.
가장 매끄럽고 가장 아름다운 Shopify Plus 웹 사이트조차도 운영자가 1 초 미만의 속도로 사이트를 최적화하기 위해 여분의 마일을 가지 않는 한 대형 소매업체의 치열한 경쟁에 대항할 기회가 없습니다.
Shopify Plus 매장을 가능한 한 빨리 만드는 것은 상점이 SERP에서 더 높은 순위를 차지하고 우수하고 원활한 쇼핑 경험 덕분에 전환율을 높이는 가장 쉬운 방법 중 하나입니다.
Shopify를 통해 경험이 아닌 제품을 제공할 수 있습니다.
Shopify Plus, Magento 또는 Salesforce Commerce Cloud와 같은 많은 전자 상거래 플랫폼은 백엔드 및 데이터 우선 접근 방식으로 구축되었으며 실제 고객 경험에 거의 초점을 맞추지 않았습니다. 이들의 초점은 사람이 아니라 SKU에 있습니다. 이로 인해 플랫폼 고객, 시스템 통합업체, 설계자 및 개발자에게 웹 사이트 속도 최적화에 부담이 됩니다.
매장이 Shopify Plus 또는 기타 인기 있는 전자 상거래 플랫폼 또는 백엔드 시스템에서 실행되든, 가장 빠른 경험을 제공하려면 속도 중심의 고급 웹 기술을 구현해야 합니다. 그러기 위해서는 먼저 머리를 숙여야 한다.
헤드리스 전자 상거래의 이점
헤드리스 이커머스 아키텍처는 사이트의 프런트엔드 설계(예: 프레젠테이션 계층)가 백엔드 인프라에서 분리되는 아키텍처입니다. 그것은 모바일 앱의 콘텐츠를 관리하기 위해 워드 프레스를 사용하는 것과 조금 비슷합니다 (가치가있는 것은, 이것은 워드 프레스의 REST API로 가능합니다).
전통적인 모놀리식 전자 상거래 아키텍처
헤드리스(Headless)는 2020년과 그 이후의 많은 소매업체에서 가장 중요한 이니셔티브 중 하나로 확인되었습니다. 이를 통해 소매업체는 백엔드와 독립적으로 프런트엔드를 위한 동급 최강의 솔루션을 선택할 수 있으므로 매장을 더 빠르게 운영하고 전환율을 높이고 순위를 개선할 수 있습니다. 마이크로서비스 아키텍처라고도 하는 헤드리스 이커머스는 경쟁에서 우위를 점할 수 있는 페일 세이프 방식입니다.
API 계층을 사용하면 사이트의 프런트엔드를 백엔드에서 분리할 수 있습니다.
보다 구체적으로, 헤드리스 전자 상거래는 다음과 같은 몇 가지 이점을 제공합니다.
1. 빠른 속도
헤드리스(headless)는 많은 속도 중심 기술을 구현하기 위한 전제 조건입니다. 이는 디스플레이 로직을 클라이언트 측으로 전환하고 백엔드를 간소화하여 최상의 성능을 발휘할 수 있습니다. 콘텐츠의 빠른 전송에만 초점을 맞추면 프론트엔드는 힘든 작업을 브라우저에 맡기는 것보다 더 빠르고 반응성이 뛰어납니다.
2. 선택의 자유
많은 전자 상거래 플랫폼은 사용자에게 독점적 인 프론트엔드를 제공합니다. Shopify Plus도 다르지 않으며 Shopify의 Liquid 템플릿 언어를 기반으로 반응형 테마를 선택할 수 있습니다. 헤드리스 방식으로 전환하면 벤더 종속의 족쇄를 완전히 없애고 플랫폼의 프런트 엔드 툴링을 넘어설 수 있습니다. 이를 통해 민첩성이 향상되고 이커머스 플랫폼의 로드맵과 독립적으로 프런트엔드를 개발할 수 있습니다.
3. 백엔드 독립성
헤드리스 웹 사이트에 대한 투자는 매장의 미래를 보장합니다. 프런트 엔드 코드를 소유하고 있으며 자신있게 개발하고 투자 할 수 있습니다. 이것은 당신이 원할 때마다 다른, 더 저렴하거나 더 나은 전자 상거래 플랫폼으로 이동할 수 있습니다. 이러한 경우 매장에서 타사 도구와 수십 개의 통합을 수행하더라도 새로운 전자 상거래 플랫폼용으로 다시 작성할 필요가 없으며 이전 플랫폼의 API를 새 플랫폼의 API와 교체하기만 하면 됩니다.
4. 더 나은 SEO
머리가없는 사이트는 단지 더 빠르지 않습니다; 그것은 또한 더 나은 SEO를 가지고 있습니다. 헤드리스 웹 사이트를 사용하면 URL, 메타데이터, robots.txt 파일 및 기술 SEO의 기타 측면을 처리하는 방법을 선택할 수 있습니다. Shopify Plus는 이 기능을 즉시 지원하지 않습니다.
5. 향후 사용 사례 및 엔드포인트 지원
PWA(Progressive Web Apps)/SPA(Single-Page Applications)와 같은 헤드리스 프런트엔드를 통해 운영자는 스토어의 미래 경쟁력을 확보하고, 새로운 엔드포인트를 자유롭게 추가하고, 추가 기능을 개발할 수 있습니다. API에 연결하기만 하면 됩니다. 거의 모든 장치 또는 플랫폼을 엔드포인트로 추가하고 헤드리스 방식으로 매장을 체크아웃할 수 있습니다.
가장 빠른 Shopify Plus 매장의 비밀
헤드리스(Headless)는 여러 가지 고급 웹 기술 및 최적화 기술을 구현하여 더 빠르고 반응성이 뛰어난 스토어프론트를 개발할 수 있는 기반입니다. 결합하면 Shopify Plus 웹 사이트를 최대 속도, SEO 및 수익으로 최적화하는 데 도움이 될 수 있습니다.
휴대용 PWA 프런트엔드
헤드리스 기능을 사용하고 Shopify Plus를 PWA 휴대용 프런트엔드와 결합하면 모바일 기기에서 웹 사이트의 빠른 검색 속도를 얻을 수 있습니다. PWA를 통해 고객은 향상된 즉각적인 페이지 전환 경험을 누릴 수 있습니다. PWA 브라우징 전환이 빠르듯이 첫 번째 로드는 기존의 다중 페이지 웹 사이트보다 더 오래 걸리는 경향이 있습니다. 이 문제를 해결하고 착륙부터 결제까지 매우 빠른 경험을 제공하려면 PWA에 서버 측 렌더링 및 AMP 지원을 추가하는 것을 고려하십시오.
서버 쪽 렌더링(SSR)
서버 쪽 렌더링은 빠른 PWA를 수반하는 중요한 웹 기술입니다. 서버측 렌더링이 없으면 브라우저가 모든 JavaScript 코드를 다운로드, 구문 분석 및 실행한 후 화면에 렌더링해야 합니다. SSR이 없는 PWA는 시뮬레이션된 3G에서 2.5초 미만의 TTFMP(Time to First Meaningful Paint)를 달성하는 데 어려움을 겪고 있습니다. 에지 컴퓨팅 기능을 갖춘 최신 CDN과 함께 SSR을 사용하는 사이트는 거의 즉각적인 TTFMP 시간을 달성할 수 있습니다.
SSR은 이메일, 소셜 미디어 및 추천 방문자가 빠른 첫 로드를 경험할 수 있도록 합니다. SSR 지원을 통해 PWA는 첫 페이지를 넘어 번개처럼 빠른 첫 페이지 로드 및 즉각적인 페이지 전환 경험을 제공합니다.
서버 측 렌더링은 또한 더 나은 SEO로 이어집니다. 전자 상거래 비즈니스는 SEO에 의존하며, 귀하의 사이트가 검색 및 소셜 봇과 크롤러에 의해 이해될 것이라는 것을 100 % 확신하는 유일한 방법은 HTML로 번역하는 것입니다.
이것은 Shopify Plus를 위해 JavaScript가 많은 전자 상거래 PWA 프런트 엔드를 구축하는 경우 특히 중요합니다. 크롤러와 봇은 JavaScript 콘텐츠를 안정적으로 인덱싱하지 못하기 때문에 서버에서 페이지를 렌더링해야 합니다.
Shopify Plus에는 SSR 지원이 내장되어 있지 않습니다.
가속화된 모바일 페이지(AMP)
Google AMP는 HTML을 단순화하고 CSS 및 JavaScript에 대한 엄격한 제한을 적용하여 초고속 모바일 웹 페이지를 만드는 오픈 소스 프레임워크입니다. 평균 AMP 페이지는 검색 후 500밀리초 내에 로드됩니다. 이러한 페이지는 Google 서버에서 캐시되고 미리 렌더링되므로 빠르게 전달됩니다.
Shopify Plus는 AMP 또는 진정한 SSR 지원을 즉시 제공하지 않으므로 모바일에서 첫 페이지 로드를 최적화하는 데 큰 방해가 됩니다. 이러한 기능을 웹 사이트에 직접 추가해야 합니다. AMP와 SSR 모두 프런트엔드에 백엔드가 필요합니다. 이에 대한 자세한 내용은 아래와 같습니다.
프런트엔드용 백엔드(BFF)
BFF는 헤드리스 이커머스 및 마이크로서비스 기반 아키텍처 API를 사용하는 데 핵심적인 역할을 합니다. 애플리케이션 스택의 개별 계층으로, PWA 또는 네이티브 Android 또는 iOS 모바일 앱 같은 단일 클라이언트가 각 클라이언트에 맞게 최적화하지 않고도 공유 API를 보다 효율적으로 사용할 수 있습니다. API 호출을 투명하게 ‘가로채고’ 전달된 인수를 변환하여 특정 엔드포인트에서 이해할 수 있도록 합니다.
BFF는 프런트 엔드에 대한 서버 측 렌더링 및 AMP 변환을 수행하는 완벽한 장소입니다. 또한 BFF는 Shopify 매장에 다음과 같은 다양한 이점을 제공합니다.
BFF 및 속도
프런트엔드는 여러 서비스에 대한 호출을 오케스트레이션하거나 페이지 디자인에 가장 적합하도록 응답 데이터를 재구성해야 할 수 있으며 이 코드는 어딘가에서 실행되어야 합니다. BFF를 사용하면 이 코드를 프런트엔드 번들에서 제외하고 작고 빠르게 유지할 수 있습니다. 대부분의 경우 응답은 캐시할 수 있으므로 모든 요청에서 모든 사용자의 디바이스에서 이 shim 코드를 실행하는 대신 클라우드에서 실행되므로 캐시 비적중이 발생할 때만 수요에 맞게 확장할 수 있습니다.
모바일 클라이언트의 경우 HTTP 요청이 너무 많으면 시간 측면에서 비용이 많이 들기 때문에 각 호출마다 불필요한 밀리초가 추가됩니다. 요청 수를 최소화하기 위해 프런트엔드는 일반적으로 단일 API를 통해 관련 데이터를 얻는 경향이 있습니다. 이는 백엔드가 각 클라이언트의 요구를 충족시키기 위해 UI 관련 로직 처리를 담당하는 경우가 있다는 것을 의미합니다. 이것은 비효율적인 접근 방식입니다.
프런트엔드에 대한 백엔드가 구현된 경우 프런트엔드(모바일, 웹)는 BFF를 통해서만 백엔드 마이크로서비스에 액세스하며 각 클라이언트는 별도의 BFF 서비스를 받습니다. BFF를 사용하면 마이크로서비스 간의 상호 통화가 줄어듭니다. 이는 일부 UI 로직이 BFF 수준에서 처리되기 때문입니다.
BFF 및 개발 속도
BFF는 개별 개발 팀이 독립적으로 작업할 수 있도록 하여 개발자 속도를 높입니다. 개발자는 핵심 API를 변경하지 않고도 새로운 기능을 추가할 수 있습니다. 이는 API가 Shopify Plus에서 제공되고 변경할 수 없는 경우에 특히 유용합니다.
벤더 종속 최소화
Shopify를 다른 전자 상거래 플랫폼으로 전환해야 하는 경우 프런트엔드를 위한 백엔드를 사용하면 노력과 비용을 줄일 수 있습니다. 이것은 헤드리스 아키텍처의 유연성 형태로 큰 이점을 제공합니다.
BFF 기반 프런트엔드 및 백엔드 디커플링
에지 컴퓨팅을 통한 예측 프리페치 및 CDN
예측 프리페치는 방문자가 클릭하기 전에 방문할 가능성이 가장 높은 페이지를 미리 캐시하고 렌더링하는 데 사용되는 고급 기능입니다. 엣지 컴퓨팅 기능을 갖춘 최신 CDN을 사용하면 동적 데이터를 엣지로 스트리밍한 다음 사용자가 요청하기 전에 사용자의 브라우저로 스트리밍할 수 있습니다. 이러한 기술이 결합되어 Shopify Plus 매장이 어디에서 쇼핑하든 쇼핑객보다 5초 앞서 있을 수 있습니다.
동적 데이터를 에지로 프리페치하고 스트리밍함으로써 Shopify 매장을 검색하는 소비자가 기다리는 JSON 데이터, 즉 재고, 가격 및 정보를 캐시하고 즉시 서비스를 제공할 수 있습니다. 하지만 이를 위해서는 앱을 이해하는 정교한 CDN이 필요합니다.
Layer0 CDN-as-JavaScript는 캐시 적중률을 전례 없는 수준으로 최적화하고 엣지에 인텔리전스를 제공합니다. 이를 통해 비즈니스 소유자는 무한 URL 목록을 표시하는 대신 유사한 페이지(예: PDP, PLP 및 장바구니)를 분류하여 추세와 최적화 기회를 파악할 수 있습니다. 이를 통해 조치를 취하고 웹 사이트 로드 시간의 차이를 확인할 수 있습니다.
Layer0 CDN-as-JavaScript는 엣지의 동적 콘텐츠에 대해 95% 이상의 캐시 적중률을 보이며, 이커머스 웹사이트의 평균 캐시 적중률은 15%입니다. 이러한 차이는 예측 프리페치와 함께 대형 이커머스 웹사이트가 어디에서 방문하든 쇼핑객보다 5초 앞서게 합니다.
Shopify Plus로 머리가없는 것이 얼마나 어렵습니까?
매장을 운영할 이커머스 플랫폼을 선택하는 것은 헤드리스 웹사이트에 대한 플랫폼의 지원과 1초 미만의 사이트를 가능하게 하는 기술을 고려해야 합니다. 많은 이커머스 플랫폼은 즉시 사용 가능합니다(즉, 프런트엔드와 백엔드를 결합합니다).
헤드리스 아키텍처를 명시적으로 지원하지는 않지만, Shopify Plus는 소매업체가 헤드리스 스토어를 운영하고 다른 프런트엔드 프레임워크(예: React Storefront) 또는 헤드리스 Shopify 빌드에서 사용되는 Contentful과 같은 헤드리스 CMS를 사용할 수 있도록 합니다.
Shopify Plus는 스토어프론트 API의 탄탄한 독점 컬렉션을 제공하여 플랫폼의 콘텐츠 및 구성 요소에 대한 액세스를 가능하게 함으로써 헤드리스 작업을 가능하게 합니다.
Shopify Plus는 공식적으로 헤드리스 웹 사이트를 지원하지 않으며 많은 속도 중심 기능과 기술을 즉시 제공하지 않습니다. 이 플랫폼은 재고, 가격 및 데이터를 관리하기 위한 것이며 이러한 기술을 구현하려면 많은 노력이 필요합니다. 그러나, 몇 가지 주의와 함께, Shopify 플러스는 여전히 좋은 선택입니다 그것은 소매 업체에 대 한 머리 없이 이동 하 고 주요 속도 중심 전술을 구현 하기 위해 상대적으로 쉽게.
Shopify Plus 프로
- Storefront API로 제품 정보를 위한 훌륭한 API, Shopify Plus는 제품 및 주문 처리에 대한 적절한 참조를 제공하며 API는 잘 문서화되어 있습니다.
- GraphQL API 형식 Storefront API는 현대적이고 미래에 대비한 GraphQL 형식으로 제공됩니다.
Shopify Plus 단점
- 즉시 사용 가능한 PWA 프레임워크 없음 Shopify Plus는 기본적으로 PWA를 지원하지 않습니다. 그러나 일부 판매자는 플랫폼에서 PWA를 실행합니다. 이를 위해 저장소에 BFF(Backend for Frontend)가 필요할 수 있습니다. BFF를 사용하면 StoreFront API와 PWA 프런트엔드 간에 마이크로서비스를 실행할 수 있습니다. 이는 API를 최적화하고 각 클라이언트에 대해 별도의 API를 생성하지 않고 클라이언트 측 로직의 양을 최소화하는 방법입니다.
- No AMP Out-Of-The-Box Shopify Plus는 독점적인 AMP(Accelerated Mobile Pages) 솔루션을 제공하지 않습니다(Shopify App Marketplace의 유료 앱으로 AMP를 구현할 수 있음).
- Shopify는 제품에 대한 괜찮은 API를 가지고 있지만 다른 많은 것들에 대한 완전한 API 범위는 없습니다. 예를 들어, Shopify Plus 제어판에서는 판매자가 사이트 탐색 메뉴의 항목을 설정할 수 있지만 이러한 메뉴 항목을 가져오는 API는 없습니다. 헤드리스 Shopify Plus 구현은 약간의 팔 레슬링 및 해결 방법 없이는 액세스 할 수있는 깨끗한 방법을 제공하지 않습니다.
- 제한 Shopify Plus는 단일 사용자로 만들 수 있는 요청 수를 제한합니다. Shopify Plus에는 API 호출을 위한 특별한 헤더가 있으므로 BFF 레이어는 단일 사용자로 계산되지 않습니다. 그러나 위에서 언급한 API 커버리지 문제로 인해 요청이 항상 실제 API 호출이 아닐 수 있으며 BFF 계층은 여전히 단일 사용자로부터 온 것으로 간주합니다. 이는 레이어가 많은 사용자에 대해 트래픽을 프록시하는 경우에도 발생합니다.
Edgio(Layer0)가 프로세스를 단순화하는 방법
PWA, SSR, AMP 및 BFF의 세 글자로 된 기술 약어를 읽으면 이러한 기술을 직접 구현하는 것은 말할 필요도 없이 귀사의 머리 속을 돌릴 수 있다는 것을 이해합니다. Edgio(Layer0)는 DevOps 또는 유지 보수가 거의 또는 전혀 필요 없는 성능과 확장성을 갖춘 방식으로 이 모든 것을 처리합니다.
Edgio(Layer0)는 데이터베이스 기반 전자 상거래 웹 사이트의 페이지 로드를 1초 이내로 보장하는 유일한 플랫폼을 통해 고객이 가시성, 도달 범위, 매출 및 고객 만족을 확보할 수 있도록 최선을 다하고 있습니다.
복잡하고 역동적인 이커머스 웹사이트는 개발 속도와 수익 성장을 높이고 DevOps 비용을 절감하는 동시에 1초 미만의 속도를 달성할 수 있도록 지원합니다.
고객이 하지 않는 한 우리는 승리하지 않습니다. Shopify의 포트폴리오에는 경쟁이 치열한 전자 상거래 환경에서 입지를 확보하기 위해 믿음을 뛰어넘는 인스턴트 Shopify 매장이 있습니다.
플래닛 블루가 Moovweb XDN에서 인스턴트 Shopify Plus 스토어를 성공적으로 시작한 방법
Planet Blue는 Layer0(Edgio)에서 16초의 브라우징 전환에서 500밀리초로 변경되었습니다.
Planet Blue는 유기농 의류를 단일매장에서 공급하던 업체에서 세계적인 디자이너 및 옴니채널 의류 소매업체로 성장했습니다. Shopify Store의 즉석 쇼핑을 통해 탁월한 쇼핑 경험을 선사할 수 있습니다.
tayer0에서 시작되기 전에 Planet Blue의 모바일 페이지가 로드되는 데 10초가 걸렸습니다. 유통업체의 모바일 트래픽의 70% 이상이 전환율에 심각한 영향을 미쳤습니다. Planet Blue는 고객의 요구를 충족하고 경쟁력을 유지하기 위해 모바일 경험의 정비가 필요하다는 것을 이해했습니다. Layer0에서 실행하면 탐색 시간이 95%(데스크톱의 경우 16초 → 0.5초, 모바일의 경우 10초 → 0.5초) 감소하여 사용자가 웹사이트를 탐색할 때 마찰이 없는 온라인 카탈로그와 같은 느낌을 줍니다.
Layer0에 대한 Planet Blue의 결과:
- 31% Layer0에 즉시 사이트와 전환율에 전년 대비 상승
- 16초 → 0.5초 전환으로 데스크탑의 속도 97% 감소
- 모바일에서 속도를 95% 감소시키는 10초 → 0.5초 전환
- 전체 디바이스에서 평균 60% 이상 첫 페이지 로딩 감소
- 눈 깜짝할 사이에 페이지 로딩으로 고객 만족도 20% 이상 향상
- React Storefront로 구축된 초고속 전자 상거래 PWA
- 서버쪽 렌더링 및 AMP 지원
- 예측 프리페치
- CDN-as-JavaScript는 엣지에서 동적 콘텐츠의 캐시 적중률을 최적화하여 쇼핑객의 클릭을 5초 앞당길 수 있도록 합니다.
요약
헤드리스 커머스 아키텍처로 전환하는 것은 메이시스, 월마트, 타겟, 나이키, 에어비앤비 등 많은 소매업체의 최우선 과제입니다. 이 추세는 세 가지 주요 이유로 견인을 얻고 있습니다. 즉, 전자 상거래 플랫폼의 프런트 엔드 툴링의 한계로부터 자유를 제공하고 웹 사이트 속도와 SEO를 향상시키는 동급 최고의 웹 기술을 구현하고 미래의 사용 사례를 쉽게 구현할 수 있습니다.
위에서 설명한 몇 가지 주의 사항과 함께 Shopify Plus는 헤드리스 스토어를 구축하고 주요 속도 중심 기술을 구현하는 데 유용합니다. 당신은 뒤에 남겨질 여유가 있습니까?
