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