GigaOM Radar Edge Platform Leader & Outperformer 2024 | 
이커머스 분야의 경쟁이 치열해짐에 따라 유통업체들은 새로운 차별화 방안을 모색하고 있으며, 경쟁의 최전선은 꾸준히 기술로 나아가고 있습니다. 멀티채널의 출현으로 인해 고객 여정이 매우 복잡해졌지만 한 가지 확실한 것은 속도가 그 어느 때보다 중요하다는 것입니다. Google이 최근 발표한 페이지 경험 업데이트는 사용자가 웹 페이지와 상호 작용하는 경험을 인식하는 방식에 따라 웹 페이지를 판단하도록 설계된 새로운 순위 알고리즘으로, 사용자가 페이지를 로드한 것으로 인식하는 속도를 강조하고 있다는 분명한 신호입니다.
전자 상거래를 위한 새로운 고객 여정은 즉각적입니다. 방문자의 53%는 로딩 시간이 3초 이상 걸리면 모바일 웹사이트를 이탈합니다. 동시에 로딩 시간이 1초마다 지연될 때마다 전환율이 7% 감소했습니다. 새로운 기술은 이제 이전에는 불가능했던 웹 사이트 속도를 가능하게 합니다. 최신 휴대용 프런트엔드, SSR(Server-Side Rendering), AMP(Accelerated Mobile Pages) 및 최신 CDN 기술이 결합된 이 제품은 순식간에 페이지 로딩이 가능할 뿐 아니라 이커머스 부문의 새로운 경쟁의 장으로 자리매김하고 있습니다.
목차
- 전자 상거래에서 웹 사이트 속도의 중요성
- 속도 = 돈
- AMP란 무엇이며 어떻게 작동합니까?
- 리테일 신생 기업이 수십억 달러 규모의 경쟁업체를 능가
- SSR이란 무엇이며 어떻게 작동합니까?
- 최신 CDN 및 에지 컴퓨팅이란?
- 요약
전자 상거래에서 웹 사이트 속도의 중요성
웹 사이트 속도는 가시성(SEO 및 SEM), 트래픽, 사용자 경험, 궁극적으로 전환율 및 수익에 이르기까지 전체 디지털 전략에 영향을 미칩니다. 이는 구글이 모바일과 속도에 점점 더 집중하고 있기 때문이다.
검색 거인은 웹 사이트 속도가 중요하다는 것을 명확히하기 위해 10 년 동안 탐구했습니다. 모바일 웹 사이트 속도가 검색 결과와 SEM에서 높은 순위를 차지하는 데 중요한 요소임을 확고히 하기 위해 모바일 중심의 여러 업데이트를 출시했습니다.
이러한 노력에는 2016년 모바일 우선 인덱싱, 2017년 모바일 광고가 포함된 AMP, 2019년 스피드 업데이트, 2021년 초에 출시될 예정인 페이지 경험 순위 업데이트가 포함됩니다. 마지막으로, 수치심의 Google 배지는 곧 출시되어 악명 높게 느린 웹 사이트에 플래그를 지정하고 검색 엔진 결과 페이지 (SERP)에서 사이트로 이동하는 사용자에게 경고합니다.
모든 공정성에서, 사이트 속도의 역할을 강조하기 위해 알고리즘 변화를 도입하고 웹 사이트를 망치는 것 외에도 Google은 더 빠른 웹을 현실로 만드는 다양한 도구를 만들었습니다. 여기에는 PageSpeed Insights, AMP, Impact Calculator, Mobile Speed Scorecard 등 웹 사이트 속도를 촉진하고 측정하는 다양한 도구가 포함됩니다.
출처: 내 사이트 테스트
Google의 Test My Site는 사이트에 대한 빠른 감사를 수행하고 사이트 속도 권장 사항이 구현될 경우 연간 수익에 미치는 잠재적 영향을 평가할 수 있는 도구입니다.
이러한 도구를 만드는 노력은 검색의 58 %와 회사의 광고 수익의 65 %가 모바일에서 발생하기 때문에 Google의 관심입니다.
일정 1:1 데모
상담식 대화를 예약하여 Edgio(Layer0) XDN이 1초 미만의 페이지 로드를 달성하는 데 어떤 도움을 줄 수 있는지 알아보십시오. 여기를 클릭하십시오!
속도 = 돈
웹 사이트 속도가 고객 경험과 매출, 특히 모바일 디바이스에 영향을 준다는 것은 일반적인 지식입니다.70%의 소비자는 사이트 속도가 구매 의사에 영향을 준다고 말합니다. 아마존은 페이지 로딩 지연의 1초가 연간 160억 달러의 매출 손실을 초래할 것이라고 계산했다. 판매량을 높이려면 방문자가 도착하는 곳(예: 상품 리스팅 또는 상품 설명 페이지)에 컨텐츠가 빠르고 쉽게 로드되도록 해야 합니다. 마찬가지로, 지불 과정은 빠르고 간단해야합니다. 이는 재참여의 기반을 구축하고 구매자가 귀사로부터 더 많은 것을 반품하고 구매하는 경향이 있습니다.
하지만 오늘날에는 모바일 경험을 빠르게 전송하기가 점점 더 어려워지고 있습니다. 이미지와 코드가 너무 복잡하게 최적화되고 부풀어 오른 웹 사이트 외에도 모바일 페이지는 평균 214 개의 서버 요청을 처리하며그 중 100 개는 광고와 관련이 있습니다. 따라서 모바일 장치(4G)에서 페이지를 로드하는 데 평균 15.3초가 걸립니다. 경쟁이 치열한 소매업체 중 일부는 모바일 페이지 로딩 시간을 3-5초로 단축할 수 있지만 여전히 개선의 여지가 있습니다. 이것은 5G가 해결할 수 있는 문제가 아니다.
광고, 개인화, 분석 및 추적, 우수한 사용자 경험 간의 타협할 수 없는 절충안입니다.
속도의 기초
초고속 첫 페이지 로드를 제공하는 첫 번째 기본 요소는 검색 트래픽에 AMP를 사용하고 다른 채널에는 SSR을 사용하는 것입니다. 두 번째 단계는 빠른 후속 페이지 로딩을 보장하는 것입니다. 이는 PWA(Progressive Web Apps)와 같이 속도를 위해 구축된 휴대용 프런트엔드를 통해 이루어집니다. 마지막 핵심 요소는 페이지 로딩에서 밀리초 단위로 압축할 수 있는 에지 컴퓨팅 기능을 갖춘 최신 CDN입니다.
실제로 Google은 웹 사이트가 사용자를 검색하는 AMP 페이지를 먼저 제공하고 이후 페이지에서 전체 PWA 버전의 사이트로 전환하는 이상적인 고객 여정을 권장했습니다. 유통업체 웹사이트 트래픽의 거의 절반이 유기적 검색에서 발생하므로 AMP와 PWA를 모두 지원하는 것이 좋습니다.
이 주제는 Google I/O 2017 에서 광범위하게 논의되었습니다.
PWA를 통해 개발자는 네이티브 앱에 필적하는 매우 매력적이고 번개처럼 빠른 경험을 제공할 수 있습니다. 그러나 검색 생성 트래픽과 관련하여 AMP는 중간 로드 시간이 0.5초로 가능한 가장 빠른 옵션입니다.
따라서 간단히 말해 SERP에서 더 높은 등반을 위해서는 AMP와 SSR의 조합이 필요하며, 초고속 브라우징 전환을 위해서는 PWA가 필요합니다. 문제는 엔터프라이즈 이커머스 웹사이트가 SSR 지원을 추가해야 하는데, 이는 자체적으로 복잡한 작업이며, PWA(일반적으로 React, Angular, Vue, Next 또는 Nuxt로 작성됨)용으로 두 개의 개별 웹사이트를 유지하고 다른 웹사이트는 AMP HTML로 관리하기 때문입니다.
AMP 페이지는 CDN(Content Delivery Network)에 의해 사전 추출, 사전 렌더링 및 캐싱되기 때문에 속도가 매우 빠릅니다. Google의 AMP 캐시는 대부분의 AMP 페이지를 제공합니다.
따라서 웹 사이트 속도의 기초는 다음 세 가지 핵심 요소로 구성됩니다.
빠른 첫 로드를 위한 SSR + AMP
SERP에서 사용자는 첫 페이지 로딩을 위해 AMP 버전의 페이지로 연결됩니다. SSR은 이메일, 소셜 및 추천을 포함하여 다른 모든 채널의 방문자에게도 동일하게 적용됩니다.
번개처럼 빠른 브라우징 속도를 제공하는 PWA 휴대용 프런트 엔드
PWA는 방문자가 후속 웹 사이트 페이지를 탐색할 때 즉각적인 탐색 속도를 제공하기 위해 인계됩니다. 이러한 방식으로 소비자는 번개처럼 빠른 첫 페이지 로딩 및 첫 페이지 넘어 즉각적인 페이지 전환의 향상된 경험을 즐길 수 있습니다.
예측 프리페치 + 최신 CDN
에지 컴퓨팅 기능을 갖춘 예측 프리페치와 최신 CDN을 통해 동적 데이터를 엣지로 스트리밍하고 사용자의 브라우저로 전송한 후 요청할 수 있습니다. 이를 통해 소비자가 기다리는 것, 즉 JSON 데이터를 캐시하고 제공할 수 있습니다. 이 데이터는 재고에 있는 다양한 제품, 가격 및 정보로 변환됩니다. 이커머스 웹사이트와 기타 데이터베이스 기반 웹사이트는 즉각적인 경험을 제공하고 소비자의 도청(예: 사용자가 링크를 클릭하기 전에 클릭할 가능성이 가장 높은 제품 설명 페이지 프리페치)을 5초 앞당길 수 있습니다.
이제 우리는 웹 사이트 속도의 기초를 형성하는 세 가지 기둥을 이해했으므로 각각에 대해 더 자세히 살펴볼 수 있습니다.
AMP란 무엇이며 어떻게 작동합니까?
Google AMP는 로딩 시간 중간값이 500ms인 모바일 웹 페이지를 만들기 위한 오픈 소스 프레임워크입니다. AMP는 HTML을 단순화하고 CSS 및 JavaScript에 대한 엄격한 제한을 적용하여 모바일 웹에서 더 빠르고 우수한 경험을 제공합니다. 그런 다음 이러한 페이지는 Google 서버에서 캐시되고 미리 렌더링되므로 빠르게 전달됩니다.
AMP의 이점
AMP 페이지는 Google의 SERP 트래픽에 대해 500ms 중간 페이지 로드를 활성화합니다. 이러한 속도는 Google 서버가 AMP 페이지 링크를 클릭하기 전에 AMP 콘텐츠를 사용자의 브라우저로 미리 가져와 미리 렌더링하기 때문에 가능합니다. 평균 전자 상거래 사이트의 경우 Google 검색 (유기적 및 유료)은 트래픽의 약 50 %를 차지하므로 이러한 이익은 트래픽의 많은 비율에 적용 할 수 있습니다.
AMP를 사용하는 사이트는 반송률 감소의 이점을 누릴 수 있습니다. 일반적으로 페이지가 로드되기를 기다리는 동안 이탈하는 사용자에게는 번개처럼 빠른 환경이 제공되기 때문입니다.
AMP + PWA가 게임을 변화시키는 방법
AMP와 PWA(Progressive Web Apps)의 조합은 검색에서 전체 고객 여정을 포괄하여 신속한 엔드투엔드를 제공합니다. 쇼핑객은 Google SERP에서 AMP 페이지를 로드한 다음 AMP 페이지를 탐색하는 동안 사이트의 PWA 버전에 필요한 리소스를 백그라운드에서 로드합니다. 이렇게 하면, 사용자가 액션을 취할 때(예를 들어, 사이트의 아무 곳이나 클릭), PWA는 이미 후속 페이지에 대한 콘텐츠를 미리 로드하는 데에 앞장서고, 그로부터 나머지 모든 전환은 새로운 탐색이 아닌 클라이언트측 렌더링된 브라우징 전환이다.
왜 모든 사람들이 AMP를 사용하지 않습니까?
AMP와 PWA의 조합은 속도를 위해 천국에서 만든 일치이지만 개발 현명한 악몽입니다. 기술을 효과적으로 지원하려면 두 가지 버전의 사이트를 만들어야 합니다. 하나는 프런트엔드가 작성된 언어(JavaScript가 많거나 CSS가 많음)로, 다른 하나는 AMP 프로젝트의 표준을 따르는 버전입니다. 모든 버그 수정, 레이아웃 변경, 새로운 기능 등은 AMP 및 PWA 코드베이스 모두에 전파되어야 합니다.
React Storefront 프레임워크 및 Layer0은 개발자가 React 앱에서 AMP를 훨씬 쉽게 지원할 수 있게 해줍니다.
리테일 신생 기업이 수십억 달러 규모의 경쟁업체를 능가
Layer0 AMP 기술을 활용하여 패션 소매업체 Akira는 검색에서 즉시 첫 로드를 제공 할뿐만 아니라 Amazon, Nordstrom, Zappos 및 기타 주요 브랜드를 능가합니다.
레이어0 기술을 사용하기 전에 아키라의 첫 페이지 로딩은 평균 4.8초였고, 이후 페이지는 2.5초만에 로딩되었습니다.
Akira는 Edgio(Layer0)에 내장된 고급 기술(서버 측 렌더링 및 AMP 변환 기능을 갖춘 전자 상거래 PWA, 엣지에서 동적 콘텐츠에 대해 95% 이상의 캐시 적중률을 제공하는 Layer0 CDN-as-JavaScript, 그리고 웹사이트를 쇼핑객보다 5초 앞당겨 유지)을 활용함으로써 이러한 결과를 개선하고 1초 미만의 페이지 로드를 달성할 수 있었습니다.
Edgio(Layer0)를 통해 소매업체는 여러 분야에서 즉각적인 성장을 보였습니다.
- 첫 번째 로드 시간이 70.8% 감소하여 초에 근접
- 브라우징 전환이 500ms로 감소했습니다.
- 웹 사이트 페이지의 절반이 500ms 미만으로 로드됩니다.
- 모바일 전환율 37.25% 증가
또한 Lighthouse는 이러한 개선 사항을 반영합니다. Akira의 성능 점수는 36점 향상되어 웹 사이트의 75%를 능가하고 향상된 고객 검색 환경을 제공합니다.
Akira 사례 연구 전문을 읽어 보십시오.
Annie Selke는 웹 사이트 속도에 대한 투자가 소매업체가 검색 엔진 결과 페이지를 올라가는 데 어떻게 도움이 될 수 있는지를 보여주는 또 다른 훌륭한 예입니다.
Edgio (Layer0)에 뛰어 들기 전에는 가정 및 장식 소매업체 Annie Selke가 Google 검색 결과의 접합 위에 나타나지 않았습니다. 오늘날 유기적 트래픽은 32% 증가하고 모바일 유기적 트래픽은 40.41% 증가하여 수십억 달러 규모의 경쟁업체를 능가합니다.
관심이 있으시면 Annie Selke 사례 연구가 저희 웹 사이트에서 Nitty-gritty에 들어갑니다.
Akira와 Annie Selke와 같은 온라인 소매 업체의 경우 성능이 우수한 모바일 웹 사이트는 낮은 매달려 있습니다. Amazon, Nordstrom 및 Zappos와 같은 전자 상거래 거인의 끊임없는 경쟁에 맞서기 위해 필요한 것이 될 수 있습니다.
사이트가 빠를수록 순위가 높아지며 즉각적인 SEO가 보장됩니다. Edgio (Layer0) 포트폴리오에는 이를 증명하는 많은 예가 있습니다. Akira, Annie Selke 및 Shoe Carnival은 Amazon을 포함하여 많은 유명 브랜드를 능가하는 몇 가지 제품입니다.
Layer0은 전자 상거래를 가속화하기 위한 고급 기술의 조합을 제공합니다.
- 서버측 렌더링 지원 및 AMP 변환이 포함된 전자 상거래 PWA
- 예측 프리페치
- CDN(CDN-as-JavaScript)은 엣지에서 동적 콘텐츠에 대해 95% 이상의 캐시 적중률을 제공하여 웹사이트를 쇼핑객보다 5초 앞서 유지합니다.
- Layer0 Serverless-JavaScript 백엔드는 서버와 API를 최적화합니다.
일정 1:1 데모
상담식 대화를 예약하여 Edgio(Layer0)가 1초 미만의 페이지 로드를 달성하는 데 어떤 도움을 줄 수 있는지 알아보십시오. 여기를 클릭하십시오!
서버측 렌더링이란 무엇이며 어떻게 작동합니까?
서버측 렌더링(SSR 이라고도 함)은 일반적으로 클라이언트측 전용 PWA 페이지를 서버에 렌더링한 다음 완전히 렌더링된 페이지를 브라우저로 보내는 데 널리 사용되는 기술입니다. 그러면 클라이언트의 JavaScript 번들이 작업을 대신할 수 있고 PWA가 정상적으로 작동할 수 있습니다. SSR은 기본적으로 JavaScript 페이지를 검색 크롤러와 브라우저가 서버에서 이해하는 언어인 HTML로 변환합니다. 이렇게 하면 브라우저와 검색 크롤러가 페이지를 쉽게 전달하고 인덱싱할 수 있습니다.
SSR을 사용하는 주요 이점 중 하나는 모든 검색 엔진에서 적절하게 크롤링하고 인덱싱할 수 있는 앱입니다. 이것은 SEO와 소셜 미디어 채널에 메타데이터를 제공하는 데 도움이됩니다.
SSR의 이점
또한 SSR은 첫 번째 요청에서 완전히 로드된 앱이 서버에서 전송되기 때문에 성능에 도움이 되는 경우가 많습니다. 그러나 사소하지 않은 앱의 경우 SSR이 조금 복잡해지고 더 큰 서버 부하를 만들 수있는 설정이 필요하기 때문에 마일리지가 다를 수 있습니다. 고맙게도 Isomorphic 프론트엔드와 SSR 지원 Layer0과 같은 서비스와 도구가 즉시 제공됩니다.
결국 웹 사이트에 서버 쪽 렌더링을 사용할지 여부는 특정 요구 사항과 사용 사례에 가장 적합한 트레이드 오프에 따라 달라집니다.
최신 CDN 및 에지 컴퓨팅이란?
에지 컴퓨팅은 컴퓨팅을 데이터 소스에 더 가깝게 만들고 프로세스에서 지연 시간과 대역폭 사용을 줄이는 데 중점을 둔 네트워킹 철학입니다. 다양한 기술을 사용하여 이를 구현할 수 있습니다. 네트워크 에지(사용자 컴퓨터, IoT 장치 또는 에지 서버)에 더 가까이 계산을 수행하면 클라이언트와 서버 간에 발생하는 장거리 통신의 양이 최소화됩니다.
에지 컴퓨팅 기능을 갖춘 CDN 콘텐츠를 사용자에게 가장 가까운 CDN POP(Point of Presence)로 스트리밍하여 웹 사이트 서버에서 사용자의 브라우저로 이동하는 시간을 줄일 수 있습니다(샌프란시스코의 사용자는 남부 샌프란시스코의 POP에서 콘텐츠를 전송하고 뉴욕의 사용자는 브루클린의 POP에서 콘텐츠를 전송함).
엣지 컴퓨팅을 통한 CDN의 이점
CDN은 페이지 로딩 속도를 높이기 위해 웹 사이트의 캐시된 버전을 여러 위치에 저장합니다. 각 POP에는 근접한 방문자에게 콘텐츠를 전송하는 여러 캐싱 서버가 포함되어 있습니다.
Layer0의 CDN(CDN-as-JavaScript)은 이 개념을 한 차원 더 발전시킵니다. 앱을 인식하는 애플리케이션 인식 CDN입니다. 프런트엔드 개발자가 이미 알고 있는 것과 동일한 언어를 사용하며 캐싱을 완벽하게 제어할 수 있습니다. 결과적으로 Layer0을 사용하는 웹사이트는 엣지의 동적 콘텐츠에 대해 95% 이상의 캐시 적중률을 보입니다.
Layer0 CDN-as-JavaScript의 엣지 컴퓨팅 기능은 가장 가능성이 높은 다음 페이지를 미리 추출하여 요청되기 전에 엣지로 스트리밍함으로써 사용자가 링크를 누르기 전에 캐시되고 준비되도록 함으로써 쇼핑객보다 5초 앞서게 합니다.
요약
로딩 시간이 길어지면 사용자 경험과 웹 사이트의 검색 순위가 저하될 수 있습니다. AMP는이 문제의 일부를 해결합니다. 검색에서 첫 번째 페이지를 눈부시게 빠르게 만듭니다. 그러나 그것은 전투의 절반에 불과합니다. 웹 사이트의 속도를 높이려면 AMP(Accelerated Mobile Pages), 최신 휴대용 프런트엔드, SSR(Server-Side Rendering) 및 엣지 컴퓨팅 기능을 갖춘 CDN과 같은 기술이 결합된 추가적인 노력과 보다 종합적인 접근 방식이 필요합니다.
Layer0은 복잡하고 역동적인 이커머스 웹사이트가 개발 속도와 수익 성장을 높이고 DevOps 비용을 절감하는 동시에 1초 미만의 속도로 발전할 수 있도록 지원합니다. 또한 동적 콘텐츠에 대해 95% 이상의 캐시 적중률을 제공하는 CDN(CDN-as-JavaScript)을 포함하고 있으며, 다른 CDN의 경우 15%에 불과합니다.
Layer0은 동적 가격 책정 및 실시간 재고 조회는 물론 수십 개의 태그 및 스크립트를 사용하여 대형 전자 상거래 웹 사이트에 500ms 미만의 중간 페이지 로드를 일관되게 제공합니다. 이러한 속도 향상을 통해 전환율이 15-30% 증가하고 가시성이 향상되며 도달률이 높아지고 궁극적으로 수익이 증가하는 것으로 알려져 있습니다.
사이트 속도 전문가와의 상담식 대화를 예약하여 즉각적인 전자 상거래 웹 사이트를 통해 경쟁 우위를 확보하는 방법을 알아보십시오.
