Learn Next.js 제 3장 : Optimizing Fonts and Images

이번 장에서 배울 내용

* 사용자 정의 글꼴을 추가하는 방법 next/font.

* 이미지를 추가하는 방법 next/image.

* Next.js에서 글꼴과 이미지가 최적화되는 방법.

 

글꼴을 최적화하는 이유

글꼴 파일을 가져와서 로드해야 하는 경우 성능에 영향을 미칠 수 있습니다.

 

Cumulative Layout Shift

줄여서 CLS라고 불리는 레이아웃 변경 횟수는 안정적인 Core Web Vitals 측정항목이다.

이는 시각적 안정성을 측정하는 데 있어 중요한 사용자 중심 측정항목이다.

예를 들면 링크나 버튼을 탭 하려고 하는데 손가락이 닿기 직전에 링크가 이동하여 다른 것을 클릭하게 되는 피해가 일어날 수 있습니다.

 

글꼴의 경우 브라우저가 처음에 텍스트를 대체(fallback) 하거나 system font로 교체(swap)할 때 레이아웃 이동이 발생합니다.

교체로 인해 텍스트 크기, 간격 또는 레이아웃이 변경되어 주변 요소가 이동할 수 있습니다.

 

Next.js를 사용하면 응용프로그램의 글꼴이 자동으로 최적화됩니다.

빌드 시 글꼴 파일을 다운로드하고 다른 정적 자산과 함께 호스트 합니다. 즉 성능에 영향을 미치는 추가 네트워크 요청이 없습니다.

 

이미지를 최적화하는 이유

Next.js는 최상위 폴더 아래에 이미지와 같은 정적 자산을 제공할 수 있다.

 

일반 HTML을 사용하면 수동으로 다음과 같은 작업을 수행해야 함을 의미합니다.

• 이미지가 다양한 화면 크기에서 반응하는지 확인합니다.
• 여러 장치화면에 맞는 이미지 크기를 지정합니다.
• 영상이 로드될 때 레이아웃 이동을 방지합니다.
• 사용자의 뷰포트 밖에 있는 이미지를 느리게 로드합니다.

이미지 최적화는 웹 개발에서 그 자체로 전문화로 간주될 수 있는 큰 주제이다. 이러한 최적화를 수동으로 구현하는 대신 다음을 사용할 수 있습니다. next/image 이미지를 자동으로 최적화하는 구성 요소입니다.

 

The <Image> component

<Image> 컴포넌트는 <img> HTML 태그의 확장입니다. 그리고 자동으로 이미지를 최적화합니다.

• 이미지가 로드될 때 레이아웃이 자동으로 이동되는 것을 방지합니다.
• 뷰포트가 작은 장치로 큰 이미ㅣ를 전송하지 않도록 이미지 크기를 조정합니다.
• 기본적으로 이미지를 느리게 로드합니다.(뷰포트에 들어갈 때 이미지가 로드됨).
• 브라우저가 지원할 때 WebP 및 AVIF와 같은 최신 형식으로 이미지를 제공합니다.

WebP : 웹 사진 형식 색의 깊이, 애니메이션 프레임, 투명도 등을 지원 JPEG보다 더 나은 압축 기능 제공

AVIF: AV1 이미지 파일 형식 고성능 및 로열티 프리 이미지 형식

 

<Image
    src="/hero-mobile.png"
    width={560}
    height={620}
    className="block md:hidden"
    alt="Screenshot of the dashboard project showing mobile version"
  />

레이아웃 이동을 피하기 위해 이미지의 가로 세로 비율은 원본 이미지와 동일해야 합니다.

그 때문에 width와 height 값을 지정하는 게 좋습니다.