웹에서 CLS(Cumulative Layout Shift)란 무엇인가요?

Q: 웹에서 CLS(Cumulative Layout Shift)란 무엇인가요?

페이지 로드 중 레이아웃이 예기치 않게 밀리는 정도를 수치화한 시각적 안정성 지표이다 CLS는 Core Web Vitals의 하나로, 이미지·광고·폰트 등이 늦게 로드되면서 기존 콘텐츠가 밀리는 현상을 측정합니다. 좋은 CLS는 0.1 이하입니다. img에 width/height 지정, 폰트 font-display: swap, 동적 콘텐츠의 공간 예약 등으로 개선합니다.

보통 MDN Web Docs

보기 및 정답

A 프로젝트에서 사용하는 CSS 파일의 총 크기(바이트)를 합산하여 최적화 여부를 판단하는 지표이다

B 페이지 로드 중 레이아웃이 예기치 않게 밀리는 정도를 수치화한 시각적 안정성 지표이다

C 서버의 CPU 사용률과 메모리 점유율을 모니터링하여 서버 성능 상태를 실시간으로 측정하는 지표이다

D HTML 문서에 포함된 DOM 요소의 총 개수를 집계하여 페이지 복잡도를 수치화하는 성능 지표이다

해설

CLS는 Core Web Vitals의 하나로, 이미지·광고·폰트 등이 늦게 로드되면서 기존 콘텐츠가 밀리는 현상을 측정합니다. 좋은 CLS는 0.1 이하입니다. img에 width/height 지정, 폰트 font-display: swap, 동적 콘텐츠의 공간 예약 등으로 개선합니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

웹에서 CLS(Cumulative Layout Shift)란 무엇인가요?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

시장과 사람의 답을 봤다면,다음 결과물의 구조를 고릅니다.

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.