제품 세부정보 페이지의 상호작용을 최적화하여 Lighthouse의 최대 잠재적 FID를 90% 줄이고 Chrome 사용자 환경 보고서의 FID를 9% 개선했습니다.
Mercado Libre는 중남미 최대의 전자상거래 및 결제 생태계입니다. 18개 국가에 진출해 있으며 브라질, 멕시코, 아르헨티나에서 시장을 선도하고 있습니다 (고유 방문자 및 페이지 조회수 기준).
웹 성능은 오랫동안 이 회사의 중점사항이었지만 최근에 성능을 모니터링하고 사이트의 여러 부분에 최적화를 적용하는 팀을 구성했습니다.
이 도움말에서는 Mercado Libre의 프런트엔드 아키텍처팀에서 핵심 성능 보고서 중 하나인 첫 입력 지연 시간 (FID)과 실험실 프록시인 총 차단 시간 (TBT)을 최적화하기 위해 수행한 작업을 요약합니다.
90%
Lighthouse의 잠재적인 최대 FID 감소
9%
CrUX에서 FID를 '빠름'으로 인식하는 사용자 증가
긴 작업, 최초 입력 지연, 총 차단 시간
비용이 많이 드는 JavaScript 코드를 실행하면 브라우저의 기본 스레드에서 50ms 이상 실행되는 긴 작업이 발생할 수 있습니다.
FID (첫 입력 지연)는 사용자가 페이지와 처음 상호작용한 시점 (예: 링크를 클릭한 시점)부터 브라우저가 해당 상호작용에 대한 응답으로 이벤트 핸들러 처리를 실제로 시작할 수 있는 시점까지의 시간을 측정합니다. 비용이 많이 드는 JavaScript 코드를 실행하는 사이트에는 여러 개의 긴 작업이 있을 수 있으며, 이는 결국 FID에 부정적인 영향을 미칩니다.
우수한 사용자 환경을 제공하기 위해 사이트의 최초 입력 지연 시간이 100밀리초 미만이 되도록 노력해야 합니다.
Mercado Libre의 사이트는 대부분의 섹션에서 실적이 우수했지만 Chrome 사용자 경험 보고서에서 제품 세부정보 페이지의 FID가 좋지 않은 것으로 확인되었습니다. 이 정보를 바탕으로 사이트의 제품 페이지 상호작용성을 개선하는 데 주력하기로 했습니다.
이러한 페이지에서는 사용자가 복잡한 상호작용을 할 수 있으므로 중요한 기능을 방해하지 않으면서 상호작용성을 최적화하는 것이 목표였습니다.
제품 세부정보 페이지의 상호작용 측정
FID에는 실제 사용자가 필요하므로 실험실에서 측정할 수 없습니다. 하지만 총 차단 시간(TBT) 측정항목은 실험실에서 측정할 수 있으며, 현장에서 FID와 잘 상관관계가 있으며, 상호작용에 영향을 미치는 문제도 포착합니다.
예를 들어 다음 트레이스에서 기본 스레드에서 작업을 실행하는 데 소비된 총 시간은 560ms이지만 이 중 345ms만 총 차단 시간 (50ms를 초과하는 각 작업 부분의 합계)으로 간주됩니다.
Mercado Libre는 실제 제품 세부정보 페이지의 상호작용을 측정하고 개선하기 위해 실험실에서 TBT를 대리 측정항목으로 사용했습니다.
Google에서 취한 일반적인 접근 방식은 다음과 같습니다.
- WebPageTest를 사용하여 실제 기기에서 기본 스레드를 사용 중인 스크립트를 정확하게 파악합니다.
- Lighthouse를 사용하여 최대 첫 입력 지연 예상 시간 (최대 FID) 변경사항의 영향을 확인합니다.
WebPageTest를 사용하여 긴 작업 시각화
WebPageTest (WPT)는 전 세계 여러 위치의 실제 기기에서 테스트를 실행할 수 있는 웹 성능 도구입니다.
Mercado Libre는 WPT를 사용하여 실제 사용자와 유사한 기기 유형과 위치를 선택하여 사용자 환경을 재현했습니다. 특히 멕시코의 Mercado Libre 사용자 경험을 근사화하기 위해 Moto 4G 기기와 버지니아 주 덜레스를 선택했습니다. Mercado Libre는 WPT의 기본 스레드 뷰를 관찰하여 2초 동안 기본 스레드를 차단하는 긴 작업이 연속으로 여러 개 있음을 발견했습니다.
상응하는 폭포식 그래프를 분석한 결과, 이 2초 중 상당 부분이 분석 모듈에서 발생한 것으로 확인되었습니다. 애플리케이션의 기본 번들 크기가 950KB로 컸으며 파싱, 컴파일, 실행하는 데 시간이 오래 걸렸습니다.
Lighthouse를 사용하여 잠재적인 최대 FID 확인하기
Lighthouse에서는 다양한 기기와 위치 중에서 선택할 수 없지만 사이트를 진단하고 성능 권장사항을 얻는 데 매우 유용한 도구입니다.
Mercado Libre에서 제품 세부정보 페이지에서 Lighthouse를 실행한 결과, 최대 잠재적 FID가 유일하게 빨간색으로 표시된 측정항목으로, 값은 1710ms였습니다.
이를 바탕으로 Mercado Libre는 Lighthouse 및 WebPageTest와 같은 실험실 도구에서 최대 잠재적 FID 점수를 개선하는 목표를 세웠습니다. 이러한 개선사항이 실제 사용자에게 영향을 미치고 Chrome 사용자 환경 보고서와 같은 실제 사용자 모니터링 도구에 표시된다고 가정했기 때문입니다.
긴 작업 최적화
첫 번째 반복
Mercado Libre는 기본 스레드 트레이스를 기반으로 비용이 많이 드는 코드를 실행하는 두 모듈을 최적화하는 목표를 세웠습니다.
내부 추적 모듈의 성능을 최적화하기 시작했습니다. 이 모듈에는 모듈 작동에 중요하지 않으므로 안전하게 삭제할 수 있는 CPU 사용량이 많은 작업이 포함되어 있습니다. 그 결과 사이트 전체의 JavaScript가 2% 감소했습니다.
그 후 일반 번들 크기 개선 작업을 시작했습니다.
Mercado Libre는 webpack-bundle-analyzer를 사용하여 최적화 기회를 감지했습니다.
- 처음에는 전체 Lodash 모듈이 필요했습니다. 이는 전체 라이브러리 대신 Lodash의 하위 집합만 로드하는 메서드별 require로 대체되었으며, lodash-webpack-plugin과 함께 사용하여 Lodash를 더욱 축소했습니다.
또한 다음과 같은 Babel 최적화를 적용했습니다.
- @babel/plugin-transform-runtime을 사용하여 코드 전체에서 Babel의 도우미를 재사용하고 번들 크기를 크게 줄입니다.
- babel-plugin-search-and-replace를 사용하여 빌드 시 토큰을 대체하여 기본 번들 내의 대규모 구성 파일을 삭제합니다.
- babel-plugin-transform-react-remove-prop-types를 추가하여 속성 유형을 삭제하여 추가 바이트 수를 절약합니다.
이러한 최적화로 인해 번들 크기가 약 16% 줄었습니다.
효과 측정
이 변경사항으로 Mercado Libre의 연속 긴 작업 시간이 2초에서 1초로 줄었습니다.
Lighthouse에서 최대 첫 입력 지연 예상 시간이 57% 감소한 것으로 나타났습니다.
두 번째 반복
팀은 후속 개선사항을 찾기 위해 긴 작업을 계속 살펴봤습니다.
이 정보를 바탕으로 다음과 같은 변경사항을 구현하기로 결정했습니다.
- 컴파일 및 파싱 시간을 최적화하기 위해 계속해서 기본 번들 크기를 줄입니다 (예: 여러 모듈에서 중복 종속 항목 삭제).
- 구성요소 수준에서 코드 분할을 적용하여 JavaScript를 더 작은 청크로 나누고 다양한 구성요소를 더 스마트하게 로드할 수 있습니다.
- 구성요소 화학식 생성을 지연하여 기본 스레드를 더 스마트하게 사용할 수 있도록 합니다. 이 기법을 일반적으로 부분 하이드라이션이라고 합니다.
효과 측정
결과 WebPageTest 트레이스는 훨씬 더 작은 JS 실행 청크를 보여줍니다.
Lighthouse의 잠재적인 최대 FID 시간도 60%더 줄었습니다.
실제 사용자의 진행률 시각화
WebPageTest 및 Lighthouse와 같은 실험실 테스트 도구는 개발 중에 솔루션을 반복하는 데 유용하지만 진정한 목표는 실제 사용자의 환경을 개선하는 것입니다.
Chrome 사용자 환경 보고서는 Chrome 사용자가 인기 있는 웹페이지에서 실제로 경험한 사용자 환경 측정항목을 제공합니다. 보고서의 데이터는 BigQuery, PageSpeedInsights 또는 CrUX API에서 쿼리를 실행하여 가져올 수 있습니다.
CrUX 대시보드는 핵심 측정항목의 진행 상황을 쉽게 시각화할 수 있는 방법입니다.
다음 단계
웹 성능은 완료된 작업이 아닙니다. Mercado Libre는 이러한 최적화가 사용자에게 가져다주는 가치를 잘 알고 있습니다. 제품 등록정보 페이지의 prefetching, 이미지 최적화 등 사이트 전반에 여러 최적화를 계속 적용하는 동시에 제품 등록정보 페이지에 개선사항을 계속 추가하여 총 차단 시간 (TBT)과 프록시 FID를 더욱 줄이고 있습니다. 이러한 최적화에는 다음이 포함됩니다.
- 코드 분할 솔루션을 반복합니다.
- 서드 파티 스크립트 실행을 개선했습니다.
- 번들러 수준(webpack)에서 애셋 번들링을 지속적으로 개선합니다.
Mercado Libre는 성능을 전체적으로 바라보기 때문에 사이트의 상호작용성을 계속 최적화하는 동시에 현재의 다른 두 가지 Core Web Vitals인 LCP (최대 콘텐츠 페인트) 및 CLS (누적 레이아웃 이동)의 개선 기회도 더욱 적극적으로 평가하기 시작했습니다.