GigaOM Radar Edge Platform Leader & Outperformer 2024 | 
2021년에 출시될 Google의 페이지 경험 업데이트는 SEO 규칙을 다시 작성하여 가시성을 위한 웹 사이트 속도의 중요성을 높일 것입니다. 새롭게 가중치가 적용된 Google 알고리즘은 전반적인 사용자 경험에서 페이지 순위를 높이기 때문에 느린 전자 상거래 상점은 이전보다 훨씬 낮은 순위를 차지할 것입니다.
이러한 변화는 Salesforce Commerce Cloud에서 매장을 운영하는 많은 주요 소매업체와 다른 유형의 전자 상거래 플랫폼을 사용하는 업체의 SERP 위치에 심각한 영향을 미칠 수 있습니다. 그러나 이러한 변화는 위장의 잠재적 축복으로 볼 수도 있습니다. 사업자는 이미지 최적화, 게으른 로딩, CDN, 태그 관리자 또는 AMP 구현 등 표준 최적화 전술을 넘어 더 나아가야 합니다.
이 게시물에서는 Salesforce Commerce Cloud(줄여서 SFCC)의 속도를 높이고 Google 검색 결과에서 높은 순위를 차지하는 빠르고 우수한 웹 사이트를 실행하는 가능한 방법을 살펴보겠습니다. 또는 로딩 시간을 단 1초도 줄이려고 귀중한 비용을 들이지 않고 반의 노력으로 즉각적인 로딩 웹 사이트를 제공할 수 있습니다.
구글의 다가오는 랭킹 업데이트는 단순히 이커머스 지형을 뒤흔드는 거대한 변덕이 아니다. 그것은 완벽하게 전자 상거래의 현재 추세와 일치 하 고 제대로 높은 성능과 빠른 웹 사이트에 더 많은 크레딧을 제공 합니다. 매장은 가격과 서비스 품질뿐만 아니라 전반적인 경험에 대한 경쟁이 점점 더 심해지고 있습니다.
Salesforce Commerce Cloud는 다른 많은 전자 상거래 플랫폼과 마찬가지로 핵심 비즈니스 기능에 주로 초점을 맞춘 방식으로 설계되었다는 사실은 비밀이 아닙니다. 즉, 제품 정보를 가격과 함께 표시하고 운영자에게 재고 관리를 위한 기능적인 백엔드를 제공합니다. 웹 사이트 속도 최적화는 플랫폼의 고객, 시스템 통합업체, 설계자 및 개발자에게 맡겨집니다.
절대 아니야. 속도 문제는 Magento, Shopify Plus, Oracle Commerce Cloud, BigCommerce 및 SAP Commerce Cloud(Hybris)를 포함한 모든 인기 있는 SaaS 전자 상거래 플랫폼에 스며들어 있습니다. 우리는 우리의 블로그에 다른 게시물에 속도를 위해 이러한 플랫폼을 최적화하는 방법에 대해 작성했습니다.
2020년 4월, 우리는 선도적인 500개 미국 인터넷 소매업체(IR500)의 Google Lighthouse 점수를 조사하여 어떤 전자 상거래 플랫폼이 가장 빠른 사이트를 지속적으로 제공하는지 조사했습니다. 불행히도, 결론은 대부분의 IR500 웹 사이트가 전자 상거래 플랫폼에 관계없이 놀랍도록 느리게 실행된다는 것입니다. 실제로, 우리의 데이터는 사내 시스템이 주요 전자 상거래 플랫폼보다 61 % 더 높은 성능을 발휘한다는 것을 발견했습니다.
주요 전자 상거래 플랫폼의 웹 사이트에 대한 평균 Lighthouse 점수는 Salesforce Commerce Cloud, Magento, Shopify, SAP Commerce Cloud(Hybris) 및 Oracle Commerce Cloud였습니다(중간값 15).
평균 18.5점을 기록한 Salesforce Commerce Cloud는 Magento와 비슷한 점수를 받았습니다. 중앙값 점수는 SFCC와 Magento의 경우 각각 17점과 13.5점이었습니다. 반면, 사내/자체 개발한 전자 상거래 시스템을 사용하는 웹 사이트의 평균 성능 점수는 IR500보다 15% 높았으며 평균은 30.1이었습니다. 아마도 이것은 IR500 웹 사이트의 거의 5 분의 1이 사내 전자 상거래 솔루션을 사용하는 이유 중 하나입니다.
Salesforce Commerce Cloud는 확장성이 뛰어난 클라우드 기반 SaaS(Software-as-a-Service) 전자 상거래 플랫폼입니다. Salesforce는 정기적으로 새로운 기능을 추가하며, 그 중 일부는 페이지 로딩 시간을 줄이는 데 도움이 됩니다. 실제로 Commerce Cloud API의 새로운 베타 제품은 유망한 것처럼 보이지만 판단하기에는 너무 이르다.
Salesforce Commerce Cloud를 가속화할 수 있는 옵션을 살펴보겠습니다.
이미지 최적화는 많은 전자 상거래 웹 사이트의 표준 전술입니다. 오늘날 기업 이커머스 사이트의 이미지 사용량이 많다는 점을 감안할 때, 대규모 웹 사이트에 구현할 경우 이미지를 조금만 절약해도 사이트 전체에서 상당한 이득을 얻을 수 있습니다.
이러한 최적화 전략에는 다음이 포함될 수 있습니다.
- 가까운 PoP(Point of Presence)에서 자산을 지원하기 위한 CDN 구현
- 업로드 시 무손실 이미지 압축
- 특히 긴 상품 카테고리 리스팅 페이지에서 폴딩 아래에 나타나는 게으른 로딩 이미지
DIS(Dynamic Imaging Service)는 Salesforce 스토어에 대한 이미지 서비스를 간소화합니다. 따라서 소매업체에서 각 이미지의 크기가 다른 버전을 업로드할 필요가 없습니다.
DIS는 단일 고해상도 이미지를 가져와 동적으로 변환하여 스토어에 제공합니다. DIS 변환 매개 변수를 사용하면 이미지의 크기, 자르기, 오버레이, 형식, 배경색 및 품질 설정을 제어할 수 있습니다.
DIS를 사용하면 머천다이징 또는 크리에이티브 이미지를 미리 일괄 처리하여 웹 친화적으로 만들 필요가 없습니다. DIS는 단일 이미지를 사용하여 상품 페이지, 카테고리 페이지, 추천 상품 섹션, 검색 결과 등을 포함하여 각 이미지 애플리케이션에 대해 올바른 크기를 제공합니다.
짧은 대답: 아니요. 적어도 혼자서는 아니다.
많은 운영자들은 DIS가 사이트를 더 빠르게 만들 수 있다고 생각하지만 DIS 관련 문서에는 속도가 이점으로 직접적으로 언급되어 있지 않습니다. DIS의 이점은 설치에 따라 다르지만 이미지가 실시간으로 처리되므로 속도가 향상되는 것은 아닙니다.
Salesforce Commerce Cloud에는 몇 가지 프레임워크 템플릿이 기본 제공됩니다.
- SFRA(StoreFront 레퍼런스 아키텍처)
- MFRA(모바일 우선 참조 아키텍처)
- SiteGenesis(Salesforce의 레거시 참조 아키텍처)
Storefront Reference Architecture는 최신 Salesforce 프레임워크 템플릿입니다. 최첨단 모바일 우선 설계를 위해 설계되었으며, 소매업체가 SFCC에 매장을 구축할 때 아키텍처 참조를 제공하는 것을 목표로 합니다. Commerce Cloud LINK Technology Partner Program을 통해 Salesforce Commerce Cloud API, 데이터 개체 및 타사 기술과 사전 구축된 통합을 통합합니다. 데이터 객체, API 및 타사 요소와 함께 사전 구축된 위젯/통합을 사용합니다. 그것은 오래된 Demandware 사이트 창세기 (1.0 및 2.0) 프로그램의 진화입니다.
Storefront Reference Architecture는 프런트엔드 변경(예: 주요 비즈니스 사례)에 대한 사이트 개발 요구를 완화하는 툴로, 페이지 로드 속도를 개선하는 툴로 타겟팅되지 않습니다. 이는 통합 과정에서 페이지에 타사 기술과 스크립트가 도입되어 본질적으로 페이지 속도가 느려지기 때문입니다.
짧은 대답 : 그렇지 않습니다. 그렇게 설계되지 않았어요.
Salesforce Reference Architecture는 적응형 설계 접근 방식을 통해 모바일 로드 및 서버측 로드 시간을 개선할 수 있습니다. SFRA에는 SFCC 백엔드와의 사전 연결된 여러 통합도 포함되어 있습니다. 즉, 이론적으로는 맞춤형 내장 통합보다 성능이 뛰어나야 합니다.
그러나 SFRA만으로는 매장을 훨씬 빨리 만들 수 없습니다! 이를 통해 사이트 개발이 쉬워지고 총 소유 비용이 절감됩니다. 그러나 경우에 따라 빌더가 도입한 타사 스크립트 및 기술 수에 따라 로드 시간이 악화될 수 있습니다.
전반적으로 SFRA는 최소한의 속도 이점만 제공합니다. 페이지 로딩 시간의 75%가 다양한 타사 JavaScript, 이미지 및 HTML에서 발생하기 때문입니다. 그리고 대부분의 경우, 그 주위에 방법이 없습니다. 추가 시간 손실은 디자인, 영상 크기 및 영상의 위치에 기인할 수 있으며, SFRA에 의해 어떤 방식으로도 속도가 빨라지지 않습니다.
속도를 높이기 위해 Salesforce Commerce Cloud 스토어를 최적화할 때 다양한 전술을 구현할 수 있습니다. 가벼운 테마를 사용하고, 이미지를 최적화하고, 태그 수를 줄이고(또는 태그 관리자를 사용하여) 렌더링 차단 JavaScript 코드를 제거할 수 있습니다. 이러한 모든 속도 최적화 기법에서 공통적으로 가지고 있는 한 가지는, 도청 및 요청된 콘텐츠의 전송을 최적화하는 데 초점을 맞추고 있다는 점입니다. 다음은 탭 후 발생하는 상황을 최적화하기 위한 인기 있는 전술의 몇 가지 예입니다.
- 게으른 로딩
- 불필요한 Salesforce Commerce Cloud 앱 제거
- 깨진 링크 제거
- ‘사중량’ 페이지 제거
- AMP를 통한 모바일 성능 향상
그러나 이것은 전투의 절반에 불과합니다. 속도 최적화의 끝없는 사이클을 피하려면 즉시 가야합니다. 웹 사이트를 즉각적으로(또는 1초 미만) 만들려면 고객이 아무 것도 클릭하기 전에 작동하는 기술의 조합이 필요합니다. 즉, 사용자의 탭에 반응하기보다는 사용자의 탭에 대한 예측을 의미합니다.
귀사의 매장이 Salesforce Commerce Cloud 또는 기타 전자 상거래 플랫폼 또는 백엔드 시스템에서 실행되든, 가장 빠른 환경을 제공하려면 속도 중심의 고급 웹 기술을 구현해야 합니다. 그리고 그것을 위해, 당신은 먼저 머리 없이 이동식 프론트엔드를 구축해야합니다.
속도 지향적인 웹 기술에서는 백엔드를 프런트엔드에서 분리해야 합니다. 즉, 매장의 프런트엔드를 이식 가능하도록 만들거나 헤드리스 이커머스 아키텍처에 가입해야 합니다. 이렇게 하면 프런트 엔드와 백엔드에 대한 속도 중심의 개선 사항을 독립적으로 구현하기가 더 쉬워집니다. 또한 원하는 백엔드에서 가장 빠른 웹 사이트를 제공할 수 있습니다.
신속하고 점진적인 웹 응용 프로그램(PWA) 프런트엔드를 구축하려면 Salesforce Commerce 클라우드 스토어를 무력화해야 합니다. 이를 위해서는 SFCC 백엔드에 연결할 수 있는 견고한 API 커버리지가 필요합니다. 그런 다음 다음과 같은 다양한 첨단 기술을 구현하여 웹 사이트를 놀라울 정도로 빠르게 만들 수 있습니다.
- 1빠른 브라우징 전환을 위한 휴대용 프런트엔드
- SSR(Server-Side Rendering) 및 AMP 지원으로 번개처럼 빠른 최초 로드가 가능합니다.
- 예측 프리페치
- 엣지에서 동적 콘텐츠에 대한 캐시 적중률을 최적화하고 쇼핑객보다 5초 앞당기는 엣지 컴퓨팅 기능을 갖춘 최첨단 CDN
Salesforce Commerce Cloud가 이러한 기술을 구현하고 1초 미만의 전자 상거래 웹 사이트를 지원하는 데 얼마나 적합한지 알아보겠습니다.
OCAPI(Open Commerce API)는 Salesforce Commerce Cloud에서 사용되는 RESTful API로,
- Shop API – Commerce Cloud 디지털 스토어 기능에 대한 액세스 제공
- 데이터 API – 객체별로 디지털 애플리케이션 구성 및 통합 기능에 대한 액세스를 제공합니다.
- Meta API – Open Commerce API에서 사용할 수 있는 리소스 및 문서에 대한 공식적인 설명에 액세스할 수 있습니다.
Open Commerce API 사용에 대한 일반적인 정보는 API 사용 을 참조하십시오.
SFCC에는 OCAPI API 외에도 베타 버전에서 새로운 CCAPI 계층이 있습니다.
베타 제품은 유망한 것처럼 보이지만 빠른 헤드리스 상점을 지원할 범위를 판단하기에는 너무 이르다.
Salesforce Commerce Cloud는 AMP 또는 SSR을 즉시 사용할 수 있도록 지원하지 않습니다. 또한 헤드리스 아키텍처에서는 파이프라인 구현을 지원하기가 어려울 수 있습니다.
Salesforce Commerce Cloud는 PWA 툴을 즉시 사용할 수 없습니다.
그러나 SFCC에서 점진적 인 웹 앱을 구축 할 수있는 두 가지 옵션이 있습니다.
- SiteGenesis 또는 SFRA(Storefront Reference Architecture)에서 처음부터 PWA 구축
- Commerce Cloud와 통합되는 FaaS(Front-End as a Service)에 구축
최신 PWA 휴대용 프론트엔드는 앱과 같은 속도를 제공합니다. 웹 사이트를 탐색하는 것이 더 빠릅니다. 특히 온라인 상점에서 이러한 현상이 두드러집니다. SFCC의 PWA는 네이티브와 같은 느낌으로 경쟁사보다 더 빨리 느껴집니다.
표준 속도 최적화의 경우 총 속도 이점에 제한이 있습니다. 이러한 노력은 종종 수익률 감소에 의해 지배되는데, 이는 어느 시점에서 최적화로 얻은 이익이나 이익이 투자 된 돈이나 에너지의 양보다 작다는 것을 암시합니다.
Edgio는 속도 최적화의 개념을 되돌리고 구매자가 탭하기 전에 모든 무거운 짐을 덜어줍니다. 첨단 예측 프리페치와 에지 캐싱을 갖춘 최신 CDN을 사용하면 고객이 탭 후 페이지 렌더링을 최적화하기 위해 스크램블링하는 대신 다음에 수행할 작업을 기반으로 캐시된 JSON 데이터를 엣지에서 브라우저로 스트리밍할 수 있습니다. 이 방법으로 Edgio는 항상 쇼핑객보다 5 초 앞서 사이트를 유지합니다.
Layer0 (Edgio)는 수백만 페이지의 전자 상거래 및 여행 사이트와 같은 대규모 데이터베이스 기반 웹 사이트에 대한 1 초 미만의 로드를 보장하는 유일한 플랫폼입니다. 또한 수십 개의 태그, 실시간 재고, 동적 가격 책정 등 수십 개의 복잡한 매장을 지원하고 모든 매장이 순식간에 도착할 수 있도록 지원했습니다. Layer0에서 달성 가능한 속도를 경험하기 위해 휴대 전화에 두 개의 눈부신 빠른 SFCC 사이트, 신발 카니발 또는 케이트 스페이드를 통해 검색하는 데 분 걸릴. 우리는 당신을 위해 똑같이 할 수 있습니다.
Layer0의 목표는 웹을 즉각적이고 간단하게 만드는 것입니다. Layer0의 웹 사이트는 320ms (FCP)의 중간 페이지 로딩, 두 자릿수의 유기적 트래픽 및 전환 리프트를 참조하십시오.
Layer0 (현재 Edgio)는 헤드리스 프론트 엔드를 개발, 배포, 미리보기, 실험, 모니터링 및 실행할 수있는 올인원 솔루션입니다. 여기에는 풀 스택 미리보기 환경을 갖춘 애플리케이션 인식 CDN(JavaScript로서의 JavaScript), 내장 서버측 렌더링, 고급 프리페치, 캐싱 및 트래픽 라우팅에 대한 완벽한 제어 기능이 포함되어 있습니다. Edgio는 모든 최적화 노력에서 매 밀리초를 짜냅니다. 실제로 Layer0에서 실행되는 대형 동적 웹 사이트에 대해 500ms 미만의 중간 페이지 로드를 보장합니다.
Shoe Carnival의 Salesforce Commerce Cloud 스토어는 Layer0(Edgio)에서 6초의 브라우징 전환에서 500밀리초로 전환되었습니다.
Layer0은 개발 및 배포에서 쉬운 롤백에 이르기까지 신속하고 헤드리스 SFCC 스토어를 매우 간단하게 만듭니다. Next, Nuxt, React, Angular SAP/Spartacus, React Storefront, Vue Storefront 등 모든 현대적인 헤드리스 프런트 엔드에 대해 이 작업을 수행할 수 있습니다.
요약하자면, Layer0에서 Salesforce Commerce Cloud 스토어를 실행하는 경우의 몇 가지 이점은 다음과 같습니다.
속도
더 빠른 상점을 운영함으로써 고객에게 최상의 경험을 제공하고 SERP에서 더 높아질 가능성을 높입니다. KateSpade.com 및 ShoeCarnival.com 은 Layer0에서 1초 미만의 속도로 로드되는 Salesforce Commerce Cloud 사이트의 몇 가지 예에 불과합니다. 실제로 Shoe Carnival은 3.4초의 첫 페이지 로딩 및 6초의 브라우징 전환에서 1초 미만으로 로딩되는 사이트로 감소했습니다. Layer0에서 첫 번째 로드는 이제 70.5% 빨라졌으며 중간 로딩 시간은 1초입니다. 이후의 페이지 로딩은 단 500ms로 92%나 줄어듭니다.
단순성
Layer0에서는 단순한 작업이 아닌 헤드리스 트렌드를 지원하고 있음에도 불구하고 웹을 즉각적이고 간단하게 만드는 것을 목표로 합니다. Layer0의 웹 사이트 서버리스 JavaScript 플랫폼을 사용하면 코드를 워크플로우의 중심에 두는 것만으로 개발자 속도와 엔터프라이즈 민첩성이 20% 향상됩니다. Layer0을 사용하면 프런트엔드를 작성하는 것처럼 라우팅 규칙을 작성할 수 있습니다. 풀 스택 JavaScript Everywhere 플랫폼입니다.
공동 작업
새 코드를 작성할 때마다 사전 프로덕션 환경이 자동으로 생성됩니다. QA 담당자와 비즈니스 관계자는 코드를 병합하기 전에 이를 테스트하고 피드백을 제공할 수 있습니다.
2021년 초에 구글의 페이지 경험 업데이트가 시작되면서 느린 웹사이트는 더 빠른 경쟁자에게 유리하게 순위를 잃게 된다. 속도는 사용자와 검색 엔진에 대한 중요성을 계속 얻고, 트래픽과 전환 리프트를 제공합니다.
글쓰기는 벽에 있습니다 : 온라인 소매 업체는 하위 표준 웹 사이트 성능을 제공 할 핑계가 없습니다. 행동을 취해야 할 시기입니다. 이것은 전자 상거래 약자가 더 큰 경쟁자를 따라잡거나 이길 수있는 기회입니다. 그리고 그렇게 하는 가장 쉬운 방법은 귀하의 웹사이트를 1초 미만으로 만드는 것입니다.
Salesforce Commerce Cloud 스토어를 최적화하려면 많은 시간과 노력이 필요하며 결과가 보장되지 않을 수 있습니다. 하지만 우리는 당신을 덮었습니다! Layer0은 경쟁을 뛰어 넘고 즉시 갈 수 있습니다.
