웹뷰 로딩 성능 개선하기

개요

각 네이티브 및 클라이언트에 웹뷰 형태로 제공하고 있는 프로젝트를 서빙하던 중에 고민점이 생긴 부분이 있었다.

해당 서비스는 탭 형태로 제공이 되어 클라이언트 같은 경우는 한 웹 뷰에서는 하나의 페이지만 보인다는 것이다.

 

그러나 한 페이지를 로드 하는데 약 6.4초 정도의 시간이 걸려 생각보다 로드 시간이 너무 오래 걸리는 느낌이었다.

 

정적 이미지가 많은 프로젝트는 아니었기에 다른 부분에서 렌더링 성능을 향상해보기로 했다!

 

현재 성능

초기 로드

네트워크 탭을 열고 분석하기 시작할 때 처음 번들이 3.4MB가 걸리는 것을 확인할 수 있었다.

웹 -> 웹을 열 때는 그리 큰 문제가 아니지만 네이티브에서 웹뷰를 열어줄 때는 꽤나 많은 데이터를 가져오고 있고

탭 하나에 한 페이지 씩만 보여주기 때문에 다른 페이지는 굳이 필요가 없었다.

 

하지만 조금 더 확실한 정리를 위해 bundle-analyzer를 사용하여 번들 크기를 확인해보기로 했다.

웹팩 자체의 bundle-analyzer를 쓸 수도 있지만 순수 리액트만으로 개발하고 있기 때문에 조금 더 쉽게 볼 수 있는 cra-bundle-analyzer로 확인해보기로 했다.

 

bundle-analyzer

초기 번들 크기

 

아니나 다를까 코드 스플리팅을 안해놨더니 번들 크기가 돌덩이만 하다...😢

제일 큰 번들의 크기가 약 3.7Mb라 상당히 큰 것을 알 수 있다...!

 

초기 번들 성능

 

성능도 지금 보니.. 극악의 수준이다..ㅠㅠ

FCP도 2.1초나 걸리고 있고 TBT도 2초가 넘어가고 있다.

 

일단 더 큰 성능 최적화는 차차 하기로 하고 페이지 코드 스플리팅부터 먼저 해보자!

 

 

성능 개선 과정

// App.tsx
<>
<Routes>
  <Route
    path="/"
    element={<PrivateRoute isLogin={true} component={<Home />} />}
  />
  ...
  <Route path="/marketing" element={<Marketting />} />
 </Routes>
 <>

우리 프로젝트는 약 15개 페이지로 구성되어져 있다. (새삼 왜... 스플리팅을 안했지..?)

위와 같은 컴포넌트들을 스플리팅 해보자!

 

// App.tsx
import { Suspense, lazy } from "react";
const Home = lazy(() => import("./pages/home"));
...

<Suspense fallback={<FallbackComponent />}>
  <Routes>
    <Route
      path="/"
      element={<PrivateRoute isLogin={true} component={<Home />} />}
    />
    ...
    <Route path="/marketing" element={<Marketting />} />
   </Routes>
 </Suspense>

다음과 같이 컴포넌트들을 코드 스플리팅 처리를 한 후 결과를 확인해보자.

 

개선 후 성능

코드스플리팅 후 번들

코드 스플리팅 후 2.77MB로 줄어 들었다.

레이지로딩 후 로딩시간 측정

로컬기준이긴 하지만 처음 번들이 3.4MB에서 658kB로 크게 줄어든 것을 확인할 수 있었다.

번들의 로드 시간도 1.87초에서 119밀리초로 약 10배정도 빨라졌다..

아마 상용 배포가 이뤄지면 최적화가 더 되기 때문에 더 빨라질 것으로 생각된다.

 

레이지 로드 후 성능

성능이 압도적으로 높아지진 않았지만 그래도 Lighthouse 기준 35 -> 54로 상승되었고,

FCP도 2.4초에서 1.4초로 1초정도 단축하였다.

TPT는 3배 가량,  LCP는 2배 가량 상승했으니 유의미하다고 할 수 있다!

추가적인 개선 사항이 있지만 그건 차차 포스팅해보도록 하겠다.

 

후기

실무에서 성능을 개선할 일이 많이 없었지만 이번 기회에 성능을 개선하게 되어서 상당히 의미가 있었다.

내 업무로 인해 우리의 애플리케이션 사용자들의 사용성이 개선되었다는 느낌에 뿌듯하다! (실제 상용서버에선 3.1초 -> 1.7초 정도 로딩 시간을 단축했다.)

 

앞으로도 무턱대고 성능을 최적화하기 보다 이렇게 불편함을 찾아서 그 불편함을 개선하는 개발자가 되고싶다.