웹 애플리케이션의 성능을 최적화할 수 있는 방법

코드 스플리팅

코드 스플리팅을 통해 자바스크립트 파일을 필요한 부분만 나누어 로드할 수 있습니다. 이렇게 하면 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분만 먼저 로드하여 페이지 로딩 속도를 개선할 수 있습니다.

React.js에서의 코드 스플리팅 - React.lazy

React.js는 React.lazy를 통해 코드 스플리팅을 지원합니다.

• Before

import OtherComponent from './OtherComponent';

• After

const OtherComponent = React.lazy(() => import('./OtherComponent'));

lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 하며, Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해줍니다.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

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

Next.js에서의 코드 스플리팅 - next/dynamic

Next.js는 React.lazy()와 Suspense의 복합체인 next/dynamic을 통해 코드 스플리팅을 지원합니다.

import dynamic from 'next/dynamic'
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  loading: () => <p>Loading...</p>,
})
 
export default function Home() {
  return <DynamicHeader />
}

레이지 로딩 기법

레이지 로딩 기법을 사용하여, 페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드하는 방식을 적용할 수 있습니다. 예를 들어, 사용자가 페이지를 스크롤할 때 하단의 이미지가 필요해지면 그때 비로소 이미지를 불러오는 것입니다. 이렇게 하면 불필요한 리소스 로딩을 줄여 성능을 높일 수 있습니다.

이미지에 대해서는 파일의 물리적인 크기를 알맞게 줄이거나 WebP와 같은 가벼운 포맷으로 변환하는 방법이 있습니다.

Next.js에서의 레이지 로딩 기법 - Image

Next.js는 Image 컴포넌트를 통해 레이지 로딩을 지원합니다.
Image 컴포넌트는 레이지 로딩 기능 지원뿐만 아니라, 이미지 사이즈 최적화 등 이미지의 성능 최적화를 위한 기능을 제공합니다.

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}

캐싱

캐싱을 활용하면, 한 번 로딩된 리소스를 다시 다운로드하지 않고 브라우저가 캐시된 데이터를 재사용하여 성능을 크게 향상시킬 수 있습니다.

비동기 로딩(async) 지연 로딩(defer)

자바스크립트 로딩 시에는 비동기 로딩(async)이나 지연 로딩(defer)을 적용하여 자바스크립트가 DOM을 차단하지 않도록 할 수 있습니다. 이를 통해 페이지가 로딩되는 동안에도 자바스크립트 파일을 병렬로 불러오거나, 적절한 타이밍에 로드하게 되어 사용자 경험이 더 쾌적해질 수 있습니다.

async와 defer에 대한 더 자세한 내용은 아래 게시글에서 확인해볼 수 있습니다.
script 태그에서 async와 defer의 차이점

참고
React.js React.lazy
Next.js next/dynamic
Next.js next/dynamic 한글 문서