지난 1년간의 웹 바이탈 개선기 1편 - 다국어 동적 로드

올해 회고를 쓰기 앞서 지난 1년간, 정확히는 지난 약 8개월간의 웹 바이탈 개선을 위한 작업들을 기록해보려고 한다.

 

먼저 결과부터 보자면 코어 웹 바이탈 기준으로도 많은 개선이 있었다.

드라마틱하게 상승

 

이랬던 아이가

이렇게...

 

5월 초, 5%까지 내려갔던 Good 비율은 11월인 현재 80~90%를 넘나들며 준수한 수준으로 유지되고 있다.

위 지표는 모바일 기준인데, 모바일 서비스 사용자가 많은 우리 서비스의 특성과 모바일의 점수 기준이 더 짜다는 점을 고려하여 모바일 지표만 고려하여 대응하고 있다. 물론 당연히 데스크탑 지표는 더 잘 나온다. (Good 비중이 95% 수준)

 

그렇다면 이런 지표 향상을 위해 기울인 나름의 노력들은 무엇이 있을까?

 

1. i18n 데이터 동적 로드

코어 웹 바이탈 개선을 위해 했던 작업 중에서도 TBT(INP)를 줄이는데 가장 큰 기여를 한 태스크라고 생각한다.

구조적으로 App Router 전환이 어려운 지금의 서비스 구조에서 나름의 대응으로 메인 스레드의 병목을 완화한 태스크였다.

 

기존 구현에서는 다국어를 지원하기 위해 특정 언어에 해당하는 모든 다국어 파일을 한 번에 불러오는 방식을 사용하고 있었다. TBT 개선을 위해 하이드레이션 과정에서의 메인스레드 병목을 찾았고, 해당 파일의 큰 용량으로 인한 JSON.parse, decodeURLComponent 동작이 생각보다 큰 영향을 주고 있음을 알게 되었다.

 

실제 퍼포먼스 탭에서 확인 결과 단순히  JSON.parse 만으로도 약 5ms의 리소스가 든다는 것을 알 수 있다.

 

이때 문제 분석과 해결을 위한 가설 수립을 위해 스레드에 끄적인 내용들이 있는데 대략 이런 식이다.

 

 

해결을 위한 구현 컨셉을 대략적으로 설계했고

 

 

SSR/SSG 단계에서 렌더링에 사용되는 i18n key를 체크하여 해당 키값에 해당하는 값만 내려주도록 개선했다.

나머지 바로 사용되지 않는 다국어 데이터는 하이드레이션 이후 천천히 가져온다.

 

이 작업을 하면서 두 가지 효과가 있었는데, 하나는 하이드레이션 자체에 대한 부하를 줄인 것,

 

또 하나는 네트워크 페이로드에 불필요한 다국어가 실리지 않게 되면서 첫 html의 용량이 비약적으로 다이어트가 되었다는 점이다.

TBT뿐만 아니라 전반적인 지표에 긍정적인 영향을 줬던 작업이라고 생각한다.