[ Next.js ] 3장 폰트 및 이미지 최적화

Об этом предложении

3장 폰트 및 이미지 최적화 폰트 최적화하는 이유 폰트 : 웹사이트 디자인에서 중요한 역할이지만, 프로젝트에서 맞춤 폰트 사용 → 폰트 파일을 가져오고 로드해야할 때 성능에 영향 줄 수 있음 커스텀 폰트 사용 시 브라우저는 기본 시스템 폰트로 먼저 글자 보여줌 → 커스텀 폰트 파일 다운로드 완료되면 폰트 교체 이때 글자 크기와 간격 바뀌면서 화면 요소들의 위치가 이동하는 누적 레이아웃 이동 현상 발생 누적 레이아웃 이동(CLS) : 구글이 웹사이트의 성능과 사용자 경험 평가하는데 사용하는 지표 Next.js의 자동 폰트 최적화 방식 Next.js 모듈 사용 시 애플리케이션 내 폰트 자동 최적화, 빌드 시 폰트 파일 다운로드해서 다른 정적 자산과 함께 호스팅 → (성능에 영향 줄 수 있는) 추가 네트워크 폰트 요청 X → 성능 저하 / CLS 현상이 방지됨 CLS = 누적 레이아웃 이동 이미지를 최적화해야 하는 이유 일반 HTML의 태그를 사용할 경우 아래 3가지를 개발자가 수동으로 해결해야함 다양한 화면 크기에 맞춘 가변 반응형 처리 이미지 로딩되면서 주변 레이아웃이 밀려나는 현상 방지 화면에 보이지 않는 위치의 이미지 늦게 로딩하는 지연 로딩 처리 ⇒ 컴포넌트를 사용해 이미지 자동 최적화 가능 컴포넌트 <Image> 컴포넌트 : HTML 태그의 확장, 자동 이미지 최적화가 포함되어 있음 이미지가 로드될 때 자동으로 레이아웃 이동 방지 기능 큰 이미지 → 작은 뷰포트 가진 기기 전송하지 않다록 이미지 크기 조절 기본적으로 이미지 → 게으른 로딩 (이미지가 뷰포트 들어오는 순간 로드됨) 브라우저가 지원할 때 WebP이나 AVIF 같은 현대 포맷의 이미지 제공 <Image> 컴포넌트의 width 와 height 속성 : 화면에 실제 렌더링될 절대적 크기 고정 X, 원본 이미지의 종횡비를 알려주는 값 → 이 비율을 보고 이미지 다 다운로드 되기 전에 자리를 미리 비워서 CLS을 막음 데스크톱 히어로 이미지 추가 레이아웃 이동을 피하려면 이미지의 앤드(and)를 설정하는 것이 좋음 모바일 화면에서는 DOM에서 이미지 제거, 데스크톱 화면에서는 이미지 보여주는 클래스 : hidden md:block /public : 이미지 등 정적 자산 저장 공간

Детали предложения

Провайдер

velog

Источник

velog-rss

Балл

54.36

Уверенность

49%