리액트로 마이그레이션 하는 건 거의 끝났다. 아직 서버를 AWS에서 heroku로 옮기지 못해서 이미지는 제대로 로딩되지 않지만, 조건은 같기 때문에 속도 비교를 한 번 해보려고 한다. (React로 된 것의 디자인은 아직 확인받지 못했다)
테스트는 chrome에서 느린 3G로 로딩했을 때의 속도를 기준으로 한다. 일반적으로 했을 때는 큰 차이를 느끼지 못해서 극단적인 상황을 가정했다.
40% 감소 / 30.03ms → 18.08ms
바닐라는 이미지나 폰트를 다운받을 때, 리액트는 처음 js 번들을 가져올 때 시간이 오래 걸렸다. 늘어지는 파란색 바를 보면서 "이래서 next를 써야 하는 건가" 싶었다. next와 같은 프레임워크를 사용하면 (1) 원하는 페이지에 사용되는 js만 받아올 수 있기 때문에 로딩 속도가 빠르고 (2) 서버에서 전달해준 HTML이 있기 때문에 텅 빈 화면이 나타나는 속도가 줄어든다. 사실 이것보다도 코드 수를 줄이는 것이 제일 좋다.
로드 속도가 뜨지 않았다.
바닐라로 했을 때는 문항에 답변하면 다음 문제의 번호를 보여주게 해두어서 이미지 로딩 시각 차이가 있다.
이때 아주 놀라웠던 것은, 애니메이션은 이미 움직여서 다음 문제를 보여주고 있는데 이미지 다운받는 시간이 오래 걸려서 이렇게 보인다는 것이었다. 디자인적인 큰 문제가 있었다는 것을 이제서야 발견했다 🤦♀️ 내가 미쳐 미쳐...
바닐라는 여전히 이미지 다운받는 것을 힘들어하고 있다. 반면, 리액트는 아주 재빠르다. 로드 속도가 제대로 뜨지 않아서 직접 세봤다. 바닐라는 화면이 나타나기까지 5초, 리액트는 2초 걸린다. 토스 2021 컨퍼런스에서 로딩 화면이 5초 이상 걸리면 유저가 나갈 확률이 38% 이상이라는 영상을 본 적이 있는데, 이랬다가는 사람들 다 나가게 생겼다. 느린 3G로 테스트한 거라 참 다행이다.
출처: 토스ㅣSLASH 21 - JavaScript Bundle Diet