측정·순위 · 공식 문서
CLS 개선 방법, 화면이 밀리는 원인 찾는 점검 순서
CLS 는 대개 크기를 적지 않은 이미지, 늦게 끼는 광고·임베드·배너, 웹 글꼴 교체에서 생깁니다. 먼저 로딩 중에 밀리는지 로딩 뒤에 밀리는지 가르고, 들어올 요소의 자리를 미리 잡아 두면 줄어듭니다.
누르려던 버튼이 아래로 밀려 다른 것을 누르게 되는 순간이 CLS 가 재는 장면입니다. 숫자는 화면에서 밀린 넓이와 밀린 거리로 정합니다.
원인은 몇 가지로 모입니다. 그래서 어느 때 밀리는지부터 가리면 고칠 요소가 빨리 좁혀집니다.
발견 01
화면이 밀리는 원인은 5가지로 모이고, 대부분 들어올 자리를 미리 잡으면 줄어듭니다
The cause of layout shifts might be images or videos with unknown dimensions, fonts that render larger or smaller than its initial fallback, or third-party ads or widgets that dynamically resize themselves.
레이아웃 이동의 원인은 크기를 모르는 이미지·동영상, 처음 대체 글꼴보다 크거나 작게 그려지는 글꼴, 스스로 크기를 바꾸는 외부 광고나 위젯일 수 있다.
| 원인 | 화면에서 보이는 모습 | 고치는 법 | 공식 문서 원문 |
|---|---|---|---|
| 크기 없는 이미지·동영상 | 이미지가 뜨는 순간 아래 글이 내려갑니다. | img·video 에 width·height 를 적거나 CSS aspect-ratio 로 자리를 잡습니다. | Always include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect-ratio or similar.이미지와 동영상 요소에는 늘 width·height 속성을 넣는다. 아니면 CSS aspect-ratio 등으로 필요한 자리를 잡는다. |
| 늦게 끼는 광고·지도·영상 임베드 | 외부 위젯이 늦게 크기를 정하면서 본문을 밉니다. | 들어올 자리를 min-height·aspect-ratio 로 미리 잡고, 광고가 없어도 그 자리를 남깁니다. | When placing late-loading content in the content flow, layout shifts can be avoided by reserving the space for them in the initial layout. Try to avoid collapsing the reserved space by showing a placeholder if, for example, no ad is returned.늦게 들어오는 콘텐츠는 처음 레이아웃에서 자리를 잡아 두면 이동을 피할 수 있다. 광고가 오지 않아도 자리 표시를 보여 주어 잡아 둔 자리가 접히지 않게 한다. |
| 위에서 끼어드는 배너·공지 | 공지 띠나 쿠키 안내가 위에서 나타나 화면 전체가 내려갑니다. | 자리를 미리 잡거나, 본문 위에 겹쳐 띄우거나, 아래쪽에 둡니다. | If you need to display these types of UI affordances, reserve sufficient space in the viewport for it in advance (for example, using a placeholder or skeleton UI) so that when it loads, it does not cause content in the page to surprisingly shift around. Alternatively, ensure the element is not part of the document flow by overlaying the content where this makes sense.배너 같은 요소를 보여야 한다면 자리 표시나 뼈대 화면으로 미리 자리를 잡아, 뜰 때 본문이 갑자기 밀리지 않게 한다. 알맞다면 문서 흐름에서 빼 본문 위에 겹쳐 띄운다. |
| 웹 글꼴 교체 | 기본 글꼴로 그린 글이 웹 글꼴로 바뀌며 줄 길이가 달라집니다. | 대체 글꼴 크기를 size-adjust 등으로 맞추고, 중요한 글꼴은 미리 받습니다. | Both approaches can cause layout shifts. Minimize the size differences between the fallback font and the web font using the new size-adjust, ascent-override, descent-override, and line-gap-override APIs as detailed in the Improved font fallbacks post.웹 글꼴을 받기 전 처리하는 두 방식 모두 레이아웃 이동을 일으킬 수 있다. size-adjust 등으로 대체 글꼴과 웹 글꼴의 크기 차이를 줄인다. |
| top·left 로 움직이는 애니메이션 | 슬라이드나 펼침 효과가 다른 요소의 자리를 바꿉니다. | 위치 이동은 transform 으로 바꿉니다. | Changing the top and left properties also cause layout shifts, even when the element being moved is on its own layer. Other CSS properties can be changed without triggering re-layouts.top·left 속성을 바꾸면 요소가 자기 레이어에 있어도 레이아웃 이동이 생긴다. 다른 CSS 속성(transform 등)은 레이아웃을 다시 계산하지 않고 바꿀 수 있다. |
| 더 줄이는 법 | 원문 |
|---|---|
| 자리를 못 잡는 요소는 아래로 | If you can't reserve space for injected content, we recommend placing it later on the page to reduce the impact on its CLS.들어올 콘텐츠의 자리를 잡을 수 없다면 페이지 아래쪽에 두어 CLS 영향을 줄이기를 권한다. |
| 글꼴은 처음 그릴 때만 쓰기 | font-display: optional can avoid a re-layout as the web font is only used if it is available by the time of initial layout.font-display: optional 은 처음 레이아웃 때 이미 받은 경우에만 웹 글꼴을 써서 레이아웃 재계산을 피할 수 있다. |
| 중요한 글꼴은 미리 받기 | Load critical web fonts as early as possible using <link rel=preload>.중요한 웹 글꼴은 link rel=preload 로 가능한 한 일찍 받는다. |
| 뒤로 가기 캐시 쓰기 | A highly effective technique for keeping CLS scores low is to ensure your web pages are eligible for the back/forward cache (bfcache).CLS 를 낮게 지키는 매우 효과적인 방법은 페이지가 뒤로·앞으로 캐시(bfcache)를 쓸 수 있게 하는 것이다. |
발견 02
실제 사용자 CLS 와 실험실 CLS 를 견주면 로딩 중 밀림인지 로딩 뒤 밀림인지 갈립니다
CrUX is the Google dataset of the Web Vitals program, and for that, CLS is measured throughout the full life of the page and not just during the initial page load that lab tools typically measure. Differences between these values are likely the result of post-load CLS.
CrUX 는 실험실 도구처럼 첫 로딩만 보지 않고 페이지가 열려 있는 내내 CLS 를 잰다. PageSpeed Insights 의 두 값이 다르다면 로딩 뒤 이동 때문일 가능성이 크다.
| 보이는 것 | 뜻 | 다음에 볼 것 | 원문 |
|---|---|---|---|
| 실제 사용자 CLS 와 실험실 CLS 가 비슷하다 | 로딩 중 밀림 | Lighthouse 진단의 밀린 요소 목록을 봅니다. | When the CrUX and Lighthouse CLS scores of PageSpeed Insights are broadly aligned, this usually indicates there is a load CLS issue that was detected by Lighthouse.PageSpeed Insights 의 CrUX CLS 와 Lighthouse CLS 가 대체로 비슷하면, 대개 Lighthouse 가 잡은 로딩 중 CLS 문제가 있다는 뜻이다. |
| 실제 사용자 CLS 만 나쁘다 | 로딩 뒤 밀림 | 스크롤하며 늦게 뜨는 요소와 마우스를 올렸을 때 바뀌는 요소를 봅니다. | Disagreement between the CrUX and Lighthouse CLS scores often indicates post-load CLS. CLS often happens while the user scrolls through a page, when lazy-loaded content loads fully without space reserved for it.CrUX 와 Lighthouse 의 CLS 가 다르면 로딩 뒤 CLS 인 경우가 많다. 스크롤할 때 자리를 잡지 않은 지연 로딩 콘텐츠가 다 뜨면서 자주 생긴다. |
| 진단이 가리킨 요소 | 밀린 쪽일 수 있음 | 그 요소 바로 위에 늦게 들어온 요소를 찾습니다. | Lighthouse will identify the elements that were shifted, but often these are the ones impacted rather than the elements causing the CLS.Lighthouse 는 밀린 요소를 알려 주지만, 그 요소는 원인이 아니라 영향을 받은 쪽인 경우가 많다. |
개발자 화면에서는 밀림이 안 보여도 방문자에게는 보일 수 있습니다. 테스트 이미지는 이미 캐시에 있어 바로 뜨기 때문입니다(원문: Test images are often already in the developer's browser cache, but take longer to load for the end user.)
로딩 뒤 밀림은 크롬 개발자 도구 성능 패널의 실시간 측정을 켜 두고 페이지를 직접 굴려 보며 찾습니다.
발견 03
CLS 는 짧게 몰린 밀림의 합 가운데 가장 큰 묶음이고, 방문의 75%가 0.1 이하여야 좋음입니다
| 계산 규칙 | 원문 |
|---|---|
| 무엇을 재나 | It measures the instability of content by combining how much visible content has shifted in the viewport with the distance the affected elements moved.CLS 는 화면에서 보이는 콘텐츠가 밀린 넓이와 밀린 거리를 합쳐 콘텐츠의 불안정성을 잰다. |
| 어느 밀림을 세나 | CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page.CLS 는 페이지가 열려 있는 동안 생긴 예상 밖 이동 점수 가운데 가장 크게 몰린 묶음의 값이다. |
| 묶음(세션 창) | A burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than 1-second in between each shift and a maximum of 5 seconds for the total window duration.세션 창이라 부르는 이동 묶음은 이동 사이 간격이 1초 미만으로 이어지고, 묶음 전체가 최대 5초인 것을 말한다. |
| 좋음 기준 | To provide a good user experience, sites should strive to have a CLS of 0.1 or less for at least 75% of page visits.좋은 사용자 경험을 위해 페이지 방문의 75% 이상에서 CLS 0.1 이하를 목표로 한다. |
| 조작 직후 밀림 | As a reminder, layout shifts that occur within 500 milliseconds of user input are not counted towards CLS.사용자 입력 뒤 500밀리초 안에 생긴 레이아웃 이동은 CLS 에 세지 않는다. |
발견 04
같은 CLS 0.1 초과라도 B2B·B2C·B2G 는 밀리는 자리가 다릅니다
예시 ① 제품 사양표 위에 도면 이미지가 있는 기업 사이트(B2B)
도면과 제품 사진에 크기를 적지 않아, 이미지가 뜰 때 사양표가 한 번에 내려갑니다. 실험실과 실제 사용자 CLS 가 둘 다 나쁜 로딩 중 밀림입니다.
이미지 태그마다 width·height 를 넣는 것만으로 대부분 풀립니다.
예시 ② 상품 목록 위에 행사 띠 배너가 끼는 쇼핑몰(B2C)
행사 띠가 스크립트로 뒤늦게 위에 들어오고, 스크롤하면 상품 이미지가 늦게 채워집니다. 로딩 중과 로딩 뒤 밀림이 섞인 경우입니다.
띠 배너 자리를 미리 잡고, 상품 이미지 칸에 비율을 지정합니다.
예시 ③ 웹 글꼴과 지도 임베드를 쓰는 공공기관 누리집(B2G)
본문이 기본 글꼴로 먼저 그려졌다가 웹 글꼴로 바뀌며 줄이 바뀌고, 오시는 길 지도가 늦게 크기를 정합니다.
대체 글꼴 크기를 웹 글꼴에 맞추고, 지도 칸은 높이를 고정해 둡니다.
그럼 CLS 는 어떤 순서로 점검하나요?
- PageSpeed Insights 에서 위쪽 실제 사용자 CLS 와 아래쪽 실험실 CLS 를 함께 봅니다. 위쪽이 「이 URL」인지 「출처」인지도 확인합니다.
- 두 값이 비슷하면 로딩 중 밀림입니다. Lighthouse 진단의 크기 없는 이미지 항목과 밀린 요소 목록을 봅니다.
- 실제 사용자 값만 나쁘면 로딩 뒤 밀림입니다. 개발자 도구 성능 패널을 켜고 스크롤·마우스 올리기를 해 보며 밀리는 순간을 찾습니다.
- 밀린 요소 바로 위에 늦게 들어온 요소를 찾아, 위 원인 표의 어느 줄인지 정합니다.
- 이미지 크기, 임베드·배너 자리, 글꼴 크기 맞춤, transform 애니메이션 순으로 고칩니다.
- 고친 뒤 실험실에서 바로 확인하고, 실제 사용자 값은 서치 콘솔 보고서에서 28일 확인을 거칩니다. 절차는 「코어 웹 바이탈 보고서 읽는 법」 편에 자세히 적었습니다.
조사 방법
- web.dev (Google Chrome) 「Cumulative Layout Shift (CLS)」 (문서 수정일 2023-04-12) · 최종 확인일 2026-10-25 · https://web.dev/articles/cls
- web.dev (Google Chrome) 「Optimize Cumulative Layout Shift」 (문서 수정일 2025-02-07) · 최종 확인일 2026-10-25 · https://web.dev/articles/optimize-cls
- Search Console Help 「Core Web Vitals report」 · 최종 확인일 2026-10-25 · https://support.google.com/webmasters/answer/9205520
- 원인 5가지는 「Optimize Cumulative Layout Shift」가 흔한 원인과 애니메이션으로 적은 내용을 회사 사이트에서 보이는 모습으로 묶은 것입니다. 묶는 방식은 편집 판단입니다.
- 원인 표의 「로딩 중·로딩 뒤」 구분(커버 그림의 칸)은 원문 설명을 바탕으로 한 편집 판단입니다.
- 예시 ①②③은 이해를 돕기 위해 만든 가상 상황이며, 실제 기업·기관의 사례가 아닙니다.
- 원문은 영어판(hl=en)이고, 도구·보고서 이름은 같은 문서 한국어판(hl=ko) 표기를 따랐습니다.