갑작스러운 레이아웃 이동을 방지하여 사용자 경험을 개선하는 방법 알아보기
게시: 2020년 5월 5일, 최종 업데이트: 2025년 2월 7일
누적 레이아웃 이동 (CLS)은 Core Web Vitals 측정항목 3개 중 하나입니다. 표시 영역에서 보이는 콘텐츠가 이동한 정도와 영향을 받은 요소가 이동한 거리를 결합하여 콘텐츠의 불안정성을 측정합니다.
레이아웃 변경은 사용자의 주의를 분산시킬 수 있습니다. 기사를 읽기 시작했는데 갑자기 페이지의 요소가 이동하여 읽던 내용을 놓치고 다시 찾아야 한다고 가정해 보겠습니다. 뉴스 읽기, '검색' 또는 '장바구니에 추가' 버튼 클릭 등 웹에서 매우 흔하게 발생합니다. 이러한 경험은 시각적으로 거슬리고 답답합니다. 이러한 문제는 페이지에 다른 요소가 갑자기 추가되거나 크기가 조정되어 표시되는 요소가 강제로 이동할 때 발생하는 경우가 많습니다.
우수한 사용자 환경을 제공하기 위해 사이트에서는 페이지 방문의 75% 이상에 대해 CLS가 0.1 이하가 되도록 노력해야 합니다.
초 또는 밀리초로 측정되는 시간 기반 값인 다른 핵심 웹 지표와 달리 CLS 점수는 콘텐츠가 얼마나 이동하는지, 얼마나 멀리 이동하는지를 계산한 결과를 기반으로 하는 단위가 없는 값입니다.
이 가이드에서는 레이아웃 변경의 일반적인 원인을 최적화하는 방법을 알아봅니다.
CLS가 좋지 않은 가장 일반적인 원인은 다음과 같습니다.
- 크기가 없는 이미지
- 크기가 없는 광고, 삽입, iframe
- 크기가 없는 광고, 삽입, iframe과 같은 동적으로 삽입된 콘텐츠
- 웹 글꼴
레이아웃 변경의 원인 이해하기
일반적인 CLS 문제에 대한 해결 방법을 살펴보기 전에 CLS 점수와 이동이 발생하는 위치를 파악하는 것이 중요합니다.
실험실 도구와 필드의 CLS 비교
개발자가 Chrome 사용자 환경 보고서 (CrUX)에서 측정한 CLS가 Chrome DevTools 또는 기타 실험실 도구를 사용하여 측정한 CLS와 일치하지 않기 때문에 잘못되었다고 생각하는 경우가 많습니다. Lighthouse와 같은 웹 성능 실험실 도구는 일부 웹 성능 측정항목을 측정하고 몇 가지 안내를 제공하기 위해 일반적으로 페이지의 기본 로드를 실행하므로 페이지의 전체 CLS를 표시하지 않을 수 있습니다 (하지만 Lighthouse 사용자 흐름을 사용하면 기본 페이지 로드 감사 이상의 항목을 측정할 수 있음).
CrUX는 웹 바이탈 프로그램의 Google 데이터 세트이며, 이를 위해 CLS는 실험실 도구에서 일반적으로 측정하는 초기 페이지 로드 중에만 측정되는 것이 아니라 페이지의 전체 수명 동안 측정됩니다.
페이지를 처음 렌더링하는 데 필요한 모든 리소스가 가져오기 때문에 페이지 로드 중에 레이아웃 변경이 매우 흔하게 발생하지만 초기 로드 후에도 레이아웃 변경이 발생할 수 있습니다. 많은 로드 후 이동은 사용자 상호작용의 결과로 발생할 수 있으므로 해당 상호작용 후 500밀리초 이내에 발생하는 한 예상되는 이동으로 간주되어 CLS 점수에서 제외됩니다.
하지만 사용자가 예상하지 못한 로드 후 이동이 포함될 수 있습니다. 예를 들어 페이지를 더 스크롤하여 지연 로드된 콘텐츠가 로드되어 이동이 발생하는 경우입니다. 로드 후 CLS의 다른 일반적인 원인은 500밀리초 유예 기간보다 오래 걸리는 전환 상호작용(예: 싱글 페이지 앱)입니다.
PageSpeed Insights의 '실제 사용자의 경험 알아보기' 섹션에는 URL의 사용자 인식 CLS가 표시되고, '성능 문제 진단' 섹션에는 실험실 기반 로드 CLS가 표시됩니다. 이러한 값의 차이는 로드 후 CLS로 인한 것일 수 있습니다.
로드 CLS 문제 식별
PageSpeed Insights의 CrUX 및 Lighthouse CLS 점수가 전반적으로 일치하면 일반적으로 Lighthouse에서 감지된 로드 CLS 문제가 있음을 나타냅니다. 이 경우 Lighthouse는 너비와 높이가 누락되어 CLS를 유발하는 이미지에 관한 자세한 정보를 제공하는 두 가지 감사와 페이지 로드 시 이동한 모든 요소와 CLS 기여도를 나열하는 감사를 통해 도움을 줍니다. CLS 감사로 필터링하여 이러한 감사를 확인할 수 있습니다.
DevTools의 성능 패널은 레이아웃 변경에 관한 풍부한 정보를 제공합니다.
Layout Shift 클러스터를 표시하는 보라색 막대가 채워집니다. 다이아몬드를 클릭하면 이동 애니메이션과 요약 패널의 세부정보가 표시됩니다.
레이아웃 변경은 레이아웃 변경 트랙에 강조 표시됩니다. 보라색 선은 다이아몬드가 해당 클러스터의 개별 교대 근무를 보여주는 교대 근무 클러스터로 그룹화됩니다. 다이아몬드의 크기는 변화의 크기에 비례하므로 가장 큰 변화에 집중할 수 있습니다.
교대 근무를 클릭하면 교대 근무 애니메이션이 포함된 팝업이 표시되고 교대 근무 요소가 보라색으로 강조 표시됩니다.
또한 Layout Shift 레코드의 요약 뷰에는 시작 시간, 교대 근무 점수, 이동된 요소가 포함됩니다. 이는 다시 로드 성능 프로필로 쉽게 복제할 수 있으므로 로드 CLS 문제에 관한 세부정보를 파악하는 데 특히 유용합니다.
또한 왼쪽의 통계 패널에 표시되는 레이아웃 이동 원인 통계로 연결됩니다. 이 통계에는 상단에 총 CLS가 표시되고 레이아웃 이동의 가능한 이유도 표시됩니다.
로드 후 CLS 문제 식별
CrUX와 Lighthouse CLS 점수 간의 불일치는 로드 후 CLS를 나타내는 경우가 많습니다. 필드 데이터가 없으면 이러한 변화를 추적하기 어려울 수 있습니다. 필드 데이터 수집에 관한 자세한 내용은 필드에서 CLS 요소 측정을 참고하세요.
성능 패널의 실시간 측정항목 보기를 사용하면 페이지와 상호작용하고 CLS 점수를 모니터링하여 큰 레이아웃 변경을 유발하는 상호작용을 식별할 수 있습니다.
DevTools를 사용하는 대신 콘솔에 붙여넣은 Performance Observer를 사용하여 레이아웃 변경을 기록하면서 웹페이지를 탐색할 수 있습니다.
이동 모니터링을 설정한 후 로드 후 CLS 문제를 재현해 볼 수 있습니다. CLS는 사용자가 페이지를 스크롤하는 동안 지연 로드된 콘텐츠가 콘텐츠를 위해 예약된 공간 없이 완전히 로드될 때 자주 발생합니다. 사용자가 포인터를 콘텐츠 위로 가져갈 때 콘텐츠가 이동하는 것도 로드 후 CLS의 일반적인 원인입니다. 이러한 상호작용 중에 콘텐츠가 이동하면 500밀리초 이내에 발생하더라도 예상치 못한 것으로 간주됩니다.
자세한 내용은 레이아웃 이동 디버그를 참고하세요.
CLS의 일반적인 원인을 파악한 후에는 Lighthouse의 기간 사용자 흐름 모드를 사용하여 레이아웃 이동을 도입하여 일반적인 사용자 흐름이 회귀하지 않도록 할 수도 있습니다.
필드에서 CLS 요소 측정
필드에서 CLS를 모니터링하면 CLS가 발생하는 상황을 파악하고 가능한 원인을 좁히는 데 매우 유용합니다. 대부분의 실험실 도구와 마찬가지로 현장 도구는 이동한 요소만 측정하지만 일반적으로 원인을 파악하기에 충분한 정보를 제공합니다. CLS 필드 측정값을 사용하여 해결해야 할 우선순위가 가장 높은 문제를 확인할 수도 있습니다.
web-vitals 라이브러리에는 이 추가 정보를 수집할 수 있는 기여도 함수가 있습니다. 자세한 내용은 필드에서 성능 디버그를 참고하세요. 다른 RUM 제공업체도 이 데이터를 유사한 방식으로 수집하고 표시하기 시작했습니다.
CLS의 일반적인 원인
CLS의 원인을 파악했다면 문제 해결을 시작할 수 있습니다. 이 섹션에서는 CLS의 일반적인 이유와 이를 방지하기 위해 취할 수 있는 조치를 보여줍니다.
크기가 없는 이미지
이미지 및 동영상 요소에 항상 width 및 height 크기 속성을 포함하세요. 또는 CSS aspect-ratio 등으로 필요한 공간을 예약합니다. 이 방식을 사용하면 이미지가 로드되는 동안 브라우저가 문서에 올바른 양의 공간을 할당할 수 있습니다.
이미지의 width 및 height 속성 기록
웹 초기에는 브라우저가 이미지를 가져오기 전에 페이지에 충분한 공간이 할당되도록 개발자가 <img> 태그에 width 및 height 속성을 추가했습니다. 이렇게 하면 리플로우와 재배치를 최소화할 수 있습니다.
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
이 예의 width 및 height에는 단위가 포함되어 있지 않습니다. 이러한 '픽셀' 크기는 브라우저가 페이지 레이아웃에서 640x360 영역을 예약하도록 합니다. 실제 크기가 일치하는지 여부와 관계없이 이미지가 이 공간에 맞게 늘어납니다.
반응형 웹 디자인이 도입되면서 개발자는 width 및 height를 생략하고 CSS를 사용하여 이미지 크기를 조정하기 시작했습니다.
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
하지만 이미지 크기가 지정되지 않았으므로 브라우저가 이미지를 다운로드하기 시작하고 크기를 확인할 수 있을 때까지는 공간을 할당할 수 없습니다. 이미지가 로드되면 이미지를 위한 공간을 확보하기 위해 텍스트가 페이지 아래로 이동하여 혼란스럽고 짜증스러운 사용자 환경이 조성됩니다.
이때 가로세로 비율이 중요합니다. 이미지의 가로세로 비율은 너비와 높이의 비율입니다. 일반적으로 콜론으로 구분된 두 개의 숫자로 표현됩니다 (예: 16:9 또는 4:3). x:y 가로세로 비율의 경우 이미지는 너비가 x단위이고 높이가 y단위입니다.
즉, 한 측정기준을 알면 다른 측정기준을 확인할 수 있습니다. 16:9 가로세로 비율의 경우:
- puppy.jpg의 높이가 360px인 경우 너비는 360 x (16 / 9) = 640px입니다.
- puppy.jpg의 너비가 640px이면 높이는 640 x (9 / 16) = 360px입니다.
이미지의 가로세로 비율을 알면 브라우저에서 높이와 관련 영역에 충분한 공간을 계산하고 예약할 수 있습니다.
이미지 크기 설정에 관한 최신 권장사항
최신 브라우저는 이미지의 width 및 height 속성을 기반으로 이미지의 기본 가로세로 비율을 설정하므로 이미지에 이러한 속성을 설정하고 스타일 시트에 위의 CSS를 포함하면 레이아웃 이동을 방지할 수 있습니다.
<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
그러면 모든 브라우저가 요소의 기존 width 및 height 속성을 기반으로 기본 가로세로 비율을 추가합니다.
이미지가 로드되기 전에 width 및 height 속성을 기반으로 가로세로 비율을 계산합니다. 레이아웃 계산이 시작될 때 이 정보를 제공합니다. 이미지가 특정 너비 (예: width: 100%)를 갖도록 지정되면 가로세로 비율을 사용하여 높이가 계산됩니다.
이 aspect-ratio 값은 기본 사용자 에이전트 스타일 시트가 아닌 HTML이 처리될 때 주요 브라우저에 의해 계산되므로 (이 게시물에서 자세히 알아보기) 값이 약간 다르게 표시됩니다. 예를 들어 Chrome은 요소 패널의 스타일 섹션에 다음과 같이 표시합니다.
img[Attributes Style] {
aspect-ratio: auto 640 / 360;
}
Safari도 HTML 속성 스타일 소스를 사용하여 유사하게 동작합니다. Firefox는 계산된 aspect-ratio를 검사기 패널에 전혀 표시하지 않지만 레이아웃에는 사용합니다.
위 코드의 auto 부분은 이미지가 다운로드된 후 이미지 크기가 기본 가로세로 비율을 재정의하므로 중요합니다. 이미지 크기가 다른 경우 이미지가 로드된 후에도 레이아웃이 약간 이동하지만, HTML이 잘못된 경우 이미지가 사용 가능해지면 이미지 가로세로 비율이 계속 사용됩니다. 실제 가로세로 비율이 기본값과 다르더라도 크기가 제공되지 않은 이미지의 0x0 기본 크기보다 레이아웃 이동이 적게 발생합니다.
반응형 이미지에 관한 추가 고려사항과 함께 가로세로 비율을 자세히 알아보려면 미디어 가로세로 비율을 사용한 끊김 없는 페이지 로드를 참고하세요.
이미지가 컨테이너에 있는 경우 CSS를 사용하여 이미지를 컨테이너의 너비로 크기를 조절할 수 있습니다. 이미지 높이에 고정 값을 사용하지 않도록 height: auto;을 설정합니다.
img {
height: auto;
width: 100%;
}
반응형 이미지는 어떤가요?
반응형 이미지를 사용할 때 srcset는 브라우저에서 선택할 수 있는 이미지와 각 이미지의 크기를 정의합니다. <img> 너비 및 높이 속성을 설정할 수 있도록 각 이미지는 동일한 가로세로 비율을 사용해야 합니다.
<img
width="1000"
height="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
alt="Puppy with balloons"
/>
아트 디렉션에 따라 이미지의 가로세로 비율도 변경될 수 있습니다. 예를 들어 좁은 뷰포트에는 이미지의 잘린 부분을 포함하고 데스크톱에는 전체 이미지를 표시할 수 있습니다.
<picture>
<source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
<source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
<img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>
이제 Chrome, Firefox, Safari에서 지정된 <picture> 요소 내의 <source> 요소에 width 및 height를 설정할 수 있습니다.
<picture>
<source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" width="480" height="400" />
<source media="(min-width: 800px)" srcset="puppy-800w.jpg" width="800" height="400" />
<img src="puppy-800w.jpg" alt="Puppy with balloons" width="800" height="400" />
</picture>
광고, 삽입, 기타 지연 로드 콘텐츠
레이아웃 변경을 유발할 수 있는 콘텐츠 유형은 이미지뿐만이 아닙니다. 광고, 삽입, iframe, 기타 동적으로 삽입된 콘텐츠는 모두 콘텐츠가 아래로 이동하여 CLS가 증가할 수 있습니다.
광고는 웹에서 레이아웃 변화에 가장 큰 영향을 미치는 요소 중 하나입니다. 광고 네트워크와 게시자는 동적 광고 크기를 지원하는 경우가 많습니다. 광고 크기를 늘리면 클릭률이 높아지고 입찰에 참여하는 광고가 많아져 실적과 수익이 증가합니다. 하지만 광고로 인해 보고 있는 콘텐츠가 페이지 아래로 밀려나 사용자 경험이 최적화되지 않을 수 있습니다.
삽입 가능한 위젯을 사용하면 YouTube의 동영상, Google 지도의 지도, 소셜 미디어 게시물과 같은 휴대용 웹 콘텐츠를 페이지에 포함할 수 있습니다. 하지만 이러한 위젯은 로드되기 전에 콘텐츠의 크기를 알지 못하는 경우가 많습니다. 따라서 삽입을 제공하는 플랫폼은 항상 위젯을 위한 공간을 예약하지 않으며, 이로 인해 위젯이 최종적으로 로드될 때 레이아웃 이동이 발생합니다.
이러한 문제를 처리하는 기술은 모두 비슷합니다. 가장 큰 차이점은 삽입될 콘텐츠를 얼마나 제어할 수 있는지입니다. 광고 파트너와 같은 서드 파티가 삽입하는 경우 삽입될 콘텐츠의 정확한 크기를 알 수 없으며 이러한 삽입 내에서 발생하는 레이아웃 변경을 제어할 수 없습니다.
늦게 로드되는 콘텐츠를 위한 공간 예약
콘텐츠 흐름에 지연 로드 콘텐츠를 배치할 때 초기 레이아웃에서 해당 콘텐츠의 공간을 예약하면 레이아웃 이동을 방지할 수 있습니다.
한 가지 방법은 min-height CSS 규칙을 추가하여 공간을 예약하는 것입니다. 예를 들어 광고와 같은 반응형 콘텐츠의 경우 브라우저에서 제공된 크기의 이미지에 대해 이 속성을 자동으로 사용하는 방식과 유사한 방식으로 aspect-ratio CSS 속성을 사용합니다.
미디어 쿼리를 사용하여 폼 팩터 간 광고 또는 자리표시자 크기의 미묘한 차이를 고려해야 할 수 있습니다.
광고와 같이 높이가 고정되지 않은 콘텐츠의 경우 레이아웃 이동을 완전히 없애는 데 필요한 정확한 공간을 예약하지 못할 수 있습니다. 더 작은 광고가 게재되는 경우 게시자는 레이아웃 변경을 방지하기 위해 더 큰 컨테이너의 스타일을 지정하거나 이전 데이터를 기반으로 광고 슬롯에 가장 적합한 크기를 선택할 수 있습니다. 이 접근 방식의 단점은 페이지의 빈 공간이 늘어난다는 점입니다.
대신 사용할 초기 크기를 가장 작은 크기로 설정하고 더 큰 콘텐츠에 대해 어느 정도의 이동을 허용할 수 있습니다. 앞서 제안한 대로 min-height를 사용하면 빈 요소의 기본 크기인 0px에 비해 레이아웃 변경의 영향을 줄이면서 필요에 따라 상위 요소가 커질 수 있습니다.
예를 들어 반환된 광고가 없는 경우 자리표시자를 표시하여 예약된 공간이 접히지 않도록 합니다. 요소에 할당된 공간을 삭제하면 콘텐츠를 삽입하는 것만큼 CLS가 발생할 수 있습니다.
지연 로드 콘텐츠를 표시 영역 하단에 배치
표시 영역 상단에 가까운 위치에 동적으로 삽입된 콘텐츠는 표시 영역 하단에 삽입된 콘텐츠보다 레이아웃 이동을 더 많이 유발하는 경향이 있습니다. 하지만 표시 영역의 어느 곳에든 콘텐츠를 삽입하면 여전히 약간의 이동이 발생합니다. 삽입된 콘텐츠의 공간을 예약할 수 없는 경우 페이지 후반부에 배치하여 CLS에 미치는 영향을 줄이는 것이 좋습니다.
사용자 상호작용 없이 새 콘텐츠 삽입 방지
사이트를 로드하려고 할 때 뷰포트 상단 또는 하단에 UI가 갑자기 표시되어 레이아웃이 이동하는 것을 경험해 보셨을 것입니다. 광고와 마찬가지로 페이지의 나머지 콘텐츠를 이동시키는 배너와 양식에서 이 문제가 자주 발생합니다.
이러한 유형의 UI 어포던스를 표시해야 하는 경우 로드될 때 페이지의 콘텐츠가 갑자기 이동하지 않도록 미리 뷰포트에 충분한 공간을 예약하세요 (예: 자리표시자 또는 스켈레톤 UI 사용). 또는 콘텐츠를 오버레이하여 요소가 문서 흐름에 포함되지 않도록 합니다. 이러한 유형의 구성요소에 관한 권장사항은 쿠키 알림 권장사항 게시물을 참고하세요.
경우에 따라 콘텐츠를 동적으로 추가하는 것이 사용자 경험에서 중요한 부분입니다. 예를 들어 상품 목록에 상품을 더 로드하거나 실시간 피드 콘텐츠를 업데이트할 때입니다. 이러한 경우 예기치 않은 레이아웃 이동을 방지하는 방법은 여러 가지가 있습니다.
- 고정된 크기의 컨테이너 내에서 이전 콘텐츠를 새 콘텐츠로 대체하거나 캐러셀을 사용하고 전환 후 이전 콘텐츠를 삭제합니다. 새 콘텐츠가 로드되는 동안 실수로 클릭하거나 탭하는 것을 방지하려면 전환이 완료될 때까지 링크와 컨트롤을 사용 중지해야 합니다.
- 사용자가 새로운 콘텐츠의 로드를 시작하도록 하여 전환에 놀라지 않도록 합니다 (예: '더보기' 또는 '새로고침' 버튼). 사용자 상호작용 전에 콘텐츠를 미리 가져와서 즉시 표시하는 것이 좋습니다. 사용자 입력 후 500밀리초 이내에 발생하는 레이아웃 변경은 CLS에 포함되지 않습니다.
- 화면 밖에서 콘텐츠를 원활하게 로드하고 사용자가 콘텐츠를 사용할 수 있다는 알림을 오버레이합니다 (예: '상단으로 스크롤' 버튼).
애니메이션
CSS 속성 값을 변경하면 브라우저가 이러한 변경사항에 반응해야 할 수 있습니다. box-shadow 및 box-sizing과 같은 일부 값은 레이아웃, 페인트, 컴포지션을 다시 트리거합니다. 이동되는 요소가 자체 레이어에 있는 경우에도 top 및 left 속성을 변경하면 레이아웃이 이동합니다. 이러한 속성을 사용하여 애니메이션을 적용하지 마세요.
다른 CSS 속성은 레이아웃을 다시 트리거하지 않고 변경할 수 있습니다. 여기에는 transform 애니메이션을 사용하여 요소를 변환하거나, 크기를 조정하거나, 회전하거나, 기울이는 것이 포함됩니다.
translate를 사용하여 합성된 애니메이션은 다른 요소에 영향을 미칠 수 없으므로 CLS에 포함되지 않습니다. 합성되지 않은 애니메이션은 레이아웃을 다시 설정하지도 않습니다. 레이아웃 변경을 트리거하는 CSS 속성에 대해 자세히 알아보려면 고성능 애니메이션을 참고하세요.
웹 글꼴
웹 글꼴을 다운로드하기 전에 웹 글꼴의 다운로드 및 렌더링은 일반적으로 다음 두 가지 방법 중 하나로 처리됩니다.
- 대체 글꼴이 웹 글꼴로 바뀌어 스타일이 지정되지 않은 텍스트 플래시 (FOUT)가 발생합니다.
- 웹 글꼴을 사용할 수 있고 텍스트가 표시될 때까지 대체 글꼴을 사용하여 '보이지 않는' 텍스트가 표시됩니다 (FOIT - 보이지 않는 텍스트 깜박임).
두 접근 방식 모두 레이아웃 변경을 유발할 수 있습니다. 텍스트가 표시되지 않더라도 대체 글꼴을 사용하여 레이아웃이 지정되므로 웹 글꼴이 로드되면 텍스트 블록과 주변 콘텐츠가 표시되는 글꼴과 동일한 방식으로 이동합니다.
다음 도구를 사용하면 텍스트 이동을 최소화할 수 있습니다.
font-display: optional는 초기 레이아웃 시점에 사용할 수 있는 경우에만 웹 글꼴이 사용되므로 레이아웃을 다시 지정하지 않아도 됩니다.- 적절한 대체 글꼴이 사용되었는지 확인합니다. 예를 들어
font-family: "Google Sans", sans-serif;를 사용하면"Google Sans"가 로드되는 동안 브라우저의sans-serif대체 글꼴이 사용됩니다.font-family: "Google Sans"만 사용하여 대체 글꼴을 지정하지 않으면 기본 글꼴이 사용됩니다. Chrome의 기본 글꼴은 'Times'로, 기본sans-serif글꼴보다 일치도가 낮은 세리프 글꼴입니다. - 글꼴 대체 개선 게시물에 자세히 설명된 대로 새로운
size-adjust,ascent-override,descent-override,line-gap-overrideAPI를 사용하여 대체 글꼴과 웹 글꼴 간의 크기 차이를 최소화합니다. - 글꼴 로드 API를 사용하면 필요한 글꼴을 가져오는 데 걸리는 시간을 줄일 수 있습니다.
<link rel=preload>를 사용하여 중요한 웹 글꼴을 최대한 빨리 로드하세요. 미리 로드된 글꼴은 첫 번째 페인트를 충족할 가능성이 높으므로 레이아웃 이동이 없습니다.
다른 글꼴 권장사항은 글꼴 권장사항을 참고하세요.
페이지가 뒤로-앞으로 캐시를 사용할 수 있도록 하여 CLS 줄이기
CLS 점수를 낮게 유지하는 매우 효과적인 방법은 웹페이지가 뒤로/앞으로 캐시 (bfcache)를 사용할 수 있도록 하는 것입니다.
bfcache는 사용자가 이동한 후 짧은 기간 동안 브라우저 메모리에 페이지를 보관하므로 사용자가 페이지로 돌아가면 사용자가 떠난 상태 그대로 복원됩니다. 즉, 완전히 로드된 페이지를 즉시 사용할 수 있으며, 앞서 설명한 이유로 인해 로드 중에 일반적으로 발생하는 레이아웃 밀림이 없습니다.
이 경우에도 초기 페이지 로드 시 레이아웃 이동이 발생할 수 있지만 사용자가 페이지를 다시 탐색할 때는 동일한 레이아웃 이동이 반복되지 않습니다. 초기 로드 시에도 항상 시프트가 발생하지 않도록 해야 하지만 완전히 해결하기 어려운 경우 bfcache 탐색에서 시프트를 방지하여 영향을 최소화할 수 있습니다.
많은 사이트에서 뒤로 및 앞으로 탐색이 일반적입니다. 예를 들어 콘텐츠 페이지, 카테고리 페이지 또는 검색 결과로 돌아가는 경우입니다.
이 기능이 Chrome에 출시되었을 때 CLS가 눈에 띄게 개선되었습니다.
뒤로-앞으로 캐시는 모든 브라우저에서 기본적으로 사용되지만 다양한 이유로 뒤로-앞으로 캐시를 사용할 수 없는 사이트도 있습니다. bfcache 사용을 방해하는 문제를 테스트하고 식별하여 이 기능을 최대한 활용하여 사이트의 전체 CLS 점수를 개선하는 방법을 자세히 알아보려면 bfcache 가이드를 참고하세요.
결론
이 가이드의 앞부분에서 설명한 대로 CLS를 식별하고 개선하는 방법에는 여러 가지가 있습니다. Core Web Vitals에는 허용치가 내장되어 있으므로 CLS를 완전히 없앨 수 없더라도 이러한 기법을 사용하면 영향을 줄일 수 있습니다. 이렇게 하면 한도 내에서 유지되어 웹사이트 사용자에게 더 나은 환경을 제공할 수 있습니다.