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

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

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

성능 측정

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

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

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

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

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

• 골격이 사용되고 레이아웃이 안정적인지 확인합니다.
• 브라우저 창의 ‘Waiting for…'(또는 이와 유사한) 메시지(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 모드를 사용하십시오.