[NextJs]Lighthouse로 웹페이지 최적화하기

Mincho·2023년 6월 1일

JavaScript SSR image lighthouse nextjs typescript

[NextJs]

목록 보기

3/12

🔴 LightHouse

LightHouse는 웹 사이트의 성능 및 품질을 평가하고 개선하는 도구이다. Google이 개발하였으며 사용자 경험, 성능, 접근성, SEO 등 다양한 측면을 평가할 수 있도록 도와준다. 간단히 이 정도만 알아보고 실제 어떻게 평가가 이루어지는 지 확인해 보자!!

🟠 LightHouse를 분석해보자

크롬의 개발자모드에서 lighthouse탭이 있다. 카테고리에서 원하는 테스트를 선택하고 모드는 기본(탐색)을 설정한다. 기기 같은경우 모바일 버전과 데스크톱 버전을 선택하여 분석할 수 있다.

모드버전
탐색 : LightHouse의 기본 값, 초기 페이지 로딩 시 발생하는 성능 문제 분석
기간 : 사용자가 정의한 시간 동안 발생한 성능 문제 분석
스냅샷 : 현재 상태의 성능 문제 분석

설정이 끝나고 페이지 분석을 클릭하고 분석시간이 끝나면 다음과 같이 분석 결과가 나오게 된다. 하나씩 한 번 살펴보도록 하자.

성능지표들

📑 FCP(First Contentful Paint)
사용자가 웹 페이지로 이동하여 로드 되었을때, 브라우저가 첫 번째 DOM을 렌더링하는 데 걸리는 시간.

📑 SI(Speed Index)
웹 페이지를 로드 중에, 콘텐츠가 시각적으로 로드되는 속도

📑 LCP(Largest Contentful Paint)
페이지가 로드될 때 화면에서 가장 큰 콘텐츠 요소가 렌더링 될 때까지 걸리는 시간

📑 TBT(Total Blocking Time)
페이지가 클릭, 키보드 입력 같은 사용자 입력에 응답하지 못하도록 차단된 총 시간을 종합

📑 CLS(Cumulative Layout Shift)
CLS는 웹 페이지 로드 과정에서 발생하는 예기치 못한 레이아웃 이동을 측정

위의 지표들의 가중치를 적용하여 평균 값을 낸 점수가 85점의 성능점수이다.

🟡 내 상태 분석해보기

처음에 웹 페이지에 접속했을 때 페이지에서 받아오는 소스를 네트워크 탭에서 확인해 보았다. 내가 만든 웹페이지에는 많은 사진데이터와 영상을 가져오고 있었으며 jpeg형식으로 받아오고 있었다.

다시한번 추천목록을 살펴보게 되면 이미지 크기 적절하게 설정하기 / 차세대 형식을 사용해 이미지 제공하기 / 효율적으로 이미지 인코딩하기에서 많은 절감을 할 수 있었다.

공식 홈페이지에서 lighthouse는 페이지의 이미지에 대해 렌더링된 이미지의 크기를 실제 이미지의 크기와 비교한다고 표기되어 있다.
또한 WebP 및 AVIF와 같은 이미지 형식은 PNG나 JPEG보다 압축률이 높기 때문에 다운로드가 빠르고 데이터 소비량도 적습니다. 라고 명시되어 JPEG보다 WebP 및 AVIF를 권정하고 있다.
WebP와 AVIF형식은 더 나은 압축 포맷으로 화질 저하를 최소화하며 파일 크기를 줄일 수 있다.

🟢 이제 천천히 해결해보자

//기존코드
 <img className={styles.artistImage}
      src={data?.idol_profile}
      alt="아티스트 이미지"/>

//next js image 사용, alt명시 ,lazyLoading, 크기 명시하기
<Image className={styles.artistImage}
       src={data?.idol_profile}
       alt="아티스트 이미지"
       width={200}
       height={200}
       loading="lazy"/>

본 프로젝트는 next Js를 활용하였고, next Js에서는 next/image를 에서 image태그를 활용하여 위의 문제를 해결 할 수 있다.

참고!!
Next.js 서버에서 이미지를 가지고 있는 리모트 서버에 직접 요청을 하기 때문에 모든 url에 대한 접근을 허용할 경우 악의를 가진 사용자에 의해 공격을 받을 가능성이 있다. 이를 방지하기 위해 이미지를 서빙하는 서버가 안전한 서버라는 것을 Next.js에 알려줘야 하는데, next.config.js 파일에 CDN의 host를 명시해야 한다.
//next.config.js
const nextConfig = {
 images: {
    domains: ["image.kpopmap.com", "velog.velcdn.com"],
  },
}

그리고 다시 실행해보면 기본 img태그를 사용할 때와 다르게 데이터 유형이 Webp형식으로 바뀌었으며, 크기또한 상당히 줄어든 것을 확인할 수 있었다.

또한 lazyLoading을 설정하여 화면에 보이는 이미지만 로딩하여 모든 이미지를 로딩하지 않고 데이터를 절약하여 로딩 속도를 높일수 있었다.

이미지만 처리해주었는데도 위와 같이 최적화 된 것을 알 수 있다.

🔵 검색엔진 성능 최적화하기

검색엔진 최적화 탭을 확인하면 콘텐츠 권장사항에 문서에 대한 title요소와 메타 설명을 권장하고 있었고 메타데이터를 다음과 같이 설정해주었다.

//app/page.tsx
import { Metadata } from "next";
export const metadata: Metadata = {
  title: "Myfavor",
  description: "최애의 스케줄을 확인하세요.",
  icons: {
    icon: "/img/logo_main.png",
    shortcut: "/img/logo_main.png",
  },
};