개요
React 프로젝트에서 서버사이드 렌더링, 클라이언트사이드 렌더링 중 어느 것이 초기 렌더링 속도가 더 빠른지 시각적으로 비교해야할 자료가 필요했습니다. 그래서 렌더링 측정 툴을 구글링하던 도중 lighthouse라는 툴을 발견했습니다.
이번 글은 lighthouse를 쓰면서 알았던 점들을 정리하려고 합니다.
Lighthouse 알아보기
lighthouse는 웹앱의 품질을 측정하는 도구입니다.
저는 CSR과 SSR간의 초기 렌더링 속도의 비교가 필요해서 lighthouse의 Performance 항목을 중점적으로 알아봤습니다.
Performance 항목의 지표들은 다음과 같습니다.
- TTI(Time to interaction) : 사용자가 웹에서 클릭이나 스크롤링을 수행할 수 있는 시점
- FCP(First Contentful Paint) : 브라우저에 첫번째 콘텐츠가 로딩되는 시간. 이미지나 캔버스, svg도 포함되지만 iframe은 포함되지 않습니다. 스켈레톤 ui를 먼저 로드하는 방법으로 FCP를 빠르게 할수도 있다고 합니다.
- SI(Speed Index) : 콘텐츠가 시각적으로 얼마나 빨리 표시되는지를 의미합니다.
- LCP(Largest Contentful Paint) : 가장 큰 컨텐츠가 로드되는 시간을 이야기합니다.
- Total Blocking Time : 웹을 로딩할 때 중간중간 blocking된 시간들의 합을 의미합니다.
- CLS(Cumulative Layout Shift) : 방문자에게 콘텐츠가 얼마나 불안정한지 측정하는 사용자 경험 측정 항목입니다.
비교 조건
- SSR 웹 : next.js의 getServerSideProps를 활용
- CSR 웹 : create-react-app을 활용, eject를 하지 않은 순수한 CRA 웹
- 공통 조건 : redux, redux-saga 사용
두개의 웹사이트 모두 로컬 API를 사용하는 페이지(웹툰, 비디오, 음악)와 외부 open API를 한페이지에 10개 호출하는 페이지(API TEST 페이지) 를 생성했습니다.
비교 결과
동영상 페이지
-
SSR 웹
-
CSR 웹
API TEST 페이지
- SSR 웹
- CSR 웹
로컬 API 페이지, 외부 API 페이지 모두 성능 탭은 SSR이 더 좋게 나왔습니다. 아마도 SSR에 사용된 next.js에서 자동적으로 코드 스플리팅을 해줘서 이러한 결과가 나왔다고 생각합니다. 다만, 당연히 검색엔진 최적화나 접근성 탭도 초기 렌더링이 빠른 SSR이 좋을 것이라 생각했는데 순수 create-react-app으로 만든 CSR 페이지가 더 좋게 나온 것은 의외라 생각합니다.
이 부분은 나중에 추가적으로 알아볼 필요가 있어보입니다.
참조
https://velog.io/@yeonseo07/ReactRenderingSpeed
https://wit.nts-corp.com/2020/12/28/6240
