이 우수사례에서는 PageSpeed Insights (PSI), Chrome DevTools, scheduler.yield API와 같은 Google 도구를 활용하여 Trendyol에서 사용하는 React의 INP를 디버깅하고 개선하는 단계별 워크플로를 설명합니다.
전자상거래 웹사이트의 두 가지 중요한 구성요소는 제품 목록 페이지(PLP)와 제품 세부정보 페이지 (PDP)입니다. 전자상거래 트래픽은 주로 이메일 캠페인, 소셜 미디어 또는 광고를 통해 제품 등록정보 페이지에서 발생합니다. 따라서 구매에 걸리는 시간을 줄일 수 있도록 PLP 환경을 신중하게 설계하는 것이 중요합니다. 성공을 위해서는 사용자 환경 품질에 우선순위를 두는 것이 필수적입니다. Milliseconds Make Millions와 같은 연구 간행물에서는 웹 성능이 소비자가 온라인에서 돈을 지출하고 브랜드와 소통하려는 의지에 얼마나 큰 영향을 미치는지 이미 밝혀냈습니다.
Trendyol은 약 3,000만 명의 고객과 240, 000명의 판매자가 있는 전자상거래 플랫폼으로, 이를 통해 터키 최초의 비즈니스이며 가치가 100억 달러가 넘으며 세계 최고의 전자상거래 플랫폼 중 하나가 되었습니다.
콘텐츠의 유연성을 유지하고 이전 버전의 React로 작업하면서 가능한 한 최고의 사용자 환경을 제공하는 목표를 달성하기 위해 Trendyol은 개선이 필요한 주요 측정항목으로 INP (다음 페인트에 대한 상호작용)에 중점을 두었습니다. 이 우수사례에서는 PLP에서 INP를 개선하여 INP를 50% 감소하고 검색 결과 비즈니스 측정항목을 1% 향상한 Trendyol의 여정을 설명합니다.
Trendyol의 INP 조사 절차
INP는 사용자 입력에 대한 웹사이트의 응답성을 측정합니다. 우수한 INP란 브라우저가 모든 사용자 입력에 빠르고 안정적으로 반응하고 페이지를 다시 그릴 수 있음을 나타내며, 이는 우수한 사용자 환경의 핵심 구성요소입니다.
PLP에서 INP를 개선하기 위한 Trendyol의 여정은 기능을 개선하기 전에 사용자 환경을 철저히 분석하면서 시작되었습니다. PSI 보고서에 따르면 PLP의 실제 사용자 환경은 다음 그림과 같이 모바일에서 963밀리초의 INP를 갖습니다.
우수한 응답성을 보장하기 위해 사이트 소유자는 INP를 200밀리초 미만으로 목표로 삼아야 합니다. 즉, 당시 Trendyol의 INP가 '나쁨' 범위에 있었습니다.
다행히 PSI에서는 Chrome 사용자 환경 보고서 (CrUX)에 포함된 페이지의 필드 데이터와 자세한 실험실 진단 데이터를 모두 제공합니다. 실습 데이터를 살펴본 Lighthouse의 자바스크립트 실행 시간 감사에 따르면 search-result-v2 스크립트가 페이지의 다른 스크립트보다 더 오랫동안 기본 스레드를 차지하고 있었습니다.
실제 병목 현상을 식별하기 위해 Chrome DevTools의 성능 패널을 사용하여 PLP 환경의 문제를 해결하고 문제의 원인을 파악했습니다. Chrome DevTools에서 4배의 CPU 속도 저하로 모바일 성능을 에뮬레이션하면 기본 스레드에서 700~900밀리초의 긴 작업이 밝혀졌습니다. 기본 스레드가 다른 작업에 50밀리초 넘게 머물러 있다면 제때 사용자 입력에 응답하지 못해 사용자 환경이 저하될 수 있습니다.
가장 긴 작업은 React 구성요소 내 검색결과 스크립트의 Intersection Observer API 콜백으로 인해 발생했습니다. 이 시점에서 Google은 긴 작업을 작은 단위로 나누어 브라우저가 사용자 상호작용을 포함하여 우선순위가 높은 작업에 더 많은 기회를 제공할 수 있는 방법을 모색하기 시작했습니다.
Intersection Observer 콜백 내에서 React 재렌더링을 트리거하는 setState 작업을 사용하면 높은 비용이 발생하므로 기본 스레드를 너무 오래 차지하여 저사양 기기에서 문제가 될 수 있습니다.
개발자가 작업을 더 작은 작업으로 나누는 데 사용한 메서드 중 하나는 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 코드에 이러한 양보하는 방법을 추가하면 INP가 개선됩니다. 긴 주요 작업이 일련의 작은 작업으로 분할되어 사용자 상호작용 및 후속 렌더링 작업과 같이 우선순위가 높은 작업을 다른 작업보다 더 빨리 실행할 수 있기 때문입니다.
Trendyol은 PuzzleJs 프레임워크를 사용하여 React v16.9.0을 사용하는 마이크로 프런트엔드 아키텍처를 구현합니다. React 18을 사용해도 동일한 성능을 얻을 수 있지만 여러 가지 이유로 현재 Trendyol은 업그레이드할 수 없습니다.
비즈니스 결과
구현된 INP 개선의 영향을 측정하기 위해 A/B 테스트를 실행하여 비즈니스 측정항목이 어떤 영향을 받았는지 확인했습니다. 전반적으로 PLP 변경으로 INP가 50% 감소하고 등록정보 페이지에서 제품 세부정보 페이지로 연결되는 사용자 세션당 클릭률이 1% 상승하는 등 전반적으로 크게 개선되었습니다. 다음 그림에서 시간 경과에 따라 PLP에서 INP가 어떻게 개선되었는지 확인할 수 있습니다.
결론
INP 최적화는 복잡하고 반복적인 프로세스이지만 명확한 워크플로를 제시하면 더 쉽게 진행할 수 있습니다. 웹사이트의 INP를 디버깅하고 개선하는 간단한 방법은 자체 필드 데이터를 수집하고 있는지에 따라 다릅니다. 아직 사용하고 있지 않다면 PSI와 Lighthouse로 시작하는 것이 좋습니다. 문제가 있는 페이지를 파악하면 DevTools를 사용하여 더 자세히 조사하여 문제를 재현해 볼 수 있습니다.
브라우저에 긴급한 작업을 할 수 있는 기회를 때때로 더 많이 주기 위해 기본 스레드를 가끔 제공하면 웹사이트의 응답성이 향상되어 고객의 사용자 환경이 개선됩니다. scheduler.yield()와 같은 최신 예약 API를 사용하면 이 작업이 더 쉬워집니다.
이 작업에 기여해 주신 Google의 제레미 바그너, 배리 폴라드, 후세인 디지르데 씨와 Trendyol의 엔지니어링팀에 감사의 말씀을 전합니다.