Layout Shift에 대해

개념

layout shit는 뒤늦게 로드가 되는 소스로 인하여 화면에서 봤을 때 밀리는 현상을 의미한다.

 

예 ) 

버튼과 이미지가 있을 때 이미지 로드가 늦어 처음에는 버튼만 보이게 된다.

728x90

 

이미지가 로드가 되면서 버튼은 아래로 밀리게 된다.

 

이와 같은 현상이 layout shift 이다.

 

이렇게 되면 무엇이 안좋을까

 

일단 가장 큰 단점은 UX 부분이다.

유저가 처음에 페이지에 접속하면, 버튼이 보여서 누르려고 했는데 이미지가 갑자기 로드가 되면서 버튼이 아래로 밀리고 유저는 이미지를 클릭하게 되는 현상이 발생한다. 

 

또 하나의 문제는 레이아웃을 다시 그려지게 된다는 것이다. 버튼이 밀리고 이미지가 그려지는 것 자체가 처음 잡혀있던  레이아웃이 아닌 변경된 라이아웃이기 떄문에 브라우저에서는 다시 그리는 작업이고 그만큼 손실이 있는 것이다.

 

그렇다면 layout shift의 원인은 무엇일까

1. 사이즈가 정해져 있지 않은 이미지

2. 동적 컨텐츠

3. web font ( FOIT, FOUT )

 

해결

1. 이미지에 대한 크기를 정해주자

2. 동적 컨텐츠의 경우 최대한 layout shift가 일어나지 않는 ui를 제공하자

3. webfont 적용된 사이즈에 대해 고려하여 box를 형성하자