Optimizing fonts and images

폰트 최적화가 필요한 이유

폰트는 웹 사이트의 디자인 요소에서 중요한 역할을 한다. 만약 웹 사이트에 사용하는 폰트가 사용자 지정 폰트라면 글꼴을 가져와서 로드하는데 시간이 발생한다. 폰트를 로드하고 적용시킬 때, 폰트들의 크기가 달라 누적 레이아웃 이동이 발생할 수 있는데, 이는 웹 사이트의 성능 지표에 반영되어 SEO 점수가 낮아질 수 있다.

next의 폰트 최적화

next에서 제공하는next/font 모듈을 사용하면 폰트 최적화를 할 수 있다. next는 빌드 시에 다른 정적 assets들과 같이 fonts를 다운로드 하는데, 사용자가 페이지를 요청할 때, 추가적으로 폰트를 다운로드 할 필요가 없어 최적화되는 것이다.

next/font 모듈 적용 방법

이미지 최적화가 필요한 이유

일반적으로 이미지는 웹 사이트에서 화면을 구성할 때, 가장 많은 리소스를 사용한다. 그래서 웹 사이트가 화면에 렌더링 될 때, 이미지를 제외한 부분이 먼저 렌더링되고, 이미지가 다 불러와지면 그제서야 화면에 이미지를 넣게 된다. 이미지는 초기 렌더링 과정에 포함되지 않고, 이미지를 불러온 후 다시 렌더링하는 과정을 거친다. 이때 이미지 최적화가 적용되어있지 않으면, 레이아웃 변경이 일어날 수 있고, 이 때문에 성능 지표가 떨어져 SEO에 악영향을 끼칠 수 있다.

next의 이미지 최적화

• 이미지가 로딩될 때 레이아웃이 변경되지 않도록 하기
• 작은 viewport의 기기에 큰 이미지가 전달되는 것을 방지
• 뷰포트 밖에 있는 이미지의 지연 로드
• webp, avif와 같은 최신 형식으로 포맷

다음과 같은 최적화 방법을 next/image 모듈에서 제공하고 있다. Image태그를 사용하면 손쉽게 이미지 최적화를 적용할 수 있다.