웹 기술 기초
웹 페이지의 사용 경험을 나타내는 지표인 Core Web Vitals 중 CLS(Cumulative Layout Shift)가 나타내는 것은?
- A페이지를 읽어 들일 때, 화면 안에서 가장 큰 이미지나 텍스트 덩어리가 표시되기까지의 시간
- B이용자의 클릭이나 키 입력부터 그 결과가 화면에 그려지기까지의 지연
- C표시 도중에 나중에 읽어 들여진 이미지나 광고 등으로 인해 요소의 위치가 예기치 않게 어긋난 양
정답과 해설 보기
정답: C. 표시 도중에 나중에 읽어 들여진 이미지나 광고 등으로 인해 요소의 위치가 예기치 않게 어긋난 양
Core Web Vitals는 읽어 들이기 속도를 나타내는 LCP(Largest Contentful Paint), 조작에 대한 응답 속도를 나타내는 INP(Interaction to Next Paint), 표시의 안정성을 나타내는 CLS의 세 지표로 이루어집니다(INP는 2024년 3월에 FID를 대신하여 추가되었습니다). CLS는 나중에 나타난 이미지나 광고 때문에 텍스트 등이 아래로 밀려나는 것 같은, 예기치 않은 위치 어긋남을 수치로 나타낸 것입니다. 이미지나 동영상에 width와 height를 지정하여 표시할 자리를 미리 확보해 두면 CLS를 작게 할 수 있습니다.