Home 방법 이커머스 사이트에 1초 미만의 로드를 보장합니다.
Applications

이커머스 사이트에 1초 미만의 로드를 보장합니다.

About The Author

Outline

이커머스 사이트의 로딩 시간을 1초 이내로 보장하는 것은 어려운 일입니다. Layer0에서 우리는 훨씬 더 간단한 프로세스를 만들려고 노력했으며 Layer0은 이 이정표를 달성하는 데 도움을 줍니다. 우리가 여기서 한 일은 생산 사이트가 엄청나게 빠르며 최소한의 시간만 투자할 수 있도록 따를 수 있는 체크리스트를 만드는 것입니다.

먼저 속도를 측정하는 방법에 대해 알아보겠습니다.

성능 측정

** 이 경우 SpeedCurve (SC)를 사용했지만 WebPageTest 또는 다른 제품을 사용할 수 있습니다.
우리는 측정을 위해 LCP 지표에 초점을 맞추고 있습니다. 우리의 목표는 다음과 같습니다.

  • 홈 페이지 < 1.5s
  • PLP to PDP 네비게이션: 0.5s

또한 다음과 같은 세 가지 사례를 염두에 두어야 합니다. 이 경우 소비자 경험에 영향을 미치기 때문입니다. (a) 유기적 검색 트래픽의 결과로 PLP/PDP로 직접 이동하고 (b) 장바구니/결제 페이지로 이동할 때 – 비즈니스 관점에서 고객에게 매우 중요합니다.

  • 랜딩 페이지로서의 PLP
  • 랜딩 페이지로서의 PDP
  • PWA -> 출처/레거시(예: 카트/체크아웃)

몇 가지 주요 속도 향상을 얻을 수 있는 몇 가지 기본 점검부터 시작하겠습니다.

  • 골격이 사용되고 레이아웃이 안정적인지 확인합니다.
  • ‘기다리는 중…’ 브라우저 창의 (또는 이와 유사한) 메시지(SC가 사용하는 WebPageTest의 알려진 문제): 워터폴 이미지를 검사하여 메트릭 성능 저하의 유일한 원인인지 확인합니다.
  • 저해상도 이미지에서 고해상도 이미지로 전환하면 SC의 메트릭이 저하될 수 있습니다. 워터폴 이미지를 검사하여 이것이 유일한 원인인지 확인합니다.
  • 사용자 지정 구성 요소의 아티팩트(모범 사례를 염두에 두고 구축된 기본 RSF 구성 요소와 비교) – 구성 요소 (s)가 과도하게 렌더링되도록 하는 스타일/요소 다시 워터폴 이미지를 검사하여 눈에 보이는 인공물(예: 저해상도 이미지 – PLP- PDP 전환의 이미지 회전식)이 있는지 확인합니다.>>

PLP에서 PDP로 탐색

PLP(검색 결과 또는 카테고리/브랜드 페이지)에서 PDP 페이지로 이동하는 것은 전체 소비자 여정에서 가장 중요한 탐색 요소입니다. 각 구매에 대해 평균 사용자는 8.8 PDP 페이지로 이동합니다. 이렇게 높은 빈도로 페이지 속도가 느려지더라도 사용자 경험에 큰 악영향을 미칠 수 있습니다. 다음은 PDP에 대한 완벽한 PLP 사용자 경험을 보장하기 위해 따라야 할 몇 가지 사항입니다.

  • 접기 위 페이지에 골격을 사용하고 레이아웃 안정성을 확인합니다.
  • 접기 위 콘텐츠가 사용자 장치의 화면 높이와 일치하는지 확인합니다.
  • 캐싱이 적절하게 구성되었는지 확인합니다. 즉, 일반 페이지 데이터를 캐싱하고 사용자별 데이터 요소를 캐싱하지 않습니다. (자세한 내용은 캐싱에 대한 가이드를 참조하십시오.)
  • 프리페치 사용(자세한 내용은 프리페치에 대한 가이드 참조)
  • ForwardThumbnail 구성 요소에서 깜박임을 방지하기 위해 모든 곳에서 동일한 축소판 인스턴스를 사용합니다.
  • PLP에서 PDP로 많은 정보를 전달하여 PDP에 해당 정보를 표시합니다.

