모바일 전자상거래 개선: 웹사이트 속도 향상

다양한 통계에 따르면 로드 시간의 1초가 전자 상거래 상점의 전환율에 미치는 차이가 있습니다. 매장의 전환율에 영향을 줄 수 있는 다른 많은 요소가 있기 때문에 저는 개인적으로 이러한 많은 통계에 대해 약간 회의적입니다. 그러나 거의 모든 소매 웹사이트에서 모바일 전자 상거래가 우세하고 데스크톱 브라우징보다 브라우징이 중요하므로 속도가 사용자 경험에 직접적인 영향을 미치기 때문에 전자 상거래 상점이 실제로 가능한 한 빠른 것이 중요합니다.

웹사이트의 프런트 엔드를 최적화하는 방법에는 여러 가지가 있습니다. 일부는 복잡하고 비용이 많이 들고 일부는 매우 간단합니다. 초기에는 빠르고 쉽게 큰 성과를 거둘 수 있지만 결국에는 수익이 줄어들고 점진적인 개선이 더 작아지기 시작한다는 사실을 종종 알게 될 것입니다.

얼마나 멀리 갈 것인지는 온라인 수익의 규모와 더 작은 점진적 개선으로 인해 모바일 전자 상거래에서 얼마나 많은 추가 수익을 올릴 수 있는지에 달려 있습니다.

전환율을 0.1% 개선하면 소규모 소매업체보다 대규모 소매업체에서 훨씬 더 큰 투자 수익을 얻을 수 있습니다.

최고의 모바일 전자 상거래 경험을 위해 이미지 최적화

이미지 최적화는 페이지 로드 시간을 빠르고 쉽게 크게 줄일 수 있는 영역입니다. 나는 종종 이미지 품질과 크기와 관련하여 그래픽 디자이너, 머천다이저 및 전자 상거래 관리자 사이에 충돌을 봅니다. 그래픽 디자이너는 가능한 가장 크고 높은 해상도의 이미지를 원하지만 그들이 만드는 이미지의 속도 영향을 항상 고려하지는 않습니다. 판매자는 가장 크고 해상도가 높은 제품 이미지를 원할 가능성이 높은 반면 전자 상거래 관리자는 전체 페이지 속도에 대한 가시성과 감사를 가진 유일한 사람일 수 있습니다.

이미지 최적화는 항상 품질과 파일 크기 간의 균형입니다. 이미지의 품질이 높을수록 파일 크기가 커집니다. 기본 크기와 이미지의 복잡성도 파일 크기에 영향을 줍니다. 상세하고 복잡한 배경의 이미지는 일반 배경의 이미지보다 파일 크기가 훨씬 더 클 수 있습니다.

디자이너는 종종 단순한 색상이 아닌 다양한 색상과 배경을 사용하여 웹사이트에 효과적인 배너를 만들고 싶어합니다. 이것은 시각적 효과가 높을 수 있지만 그 결과 일반 배경의 유사한 배너보다 파일 크기가 훨씬 더 커집니다. Apple의 Retina Display와 같은 고해상도 화면의 도입은 화면이 낮은 품질의 이미지에서 불완전성을 강조하기 때문에 균형을 유지하기가 훨씬 더 어려워집니다.

모든 팀 구성원이 프런트 엔드 최적화와 그래픽 결정이 이미지 크기와 페이지 속도에 미치는 영향을 이해하는 것이 중요합니다.

Photoshop과 같은 표준 디자인 도구를 사용하면 디자이너가 이미지를 최적화할 수 있지만 웹사이트에서 이미지를 자동으로 최적화할 수 있는 타사 서비스가 많이 있습니다. Akamai와 Ampliance는 모두 구성된 규칙 세트를 기반으로 이미지를 최적화하는 이미지 관리 서비스를 제공합니다. 파일 크기를 가능한 한 작게 하기 위해 브라우저를 지원하기 위해 jpeg 파일을 WebP 이미지로 변환할 수도 있습니다.

Envoy에서 우리는 최근 고객의 웹사이트에서 Akamai 이미지 관리자를 시험해 보았고 PLP 이미지의 파일 크기가 평균 80% 감소했으며 시각적 품질은 눈에 띄게 저하되지 않았습니다. 그 결과 PLP(제품 목록 페이지) 페이지의 전체 가중치가 크게 떨어지고 Google Pagespeed 점수가 즉시 크게 향상되었습니다. 이를 위해 타사 서비스를 사용하지 않으려면 웹 서버에 로컬로 설치하는 서비스인 Thumbor와 같은 오픈 소스 도구를 구현할 수 있습니다. 이와 같은 도구는 즉시 이미지를 자동으로 최적화한 다음 저장소에 캐시합니다.

