개인 프로젝트 개선 기록 - CLS 개선
오늘은 커피챗 때 피드백 받았던 CLS 개선에 대한 내용을 정리하고자 한다. CLS가 뭔지 알아보기 전 비교부터 해보자! 첫 번째 이미지를 보면 새로고침 클릭 시 이미지 로딩 전후로 레이아웃이 변경되는 것을 확인할 수 있다. 반면 두번째 이미지는 새로고침을 클릭해도 레이아웃의 변경이 일어나지 않는다. CLS(Cumulative Layout Shift)란? 레이아웃 변경 횟수로, 화면에서 이동하는 컨텐츠의 양과 정도를 계산한 값이다. 이 지표는 사용자 중심의 성능 지표로서 컨텐츠가 화면에서 이리저리 움직이는 것이 불편을 초래할 수 있기 때문에 제공한다. ✔️ TIP 우수한 사용자 환경을 제공하기 위해선 사이트에서 페이지 방문의 75% 이상에서 CLS가 0.1 이하여야 한다. 솔직히 CLS에 대한 설명을 처..
Programming/기타
2024. 1. 29. 18:25
