이 우수사례에서는 INP 디버깅 및 개선을 위한 단계별 워크플로를 설명합니다.
Trendyol에서 PageSpeed 등의 Google 도구를 활용하여 React에서 사용
Insights (PSI), Chrome DevTools, scheduler.yield API
모든 전자상거래 웹사이트의 두 가지 중요한 구성요소: 제품 등록정보 페이지 제품 세부정보 페이지(PDP)에 액세스할 수 있습니다. 전자상거래 트래픽은 주로 이메일 캠페인, 소셜 미디어 또는 있습니다. 따라서 PLP 환경이 세심하게 설계된 제품 및 서비스. 우선순위 지정 사용자 경험의 품질은 성공을 위한 필수 요소입니다. 연구 간행물 예를 들어 Milliseconds Make Millions가 주목을 받는 웹 성능이 소비자의 기꺼이 비용을 지출하고 온라인상에서 브랜드와 소통할 수 있습니다.
Trendyol은 약 3천만 명의 고객을 보유한 전자상거래 플랫폼입니다. 판매자 240,000명을 유치한 덕분에 튀르키예 최초의 비즈니스로 등극할 수 있었습니다. 가치는 100억 달러가 넘으며 업계 최고의 전자상거래 플랫폼 중 하나임 할 수 있습니다.
대규모로 가능한 최상의 사용자 환경을 제공한다는 목표를 달성하기 위해 콘텐츠의 유연성을 유지하고 이전 버전의 React, Trendyol은 다음 페인트에 대한 상호작용 (INP)에 개선할 수 있습니다 이 우수사례에서는 전체 시장의 INP를 개선하기 위한 Trendyol의 여정을 설명합니다. PLP, INP 50% 감소 및 검색 1% 상승 결과 비즈니스 측정항목이 포함될 수 있습니다.
Trendyol의 INP 조사 프로세스
INP는 사용자 입력에 대한 웹사이트의 응답성을 측정합니다. 양호한 INP는 다음을 나타냅니다. 브라우저가 모든 사용자 입력에 빠르고 안정적으로 응답하고 다시 페인트를 칠해야 합니다. 이는 우수한 사용자 환경의 핵심 구성요소입니다.
PLP에서 INP를 개선하기 위한 Trendyol의 여정은 개선이 이루어지기 전에 사용자 환경을 개선할 수 있습니다. PSI 보고서에 따르면 PLP의 실제 사용자 환경은 963밀리초의 모바일을 사용하세요.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">신속한 대응을 위해 사이트 소유자는 INP를 이하 또는 200밀리초로 설정할 수 있습니다. 이는 해당 시점에 Trendyol의 INP가 '나쁨' 범위입니다.
다행히 PSI에서는 Chrome 사용자 관리 콘솔에 포함된 페이지에 대해 두 필드 데이터를 모두 제공합니다.
실험 환경 보고서 (CrUX)와 자세한 실험실 진단 데이터 실습 살펴보기
Lighthouse의 JavaScript 실행 시간 감사에서
search-result-v2 스크립트가 다른 스크립트보다 더 오랫동안 기본 스레드를 차지하고 있었습니다.
있습니다.
<ph type="x-smartling-placeholder">실제 병목 현상을 식별하기 위해 Chrome의 성능 패널을 사용했습니다. DevTools를 사용해 PLP 환경의 문제를 해결하고 있습니다. Chrome DevTools에서 CPU 4배 감속으로 모바일 성능 에뮬레이션 기본 스레드에서 700~900밀리초의 긴 작업이 확인되었습니다. 기본 스레드가 50밀리초 이상 다른 작업을 하는 경우 사용자 입력에 적시에 응답하지 못하여 있습니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">가장 긴 작업은 Intersection Observer API 콜백이 검색 결과 스크립트를 생성합니다. 이 시점에서 우리는 긴 작업을 작은 덩어리로 나눠서 브라우저에 더 많은 작업을 사용자 상호작용을 포함하여 우선순위가 더 높은 작업에 응답할 수 있는 기회의 비중을 줄일 수 있습니다.
React를 트리거하는 setState 작업을 사용하면
Intersection Observer 콜백 내에서 다시 렌더링하면 높은 비용이 발생하므로
이는 기본 스레드를 점유하여 저사양 기기에서 문제가 될 수 있습니다.
너무 깁니다.
개발자가 작업을 더 작은 작업으로 분해하는 데 사용하는 한 가지 방법
setTimeout과(와) 관련되어 있습니다. 우리는 이 기법을 사용하여
setState 호출을 별도의 작업으로 호출할 수 있습니다. setTimeout가 지연을 허용하더라도
JavaScript 실행에서는 우선순위를 제어할 수 없습니다. 이로 인해
scheduler.yield 오리진 트라이얼에 참여해 보세요
스크립트 실행을 계속합니다.
/*
* Yielding method using scheduler.yield, falling back to setTimeout:
*/
async function yieldToMain() {
if('scheduler' in window && 'yield' in scheduler) {
return await scheduler.yield();
}
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
/*
* Yielding to the main thread before changing the state of the component:
*/
const observer = new IntersectionObserver((entries) => {
entries.forEach(handleIntersection);
const maxNumberOfEntries = Math.max(...this.intersectingEntries);
if (Number.isFinite(maxNumberOfEntries)) {
await this.yieldToMain();
this.setState({ count: maxNumberOfEntries });
}
}, { threshold: 0.5 });
이 생성 메서드를 PLP 코드에 추가하면 주요 긴 작업이 일련의 작은 작업으로 분할되어 즉, 사용자 상호작용 및 후속 렌더링 작업과 같이 우선순위가 더 높은 작업을 더 빨리 발생합니다
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Trendyol은 PuzzleJs 프레임워크를 사용하여 마이크로 프런트엔드를 구현합니다. 아키텍처를 살펴보겠습니다. React 18을 사용하면 하지만 여러 가지 이유로 현재 Trendyol은 있습니다.
비즈니스 결과
구현된 INP 개선의 영향을 측정하기 위해 A/B 테스트를 실행하여 비즈니스 측정항목이 어떤 영향을 받았는지 확인할 수 있습니다. 전반적으로 PLP를 변경한 결과 INP가 50% 감소하고 기존 대비 1%가 감소하는 등 등록정보 페이지에서 제품 세부정보 페이지까지의 클릭률 증가 사용자당 평균 수익입니다 다음 그림에서는 시간 경과에 따른 PLP:
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">결론
INP 최적화는 복잡하고 반복적인 프로세스이지만 더 쉽게 만들 수 있습니다. 워크플로우가 명확해야 합니다 디버깅 및 성능 개선을 위한 간단한 접근 방식은 웹사이트의 INP는 자체 현장 데이터를 수집하고 있는지 여부에 따라 다릅니다. 만약 PSI와 Lighthouse는 좋은 출발점입니다 배포를 식별한 후에는 문제가 있는 페이지의 경우 DevTools를 사용하여 문제를 재현하기 위해 더 깊이 파고들 수 있습니다. 있습니다
때때로 기본 스레드에 양보하여 브라우저에 더 많은 것을 제공합니다.
급한 작업을 할 수 있는 기회가 있으면 웹사이트의 반응성이 향상되고,
고객 경험을 개선하는 데 도움이 됩니다. 최신 예약 API
scheduler.yield()처럼 있으면 이 작업이 더 쉬워집니다.
기여해 주셔서 감사합니다.