CDN 사용

CDN(콘텐츠 전송 네트워크)은 일반적으로 에지로 알려진 서버 네트워크에서 콘텐츠를 캐시하는 서비스입니다. 이러한 서버는 일반적으로 원본 서버보다 사용자에게 물리적으로 더 가까운 위치에 콘텐츠가 캐시되도록 여러 위치에서 전 세계적으로 호스팅됩니다. CDN은 종종 이미지, CSS, JavaScript 및 비디오를 캐시하는 데 사용되지만 전체 HTML 페이지를 캐시하는 데 사용할 수도 있습니다.

전체 HTML 페이지를 캐싱하여 사용자에게 페이지를 전달하는 속도를 크게 높일 수 있습니다. HTML이 캐시되기 때문에 원본 웹 애플리케이션은 페이지를 생성하고 요청할 때마다 사용자에게 페이지를 반환할 필요가 없으며 CDN 캐시 서버(Point of Presence)는 원본보다 사용자에게 물리적으로 더 가깝습니다. 서버. CDN은 또한 사용자에게 콘텐츠를 압축하고 제공하는 속도를 높이는 기술을 가지고 있어 훨씬 더 빠른 경험을 제공합니다.

CDN은 또한 원본 서버의 부하를 크게 줄일 수 있습니다. PLP 페이지는 웹 애플리케이션이 즉석에서 생성하기 위해 프로세서를 많이 사용하는 페이지인 경우가 많습니다. 여기에는 많은 수의 제품과 패싯이 포함될 수 있으며 모두 많은 처리를 추가합니다. 대부분의 경우 PLP 페이지는 한 시간에서 다음 시간으로 변경되지 않으므로 해당 페이지를 한 시간 동안 캐싱하는 것이 완벽하게 가능합니다. 잠재적으로 한 시간 내에 해당 페이지를 수천 번 생성하는 대신 원본 서버에서 한 번만 생성해야 합니다. 실제로 많은 CDN이 여러 개의 독립적인 캐시를 갖기 때문에 그렇게 작동하지 않지만 여전히 약 60%의 오프로드를 기대할 수 있습니다. 즉, 원본 서버와 애플리케이션은 CDN이 없는 경우보다 요청을 60% 적게 받습니다.

속도 분석 도구를 사용하여 모바일 전자 상거래 경험 최적화

웹 페이지를 분석하고 웹 사이트를 더 빠르게 만드는 방법에 대한 권장 사항을 제공할 수 있는 무료 및 유료 온라인 도구가 많이 있습니다. 아마도 가장 많이 사용되는 세 가지 무료 도구는 Google PageSpeed ​​Insights, Yslow 및 Webpagetest입니다. 이러한 각 도구는 약간 다르지만 모두 URL을 분석하고 점수와 함께 권장 사항이 포함된 보고서를 보냅니다.

이러한 도구는 웹 페이지의 속도를 늦추는 요소를 빠르게 표시하는 데 매우 유용할 수 있으며 일부 도구는 이러한 문제를 해결하기 위한 솔루션을 제공하기도 합니다. 포괄적이지는 않지만 큰 영향을 미칠 수 있는 변경 사항을 빠르고 쉽게 찾을 수 있는 방법입니다.

타사 스크립트 사용 최소화

대부분의 B2C 전자 상거래 웹 사이트에는 제휴 네트워크 추적 스크립트에서 MVT 테스트에 이르기까지 다양한 타사 리소스가 포함되어 있습니다. 여기에는 Twitter 피드, Facebook 추적 또는 외부 글꼴이 포함될 수 있습니다. 이러한 외부 리소스는 매우 신중하게 관리하지 않으면 웹 사이트 속도를 크게 저하시킬 수 있습니다.

웹 페이지 속도 분석기를 사용할 때 이러한 리소스가 페이지 속도에 기여하는 요소 목록에 지속적으로 나타나는 것을 종종 볼 수 있습니다. 가장 큰 문제 중 하나는 이러한 리소스가 타사에서 개발 및 호스팅되기 때문에 이러한 리소스의 크기와 최적화를 제어할 수 없다는 것입니다.

