Next.js는 성능 최적화를 위해 Google Fonts를 비롯한 웹 폰트를 효율적으로 관리할 수 있는 다양한 기능을 제공한다.Next.js의 next/font 패키지를 활용하면 폰트 로드 성능을 향상시킬 수 있다. 이번 포스팅에서는 Next.js에서 폰트와 이미지를 최적화하는 방법에 대해 알아보고자 한다. 01. 왜 폰트를 최적화해야 할까?웹사이트에서 폰트는 사용자 경험과 디자인의 핵심 요소 중 하나이다. 그러나 사용자 정의 폰트를 사용하게 되면 폰트 파일을 다운로드하는 과정에서 네트워크 요청이 발생하여 성능에 영향을 줄 수 있다. 특히 폰트 로딩 과정에서 사용자 경험을 저해할 수 있는 문제들이 있다. ◼︎ Cumulative Layout Shift CLS는 Google이 웹사이트 성능과 사용자 경험..
Front-End/Next.js 2024. 11. 13. 14:59
Next.js는 성능 최적화를 위해 Google Fonts를 비롯한 웹 폰트를 효율적으로 관리할 수 있는 다양한 기능을 제공한다.Next.js의 next/font 패키지를 활용하면 폰트 로드 성능을 향상시킬 수 있다. 이번 포스팅에서는 Next.js에서 폰트와 이미지를 최적화하는 방법에 대해 알아보고자 한다. 01. 왜 폰트를 최적화해야 할까?웹사이트에서 폰트는 사용자 경험과 디자인의 핵심 요소 중 하나이다. 그러나 사용자 정의 폰트를 사용하게 되면 폰트 파일을 다운로드하는 과정에서 네트워크 요청이 발생하여 성능에 영향을 줄 수 있다. 특히 폰트 로딩 과정에서 사용자 경험을 저해할 수 있는 문제들이 있다. ◼︎ Cumulative Layout Shift CLS는 Google이 웹사이트 성능과 사용자 경험..