Learn Next.js 튜토리얼
https://nextjs.org/learn/dashboard-app/getting-started
Next.js 튜토리얼 - ch3. 폰트 및 이미지 최적화
Cumulative Layout Shift (CLS)
https://vercel.com/blog/how-core-web-vitals-affect-seo
Layout Shift는 웹 페이지가 로딩되는 동안 페이지 콘텐츠의 예상치 못한 이동을 나타내는 용어이다. 이는 페이지 안정성을 낮추고 사용자 경험을 저하시킬 수 있다. 또한 layout shift가 자주 발생하는 웹 페이지는 낮은 구글 페이지 랭크를 갖게 된다.
웹 폰트 혹은 가로, 세로가 설정되지 않은 이미지는 layout shift를 발생시키는 요인이 될 수 있기 때문에, 폰트 및 이미지 최적화가 필요하다.
폰트 최적화
폰트 최적화를 하게 되면 빌드 타임에 폰트를 다운로드 받고, static 자원으로 호스팅하여 사용자의 페이지 요청마다 폰트 다운로드를 위해 새로운 네트워크 요청을 하지 않는다.
이를 통해 성능을 높이고, layout shift를 발생시키지 않을 수 있다.
// /app/ui/fonts.ts
import { Inter } from 'next/font/google'
import { Lusitana } from 'next/font/google'
export const inter = Inter({ subsets: ['latin'] })
export const lusitana = Lusitana({ subsets: ['latin'], weight: '400' })/app/ui/fonts.ts 파일 내부에 구글 폰트를 import 받고, 이들을 다시 export하여 애플리케이션 내부에서 사용하도록 한다. 사용은 다음과 같이 할 수 있다.
import '@/app/ui/global.css'
import { inter } from '@/app/ui/fonts'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang='en'>
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
)
}이미지 최적화
이미지 또한 static asset으로 제공하기 위하여, /public 디렉토리 하위에 저장한다.
그리고 next/image 컴포넌트를 사용하여 이미지 자동 최적화가 가능하다.
<Image> 컴포넌트의 이미지 최적화
import Image from 'next/image'
위 구문을 통해 <Image> 컴포넌트를 import 할 수 있고, <Image>는 다음과 같은 이미지 최적화를 제공한다.
- 이미지 로딩 시 자동으로 layout shift를 방지.
- 작은 뷰포트를 가진 기기에서 큰 이미지를 보여주는 것을 방지하여 자동 리사이징.
- 이미지가 뷰포트에 들어왔을 때 로드. (기본적으로 이미지 lazy loading)
- 브라우저가 지원하는 경우, WebP나 AVIF와 같은 모던 포맷으로 이미지 제공.
<div className='flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12'>
<Image
src='/hero-desktop.png'
width={1000}
height={760}
className='hidden md:block'
alt='Screenshots of the dashboard project showing desktop version'
/>
{/* desktop : */}
<Image
src='/hero-mobile.png'
width={560}
height={620}
className='block md:hidden'
alt='Screenshots of the dashboard project showing mobile version'
/>
{/* mobile : */}
</div>
위 코드에서 먼저 이미지의 width, height 설정을 해주었다. 이를 통해 이미지의 종횡비(aspect ratio)를 유지하여 layout shift를 방지할 수 있다.
또한 모바일과 데스크탑에서 다른 이미지를 보여주기 위해 두 개의 이미지를 만들어두었다.
desktop 이미지에 대해서는 기본적으로 hidden이지만 md:block으로 설정하여 화면 너비가 medium 이상일 때, 즉 desktop 이상부터 해당 이미지가 보이도록 하였다.
mobile 이미지에 대해서는 기본적으로 block이지만, md:hidden으로 설정하여 화면 너비가 medium 이상일 때, 즉 desktop 이상부터는 해당 이미지가 보이지 않도록 하였다.
'Next.js' 카테고리의 다른 글
| Next.js 튜토리얼 - ch5. 페이지 간 네비게이팅 (1) | 2024.11.18 |
|---|---|
| Next.js 튜토리얼 - ch4. 레이아웃과 페이지 생성하기 (0) | 2024.11.18 |
| Next.js 튜토리얼 - ch1 ~ 2. 프로젝트 기본 설정 (0) | 2024.11.18 |