[nextJS] 성능 최적화 하기(lighthouse, 빌드 용량 개선)

💪메인페이지 최적화하기

현재 진행 중인 프로젝트 메인페이지 작업을 하고 나서 성능 검사를 하니 이미지가 많아서 그런지 좋지 않은 점수를 받고 있었다.

최적화 전 lighthouse 검사 결과

LCP에서 좋지 않은 점수를 받고 있었고, TBT와 SI 역시 빠른 속도는 아니었다. 이에 대해 개선을 위한 최적화 작업을 진행해 보았다.

 

lighthouse 측정 항목

FCP(First Contentful Paint): 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링 하는 데 걸리는 시간.
LCP(Largest Contenful Paint): 뷰포트에서 가장 큰 콘텐츠 요소가 화면에 렌더링 될 때까지 걸리는 시간
TBT(Total Blocking Time): 웹 페이지가 사용자의 입력에 응답하지 못하도록 차단된 시간
SI(Speed Index): 콘텐츠가 시각적으로 표시되는 데까지 걸리는 시간
Cumulative Layout Shift: 느린 로딩, 비동기 동작, 동적 DOM 변경 등으로 레이아웃이 변하는 시간 

 

 

1. Dynamic import 적용하기

전체 페이지에 영향을 미치는 _app.tsx부터 최적화를 진행하였다.

현재 _app에서는 미로그인 시 로그인이 필요한 페이지에 접근하는 경우 열리는 로그인 모달 컴포넌트와 로딩 시 나타나는 로딩 컴포넌트를 import 하고 있는 상태였다. 해당 컴포넌트들은 첫 렌더링에 필요한 요소가 아니기 때문에 dynamic import를 적용하였다.

Dynamic Import란?

ES2020의 문법으로 모듈을 빌드 타임이 아닌 런타임에 불러오도록 한다. 따라서 번들 파일을 분리하면서 첫 렌더링의 성능을 개선할 수 있다. 그래서 보통 첫 렌더링에 보여지지 않는 컴포넌트(모달 등)에 적용할 수 있다.

기존에는 promise를 사용하여 체이닝을 통해 코드를 작성해야 하지만 next에서는 dynamic import를 위한 next/dynamic 모듈을 지원하여 간편하게 사용할 수 있다.  

 

• dynamic import 적용 전

//이전
import LoginModal from '@/components/auth/LoginModal';
import { LoadingSpinner } from '@/components/common/LoadingSpinner';

 

• dynamic import 적용 후

//이후
import dynamic from 'next/dynamic';
const LoginModal = dynamic(() => import('@/components/auth/LoginModal'));
const LoadingSpinner = dynamic(
  () => import('@/components/common/LoadingSpinner'),
);

 

또한 메인페이지에 해당하는 page/index.tsx에서 하단에 위치하여 뷰포트에 바로 들어오지 않는 컴포넌트를 dynamic import 하였다.

const RecordFeedList = dynamic(
  () => import('@/components/main/mainRecordFeed/RecordFeedList'),
);

 

이러한 작업을 통해 번들 사이즈를 줄일 수 있었다!

메인 페이지는 용량이 절반으로 줄었고 _app과 다른 페이지들의 경우 First Load JS 시간이 개선된 것을 볼 수 있었다.

왼쪽: 최적화 전 / 오른쪽: 최적화 후

 

2. 이미지 lazy loading

성능 최적화를 위해 뷰포트에 들어오는 이미지만 불러올 수 있도록 lazy loading을 설정할 수 있다.

img 태그에서 lazy loading 속성을 제공하기 때문에 next/Image에서도 적용이 가능하다. 하지만 따로 loading 설정을 하지 않을 경우 기본 값으로 lazy가 들어가기 때문에 따로 지정해주지 않았다.

 

반대로 뷰포트에 바로 들어오는 메인 이미지인 경우 lazy loading을 하면 스캐너에서 이미지를 숨기기 때문에 브라우저에서 이미지를 늦게 요청하기 된다. 그렇게 되면 LCP가 늦어지기 때문에 뷰포트에서 바로 보이는 이미지의 경우 next/Image의 priority 설정을 통해 lazy loading을 해제하고 우선순위를 높일 수 있다.

 

참고)

https://yceffort.kr/2022/06/optimize-LCP#lcp-%EB%A5%BC-lazy-load-%ED%95%98%EC%A7%80-%EB%A7%90-%EA%B2%83

next/Image의 priority

true인 경우 이미지가 높은 우선순위로 간주되어 미리 로딩되며 지연로딩이 자동으로 비활성화된다. 뷰포트 사이즈에 따라 LCP에 해당하는 이미지가 다를 수 있으므로 여러 이미지에 적용할 수 있도록 고려되어야 한다.

 

        <Image
          src='/images/main/main-banner.svg'
          width={390}
          height={274}
          alt='메인 안내 배너'
          className='w-full'
          priority
        />

 

 

3. 사용하지 않는 폰트 제거하기

기본 폰트는 Noto_Sans_KR로 next/font/google에서 가져올 수 있지만 다른 특정 폰트는 next/font/local에서 가져와야 했다. 그러나 해당 폰트를 woff2 파일로 사용했음에도 불구하고 용량이 생각보다 커서 받아오는 시간이 길었다. 하지만 사용하는 페이지는 많지 않았기 때문에 기존에 _app에서 전역으로 import 하던 폰트를 사용하는 컴포넌트에서 import 하도록 수정하였다.

 

 

그러나 컴포넌트마다 폰트 설정하면 중복 코드가 생기고 이후에 유지보수도 어려울 것 같아서 하나의 layout 컴포넌트를 만들어서 관리하기로 하였다.

 

• 레이아웃 컴포넌트 생성

import localFont from 'next/font/local';
import { ReactNode } from 'react';

const prettyNight = localFont({
  src: '../../public/fonts/Cafe24Oneprettynight-v2.0.woff2',
  weight: '400',
  variable: '--prettyNight',
});

function PrettyNightFontLayout({ children }: { children: ReactNode }) {
  return <div className={`${prettyNight.variable} h-full`}>{children}</div>;
}

export default PrettyNightFontLayout;

 

• 레이아웃 컴포넌트 적용

OnboardingPage.getLayout = function getLayout(page: ReactElement) {
  return <PrettyNightFontLayout>{page}</PrettyNightFontLayout>;
};

 

이 작업을 통해 해당 폰트를 사용하지 않는 페이지에서는 로드하지 않음으로써 LCP 속도를 개선할 수 있었다.

 

---

최적화 후 성능 검사

왼쪽: 최적화 이전 / 오른쪽: 최적화 이후

TBT와 SI가 빠름으로 성능이 향상되었고 LCP는 최적은 아니지만 약 5초 정도 줄일 수 있었다!!

 

100점까진 아니지만 점수를 어느 정도 안정적인 범위까지 올릴 수 있어서 매우 기쁘다!! 🎉🎉

계속해서 더 최적화할 수 있는 방법이 있는지 공부해 봐야겠다💪