누적 레이아웃 시프트(CLS)

누적 레이아웃 시프트(CLS)란 무엇인가요?

CLS(누적 레이아웃 이동)는 웹페이지의 시각적 안정성을 측정하기 위해 Google에서 개발한 핵심 웹 바이탈 측정지표입니다. 페이지의 전체 수명 기간 동안 발생하는 모든 예기치 않은 레이아웃 이동의 총합을 정량화합니다. 레이아웃 이동은 보이는 요소가 렌더링된 프레임에서 다음 프레임으로 위치가 변경될 때 발생합니다.

CLS 측정 방법

CLS 점수는 이동이 없음을 나타내는 0부터 다양한 정도의 불안정성을 나타내는 0 이상의 값까지 다양합니다. 이 공식은 각 시프트의 충격 분율과 거리 분율을 고려하여 요소가 얼마나 움직이는지, 요소가 뷰포트의 얼마나 많은 부분을 차지하는지 계산합니다.

CLS 점수 해석

• 양호: 0 - 0.1
• 개선 필요: 0.1 - 0.25
• 불량: 0.25 이상

CLS가 중요한 이유는 무엇인가요?

예기치 않은 레이아웃 변화는 사용자 불만을 초래할 수 있으므로 CLS는 사용자 경험에 매우 중요합니다. 예를 들어 사용자가 버튼을 클릭하려다가 레이아웃이 바뀌어 의도치 않게 다른 버튼을 클릭하게 되면 사용자 경험이 저하되고 잠재적인 전환 손실이 발생할 수 있습니다.

CLS 불량의 일반적인 원인

1. 치수가 없는 이미지:

   • 너비와 높이를 지정하지 않고 HTML에 이미지를 포함하면 브라우저에서 처음에 할당할 공간을 알 수 없기 때문에 레이아웃이 바뀔 수 있습니다.

2. 크기가 없는 광고, 임베드 및 아이프레임:

   • 이러한 요소는 미리 치수를 지정하지 않으면 동적으로 로드되어 레이아웃이 변경될 수 있습니다.

3. 동적으로 삽입된 콘텐츠:

   • DOM의 기존 콘텐츠 위에 콘텐츠를 추가하면 요소가 아래로 밀려 이동이 발생할 수 있습니다.

4. FOIT/FOUT을 유발하는 웹 글꼴:

   • 보이지 않는 텍스트의 플래시(FOIT) 및 스타일이 지정되지 않은 텍스트의 플래시(FOUT)는 브라우저가 웹 글꼴을 로드할 때 레이아웃이 변경될 수 있습니다.

CLS를 최소화하는 모범 사례

1. 이미지 및 동영상에 크기 속성 포함:

   • 이미지와 동영상이 로드되기 전에 항상 HTML에서 이미지와 동영상의 너비와 높이를 정의하여 레이아웃의 공간을 확보하세요.

2. 광고 및 퍼가기를 위한 공간 예약:

   • CSS를 사용하여 광고 슬롯, 아이프레임 및 임베드의 크기를 설정하면 광고가 로드될 때 레이아웃이 바뀌는 것을 방지할 수 있습니다.

3. 기존 콘텐츠 위에 동적으로 콘텐츠를 삽입하지 마세요:

   • 접힌 부분 아래 또는 이미 예약된 공간이 있는 컨테이너 내에 새 콘텐츠를 추가합니다.

4. 글꼴 로딩 전략을 사용합니다:

   • 글꼴 표시 CSS 속성을 활용하여 웹 글꼴이 표시되는 방식을 제어하고 FOIT/FOUT으로 인한 변화를 최소화하세요.

5. 애니메이션에 CSS 트랜스폼을 사용합니다:

   • 위, 아래, 왼쪽, 오른쪽 대신 변형 속성을 사용하여 레이아웃 이동 없이 요소에 애니메이션을 적용합니다.

결론

누적 레이아웃 이동(CLS)은 안정적이고 시각적으로 매력적인 사용자 경험을 보장하는 데 중요한 지표입니다. 레이아웃 이동에 영향을 미치는 요인을 파악하고 이를 최소화하는 모범 사례를 구현하면 웹페이지의 CLS 점수를 개선하고 전반적인 사용자 만족도를 높일 수 있습니다.

CLS 및 기타 핵심 웹 바이탈 개선에 대한 자세한 내용은 Google의 웹 바이탈 문서를 참조하세요.