개발자
류준열

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

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

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

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

개선 과정

폰트최적화

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

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

lazy loading을 통한 네트워크 경쟁 완화

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

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

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

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

네트워크 경쟁을 줄이는 것이 해결책이라는 것을 확인했지만, 영상을 제거할수는 없기 때문에 영상의 리소스를 줄이는 방안을 함께 고민해보기로 하고 이번 작업에서는 제외하였다. 그 외에도 코드베이스 관련한 문제가 있었다.

AuthProvider 코드베이스 개선

authProvider내에서 인증이 진행되는 동안 null을 렌더링하고 있었다. window로 반응형을 처리하는 코드가 야기하는 CLS를 막기 위한 전임자의 코드였다.

useWindowSize를 모두 css 미디어쿼리로 바꾸고 authProvider 내부 인증과정이 랜딩페이지 렌더링을 차단하지 않도록 수정했다.

before

authProvider에서 인증이 진행되는 동안 null을 렌더링하기 때문에 흰화면이 표시된다.

after

authProvider가 렌더링을 차단하지 않기 때문에 fcp가 빨라졌고 그로 인해 이미지 로드가 dcl이후 바로 진행되며 렌더링은 authProvider와 관계없이 진행된다.

인증,렌더링을 병렬처리 하자 인증과 렌더링이 순차적으로 진행되던 코드베이스가 난리부르스를 쳤다.

예를들면 쿠폰 발급 받은 유저에게 모달을 띄우지 않는데, 인증과 렌더링이 병렬로 진행되다보니 모달이 켜진 이후 쿠폰 발급 받은 유저 임을 인식하고 모달을 다시 꺼버리는 상황이 있었다. 이를 해결하기 위해 DB에서 쿠폰 발급이 완료되었다는 state를 하나 추가하였다. 처음 마주했을때는 언제나 그렇듯, 깜깜하지만 문제를 잘게잘게 쪼개다보면 PR의 수정은 파일 2~3개 밖에 안된다.

0부터 1을 만드는 작업은 AI를 통해서도 할 수 있겠지만, 80점에서 90점, 90점에서 100점으로 가는 여정에는 결국 개발자가 한땀한땀 뜯어보는 과정이 필요함을 느꼈다.

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점이다.