최상단 섹션 렌더링 속도 개선
지하철 모바일 환경에서의 최상단 섹션 렌더링 속도를 개선하기 위한 작업을 했다.
동료분이 먼저 이미지 쪼개기를 하셔서 하나의 이미지를 두개의 이미지로 병렬로드 하는 방식으로 개선했다.
그 이후에도 추가 개선할 수 있는 방법을 찾기 위해 퍼포먼스탭을 살펴 보았는데 FCP와 LCP에서 문제점을 찾을 수 있었다.
개선 과정
폰트최적화
ttf하나가 길게 늘어지고 있어서 subset woff2로 변경하니 756kb에서 167kb로 경량화되었다. (subset은 한글, 영어, 숫자들만 다운받았다.)
폰트 경량화를 통해 FCP 개선을 의도했다.
lazy loading을 통한 네트워크 경쟁 완화
이미지 쪼개기를 했지만 lazy loading이 안되어있고, mp4영상이 많아서 네트워크 경쟁이 심한 상태였다.
네트워크 리소스 경쟁을 줄이는 것이 LCP를 개선하는지 확인하기 위해 아래 2가지를 테스트 했다.
- lazy loading 했을때 LCP가 개선되는지
- 영상을 모두 제거했을때 LCP가 개선되는지
두 시나리오 모두 LCP가 개선되었다.
네트워크 경쟁을 줄이는 것이 해결책이라는 것을 확인했지만, 영상을 제거할수는 없기 때문에 영상의 리소스를 줄이는 방안을 함께 고민해보기로 하고 이번 작업에서는 제외하였다. 그 외에도 인증이 렌더링을 차단하는 문제가 있었는데, 이는 후속작업으로 뺐다.
quality를 100에서 기본값(75)로 변경
quality를 100으로 해도 화질이 크게 개선되지 않지만 늘어나는 리소스에 의해 LCP가 악화된다.
quality를 기본값으로 변경하니 render delay가 1084ms에서 66ms로 크게 10배 이상 단축되었다.
before
after
개선 전 후 측정
작업 내용
- 폰트 최적화: 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점이다.
