개발자
류준열

최상단 섹션 렌더링 속도 개선

지하철 모바일 환경에서의 최상단 섹션 렌더링 속도를 개선하기 위한 작업을 했다.

동료분이 먼저 이미지 쪼개기를 하셔서 하나의 이미지를 두개의 이미지로 병렬로드 하는 방식으로 개선했다.

그 이후에도 추가 개선할 수 있는 방법을 찾기 위해 퍼포먼스탭을 살펴 보았는데 FCP와 LCP에서 문제점을 찾을 수 있었다.

폰트

ttf하나가 길게 늘어지고 있어서 subset woff2로 변경하니 756kb에서 167kb로 경량화되었다. (subset은 한글, 영어, 숫자들만 다운받았다.)

폰트 경량화를 통해 FCP, TBT 등의 개선을 의도했다.

LCP

이미지 쪼개기를 했지만 lazy loading이 안되어있고, mp4영상이 많아서 네트워크 경쟁이 심한 상태였다.

네트워크 리소스 경쟁을 줄이는 것이 LCP를 개선하는지 확인하기 위해 아래 2가지를 테스트 했다.

1. lazy loading 했을때 LCP가 개선되는지
2. 영상을 모두 제거했을때 LCP가 개선되는지

두 시나리오 모두 LCP가 개선되었다.

네트워크 경쟁을 줄이는 것이 해결책이라는 것을 확인했지만, 영상을 제거할수는 없기 때문에 영상의 리소스를 줄이는 방안을 함께 고민해보기로 하고 이번 작업에서는 폰트, 이미지 레이지 로딩만 적용하였다.

작업 내용

• 폰트 최적화: ttf폰트를 subset woff2로 수정하였다.
• lazy loading: 뷰포트 밖의 이미지들은 최상단 섹션 로드에 포함되지 않도록 lazy loading 하였다.

측정 방식

• fast 4g 환경에서 lighthouse (mobile)과 performance (cpu 4x slowdown)을 측정하였다.
• 측정할때마다 편차가 있기 때문에 시크릿탭에서 10회 측정 후 평균을 취합하였다.

결과

• performance탭 LCP: 5.721s -> 3.594s

• light house: 46.5 -> 55.2 (모바일 18% 개선)

  • FCP: 4s -> 3.28s
  • LCP: 16.9s -> 12.61s
  • TBT: 484ms -> 292ms
  • SI: 10.6s -> 8.25s
  • CLS: 0 -> 0
  • 총 점수: 46.5 -> 55.2

폰트 경량화를 통해 FCP, TBT가 개선되고, lazy loading으로 네트워크 경쟁이 감소하여 LCP가 개선된것이 보인다.

• 비교군을 위해 동일 환경(mobile, fast 4g, cpu 4x slowdown)에서 토스를 측정한 모습은 다음과 같이 performance 탭 LCP는 5.17s, light house는 59점이다.

코드베이스를 모두 확인하지 못해 이번 작업에서는 제외하였지만 추후 개선할 수 있는 목록들은 다음과 같다.

AuthProvider

AuthProvider가 렌더링을 차단하고 있다는 생각이 들어서 코드를 살펴보니, 인증이 완료되기 전까지 null을 리턴하고 있었다.

if(isLoading){
  ...
	return null
}

위 방식때문에 next.js를 쓰고 있지만 항상 CSR이 되고 있는 상황이다.

인증과 무관하게 렌더링이 이루어져야 하지만 이를 개선하기에는 사이드이펙트 파악이 안되어 일단 체크만 해두고 더 적은 리소스로 가시적인 효과를 낼 수 있는 항목들을 찾아 보았다.

컴포넌트 경량화 혹은 코드 스플리팅

최상단 섹션의 로드전에 뷰포트 하단의 컴포넌트들을 경량화 할 수 있을 것 같다.