React 성능 개선 (LazyLoading, 이미지 최적화)

Sara-Mara 웹 사이트 성능 개선하기

요구사항

아래의 이미지에서 알 수 있듯이, 현재 Sara-Mara 사이트의 메인 페이지의 성능이 눈에 띄게 좋지 않고, 실제로 PageSpeed Insight로 페이지를 진단한 결과 성능에서 매우 안 좋은 지표를 확인할 수 있었다.

sara-mara 페이지 성능

지표로 봤을 때 LCP가 10초 대로 이미지 렌더링에 많은 시간이 걸린다는 것을 알 수 있었고, 이는 이미지 크기와 형식을 최적화한다면 어느정도 성능 향상을 기대할 수 있을 것으로 예상했다.

코드 스플릿

이미지 파일의 최적화를 통해 성능을 계선할 수 있을 거라 생각했지만, 우선은 lazyloading을 통해 성능개선을 시도해 보았다.

Lazy Loading?
Lazy Loading 이란 동적 임포트를 통해 초기에는 처리되지 않은 상태의 Promise 객체를 반환하고, 컴포넌트가 필요할 때 Promise 객체를 처리하여 컴포넌트를 임포트 하는 방식이다. React와 같은 SPA은 하나의 Index.html을 JS로 조작하는 방식이기 때문에 초기에 많은 렌더링 시간이 소요된다. 이에 렌더링이 많이 드는 컴포넌트는 필요할 때만 임포트 하여 초기 렌더링을 많이 줄 일 수 있다.

나는 현재 렌더링에 많이 소요되어 보이는 Articles 컴포넌트와 RealtimeTrends 컴포넌트를 다이내믹 Import 하여 사용하였다.

const Articles = React.lazy(() => import("../components/Articles"));
const RealtimeKeywords = React.lazy(() =>
  import("../components/RealtimeKeywords")
);

...
<Suspense fallback={null}>
      <RealtimeKeywords
        $type={$type}
        isLoading={trendLoading}
        data={trendData}
      />
</Suspense>
... 
<Suspense fallback={null}>
      <Articles $type={$type} />
</Suspense>

이러한 변경 후에 다시 성능을 측정해 보았다. 최초의 측정은 배포된 페이지에서 진행했고, 현재는 개발 중인 로컬에서 실행됐기 때문에 수치상 오차가 많이 있는 것으로 보였다.

lazyloading 처리 후 페이지 성능

전에 측정에서는 FCP의 성능이 매우 낮은 대신 TBT의 성능이 좋았고, lazy loading 이후에는 FCP의 성능이 개선된 대신 TBT의 성능이 안 좋게 측정된 것으로 보아 성능상에 많은 개선은 이루어지지 않은 것 같다. (체감으로도 느껴지지 않음)

그 이유로 생각했을 때, 나의 경우에는 Articles와 RealtimeTrends 컴포넌트 모두 바로 렌더링 해야 하는 요소였기 때문에, FCP 성능 개선에는 도움이 되더라도 결국에는 초기에 렌더링 하는데 많은 시간을 소요하기 때문일 것이다.

후에, 특정 컴포넌트 만을 lazy loading 했을 때, 오히려 웹 페이지의 성능이 안 좋게 느껴진다는 피드백이 있었고, 이를 아래와 같이 수정하여 모든 컴포넌트를 한 번에 렌더링 하도록 수정하여 개선하였다.

<Suspense fallback={null}>
      <RealtimeKeywords
        $type={$type}
        isLoading={trendLoading}
        data={trendData}
      />
      <Articles $type={$type} />
</Suspense>

이미지 변환

이 부분에서 많은 성능 개선을 기대했다. 처음에 코드를 사용할 때에도 이미지가 불필요하게 크고, 고해상도의 사진 파일이었기 때문이다.

첫 번째로, 이미지 크기를 나의 프로젝트에 맞게 조정하였다. Article 컴포넌트의 이미지는 130 * 130이었기 때문에 이에 맞추어 150 * 150의 이미지로 조정하였다.

두 번째로, 이미지 형식을 jpg에서 webp로 바꾸었다. webp는 기존의 이미지 형식 (jpg, png)보다 파일의 크기를 훨씬 줄일 수 있으며, 압축에도 용이하기 때문이다.

이를 적용 후 렌더링 속도를 측정했을 때, LCP의 경우 40%, TBT의 경우 50% 의 성능 개선을 이룰 수 있었다. 또한, 눈으로 사이트의 렌더링을 보았을 때에도 확연한 차이를 느낄 수 있었다.

이미지 최적화 후 성능

아직, 성능점수 78점으로 90점이 안된 것이 아쉽긴 하지만, 수치상으로도 체감상으로도 만족할 만한 페이지 성능 개선을 이뤄 낼 수 있었다.

앞으로의 꾸준한 코드 개선을 통해서 조금 더 페이지 성능을 개선해 보아야겠다.