이미지 최적화를 통한 렌더링 성능 개선

서동경·2023년 11월 24일

Lazy loading React Rendering optimization code splitting webp

리액트에서 이미지 최적화 작업

웹 페이지의 이미지는 아주 많은 용량을 차지하기 때문에 투자대비 성능 효율이 가장 크다. 따라서 이미지에 대한 최적화 작업은 필수이다.

나는 아래 두 가지 방법을 통해 렌더링 성능을 개선하고자 하였고 각 방법에 대한 테스트를 진행하였다.

웹 브라우저에 최적화된 포맷 사용

JPG, PNG, WEBP, AVIF 등이 존재한다.

JPG: 카메라로 찍은 실제 사진에 최적화된 포맷이다.
PNG: 만들어진 이미지에 최적화된 포맷이다.
WebP: 구글이 발표한 웹 브라우저에 최적화된 포맷으로, 압축 효과가 뛰어나다
AVIF: AOMedia가 발표한 웹 브라우저에 최적화된 포맷으로, WebP보다 압축 효과가 뛰어나지만 호환성 측면에서 단점이 있다.

따라서 웹페이지의 성능 개선을 위해 JPG, PNG 포맷을 갖는 이미지 파일을 WEBP, AVIF 포맷으로 변경해줄 필요가 있고, 나는 안드로이드에서 지원되지 않는 AVIF 대신 WebP 포맷을 선택했다.

그리고 개발자 도구 Performence 탭에서 이미지를 많이 사용하는 페이지에 새로고침을 일으켜 성능 테스트를 진행해보았다.

로컬 환경에서 PNG 포맷을 사용한 페이지 성능

Vercel 배포 환경에서 PNG 포맷을 사용한 페이지 성능

로컬 환경에서 웹페이지를 실행했을 때 약 2초 대의 준수한(?) 성능을 보였지만, 배포 환경에서는 약 5초 대의 처참한 결과를 확인할 수 있었다.

그리고 WebP로 모든 이미지 파일을 변경 후 다시 성능을 측정해 보았다

로컬 환경에서 WebP 포맷을 사용한 페이지 성능

Vercel 배포 환경에서 WebP 포맷을 사용한 페이지 성능

결과는 생각보다 더 놀라웠다. 두 환경 모두 1초 대의 성능을 보였다. 특히 vercel로 배포한 환경에서는 더 빠른 속도를 보여주었다.

Code Splitting을 통한 Lazy Loading

이미지를 많이 사용하는 컴포넌트에는 React.lazy와 다이나믹 import, 그리고 Suspense를 사용한 코드 분할 기술을 사용할 수 있다. 코드 분할로 분리된 파일은 bundle.js에 저장되는 대신 chunk 파일로 저장된다. 이는 bundle.js가 동적으로 파일들을 로드하는 작업 시간을 줄여 초기 로딩 속도를 개선하는데 도움이 된다.

사용법은 아래와 같다.

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./Component'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;