웹사이트에서 호출하는 타사 리소스를 주기적으로 감사하고 모든 리소스가 올바른 위치와 올바른 방식으로 실행되고 실제로 사용하고 있는지 확인해야 합니다. 더 이상 사용되지 않는 서비스에 대한 추적 스크립트가 GTM을 사용하여 추가되었고 서비스 사용이 중지되었을 때 누군가 이를 제거하는 것을 잊었기 때문에 계속 실행되는 경우를 많이 보았습니다.

구글 AMP

Google Accelerated Mobile Pages 프로젝트는 특히 모바일 장치에 전달되는 콘텐츠의 속도와 성능을 개선하는 것을 목표로 하는 오픈 소스 웹 게시 기술입니다. Google이 주도하고 2015년에 시작된 AMP 기술은 원래 뉴스 콘텐츠 전달을 위해 설계되었습니다. AMP 페이지는 매우 가볍고 AMP가 아닌 동등한 페이지보다 약 10배 적은 데이터를 사용하는 경향이 있으며 종종 1초 이내에 로드됩니다. 하지만 큰 함정이 있습니다. AMP 페이지는 매우 제한된 기능 세트를 지원하므로 많은 애플리케이션, 특히 풍부하고 기능적인 전자 상거래 웹사이트에는 적합하지 않습니다.

소수의 소매업체에서 전자상거래용 AMP를 시도했지만 성공을 거두지 못했습니다. 훨씬 더 빠른 페이지를 가지고 있지만 AMP의 한계를 중심으로 기능과 사용자 경험을 완전히 재설계해야 했습니다. 결제와 같은 웹사이트의 복잡한 영역은 AMP에서 구축할 수 없으므로 사용자는 표준 HTML 또는 PWA(프로그레시브 웹 앱) 결제로 이동합니다.

AMP는 매우 흥미로운 프로젝트이고 뉴스 산업에서 잘 채택되었지만 아직 전자 상거래에서 실질적인 견인력을 보여주지는 못하고 있습니다. Google이 사용 가능한 기능을 계속 확장하면 이것이 전자 상거래를 위한 실행 가능한 도구가 되는 것을 볼 수 있습니다.

적응하기

대부분의 전자 상거래 웹 사이트는 이제 보고 있는 화면에 맞게 레이아웃이 동적으로 조정되는 반응형으로 구축됩니다. 이는 웹사이트의 모바일 버전과 데스크톱 버전을 별도로 사용하는 것보다 확실히 선호되며 일반적으로 사용 가능한 다양한 화면 크기에서 사이트가 잘 작동합니다.

그러나 반응형 디자인을 사용하면 웹 사이트를 보는 장치에 관계없이 동일한 자산이 사용되는 경향이 있습니다. 배너 및 제품 이미지는 종종 작은 크기로 표시되거나 모바일 보기에서 숨겨지지만 큰 파일은 여전히 ​​다운로드됩니다.

여기에서 적응형 디자인 요소를 사용할 수 있습니다. 화면 크기에 따라 동적으로 변경되는 유동적인 디자인을 만드는 대신 적응형 웹 사이트에는 특정 화면 크기에 맞게 설계된 여러 고정 레이아웃이 있습니다. 이를 통해 디자이너는 각 특정 화면 크기에 대한 사용자 경험을 엄격하게 제어하고 최적화할 수 있습니다.

이것은 구현하는 데 더 복잡하고 시간이 많이 걸리지만 주요 속도 이점 중 하나는 모바일 장치에서 더 큰 이미지를 더 작은 크기로 표시하는 대신 해당 장치에서 특정 모바일에 최적화된 이미지를 로드하므로 로드 시간 감소. 반응형 디자인에서는 모바일에서 사이트를 볼 때 특정 데스크톱 요소를 숨길 수 있습니다. 적응형 디자인에서는 전혀 로드하지 않습니다.

완전히 적응하는 방법에 대한 실용적인 대안 중 하나는 반응형 디자인에서 JavaScript를 사용하여 사용 중인 화면 크기를 감지하고 단순히 더 큰 이미지를 더 작은 크기로 표시하는 대신 모바일에 최적화된 이미지가 요청 및 표시되도록 하는 것입니다. 이렇게 하면 표시되는 이미지와 콘텐츠만 요청되고 따라서 여전히 반응형 디자인의 이점을 제공하면서 다운로드됩니다.

모바일 전자 상거래 사이트 페이지의 속도를 높이는 다양한 방법이 있습니다. 일부는 개발, 일부는 타사 서비스 사용, 일부는 디자인과 기능 간의 균형을 포함합니다.