Image 컴포넌트 이용해 layout shift 방지하기

이미지를 활용하는 화면을 제작할 때 layout shift 현상이 발생하면 아래의 기준으로 생각해보자.

 

1. Image페칭속도 및 렌더링속도를 높인다. 사용중인 라이브러리 및 프레임워크에서 preload 제공하는지 확인해보자. 

2. 어쩔 수 없는 상황이라면 blur처리를 통해 layout shift를 방지한다. 

 

<Image .... priority={true}>

 

=> Next의 경우 priority 속성을 통해 Lazyloading을 차단하고 우선순위를 높일 수 있다.

 

 

 

 

 

 

반응형 이미지 미리 로드  |  Articles  |  web.dev

Components: <Image> | Next.js