홈 페이지 로드

홈 페이지는 일반적으로 사용자가 웹 사이트와 처음으로 수행하는 상호 작용입니다. 체크아웃 및 주문에 대한 사용자 흐름을 원활하게 하기 위해서는 여정의 시작을 원활하게 하는 것이 중요합니다. 다음은 훌륭한 홈 페이지 경험을 보장하기 위해 따라야 할 몇 가지 사항입니다.

  • 캐싱이 적절하게 구성되었는지 확인합니다. 즉, 일반 페이지 데이터를 캐싱하고 사용자별 데이터 요소를 캐싱하지 않습니다.
  • 폴딩 콘텐츠 아래에 게으른 로드
  • 사전 연결 태그 사용
  • 이미지 최적화
  • 페이지 로드가 완료될 때까지 수분 공급 지연
  • 기타 개선 사항

PDP 페이지 로드

사용자가 PDP 페이지 자체에 대한 좋은 경험을 가지고 있지 않다면 홈 페이지 및 PLP를 PDP 탐색으로 최적화하는 데 시간을 소비하는 것은 쓸모가 없습니다. 가장 중요한 정보가 가능한 한 빨리 사용자에게 제공되도록 보장하고 즉시 표시되거나 실행 가능하지 않은 객체를 지연시키는 것이 PDP 페이지 로드를 최적화하는 데 중요합니다. 다음은 PDP 페이지를 최적화할 때 유의해야 할 몇 가지 사항입니다.

  • API 응답을 포함한 일반 자산 및 데이터를 캐시하여 즉각적인 데이터 검색을 보장하고 백엔드 시스템의 병목 현상을 줄입니다.
  • 폴딩 아래에 컨텐츠 로드 게으름
  • 최적화된 첫 번째 이미지를 사용하여 로드 시간을 줄입니다.
  • 별도의 축소판 그림과 핀치 및 확대/축소 이미지를 사용하고 요청 시에만 이미지를 로드합니다.

PLP 페이지 로드

  • 폴드 이상 결과를 위해 PDP 이미지를 사전 로드합니다.
  • 폴딩 아래에 컨텐츠 로드 게으름
  • 배경색 변경 또는 기타 시각적 요소와 같은 PLP 페이지 변경 확인 요청을 줄이거나 피합니다.

더 많은 포인터

위에서 언급한 방법은 사용자가 여행을 통해 상호 작용하는 대부분의 것들을 다룹니다. 하지만 플랫폼에는 눈에 보이는 것 이상의 것이 있습니다. 플랫폼의 내부 작동이 최적화되었는지 확인하는 것이 우리가 취해야 할 다음 단계입니다. 성능의 추가 이득을 얻기 위해 확인해야 할 사항은 다음과 같습니다.

  • TTL: analyze=True NPM 실행 빌드를 사용하여 번들 크기 확인
  • FCP: 고객이 WebFont를 사용하기로 선택한 경우 LH 점수가 떨어질 수 있습니다.
  • 속도 지수: 화면에 팝업이 있으면 페이지의 속도 지수가 줄어듭니다.
  • 모듈 범위, 즉 클라이언트측에서 긴 실행 작업을 피합니다.
  • React Hook은 불필요한 재렌더링이 발생하기 쉽습니다. 메트릭에 영향을 미칠 가능성은 없지만 느린 웹 사이트를 만듭니다.
  • 로컬 컴퓨터 LH 점수 및/또는 SpeedCurve 결과가 아닌 코드 변경의 영향을 이해하려면 PSI 점수를 사용합니다. 실제 LH 점수를 얻으려면 프로덕션 빌드에서 4G 모드를 사용하십시오.