웹 성능에 집중하여 Tokopedia의 클릭률을 35% 개선한 방법

렌더링 차단 또는 장기 실행 JavaScript는 성능 문제의 일반적인 원인입니다. 팀은 이 문제를 최소화하기 위해 여러 조치를 취했습니다.

• 서드 파티 스크립트를 선택적으로 로드하여 중요한 렌더링 경로에 맞게 최적화하는 스크립트 컨트롤러 라이브러리를 빌드했습니다.
• 무거운 라이브러리를 더 가벼운 라이브러리로 대체했습니다.
• 코드 분할을 구현하고 스크롤 없이 볼 수 있는 콘텐츠에 최적화되었습니다.
• 적응형 로드를 구현했습니다. 예를 들어 빠른 네트워크의 기기에는 고화질 이미지만 로드하고 느린 네트워크의 기기에는 저화질 이미지를 사용합니다.
• 스크롤해야 볼 수 있는 부분에 지연 로드된 이미지.
• 중요하지 않은 JavaScript의 로드 지연

팀에서는 웹페이지의 품질을 개선하기 위해 Lighthouse 및 기타 도구를 사용하여 성능 모니터링 대시보드를 빌드했습니다.

• 네트워크 품질, 인프라 모니터링, 프런트엔드 성능 및 서버 성능을 측정합니다.
• 웹 플랫폼 API (예: Resource Timing API 및 Server-Timing 헤더), PageSpeed Insights (PSI) API, Chrome 사용자 환경 보고서 데이터를 조합하여 현장 및 실험실 측정항목을 모니터링합니다.
• Lighthouse의 이미지를 분석하여 이미지 최적화 기회를 파악합니다.
• 지속적 통합 (CI) 중에 번들 크기 예산을 적용합니다. 번들 크기가 예산을 초과하면 CI 실행이 실패합니다.