레이아웃 쉬프트(Layout shift)
2022. 7. 23. 19:41
반응형
레이아웃 쉬프트(Layout shift)
늦은 이미지 로딩으로 인해 레이아웃이 밀리거나 변경되는 현상
화면 상에서 위치 등을 다시 계산해야 하기 때문에 리소스가 소모되고
사용자 경험에 좋지 않은 영향을 미친다.
웹사이트 효율 측정하기
개발자도구 > light house에서 레이아웃 시프트에 대한 효율을 측정할 수 있다.
발생 원인
- 이미지의 사이즈가 정해져있지 않아서
- 콘텐츠가 동적으로 삽입되어서
- 웹폰트 때문 (브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 보이지 않는 FOIT, 브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 대체 글꼴로 렌더링되는 FOUT)
해결방법
컴포넌트들의 사이즈를 미리 설정해준다(동적으로 로드되는 경우에는 최대한 예측하여).
반응형
'한 걸음 > 프론트엔드 최적화' 카테고리의 다른 글
| [프론트엔드 최적화] 불필요한 css 제거 (0) | 2022.07.18 |
|---|---|
| [프론트엔드 최적화] 캐시 최적화 (0) | 2022.07.18 |
| [프론트엔드 최적화] 폰트 최적화 -2 (폰트 사이즈 줄이기) (0) | 2022.04.06 |
| [프론트엔드 최적화] 폰트 최적화 -1 (Font-face, Fontface observer) (0) | 2022.04.06 |
| [프론트엔드 최적화] 동영상 사이즈 압축(최적화) (0) | 2022.04.05 |
