핵심 Web Vitals: 누적 레이아웃 변경 – 정의 및 SEO를 위해 개선하는 방법

이제 Google의 페이지 경험 업데이트가 출시되면서 미세 조정된 웹사이트에 새로운 순위 기회가 생겼습니다.

특히, 웹사이트는 Google이 "핵심 웹 바이탈"이라고 부르는 몇 가지 새로운 성능 지표를 기반으로 순위를 높일 수 있습니다.

핵심 웹 바이탈은 사용자 경험에 영향을 미치는 핵심 웹 페이지 기능 세트입니다. 이제 그들은 전략적 SEO에서 역할을 하며 웹사이트가 Google에서 순위를 매기는 방식에 영향을 줄 수 있습니다.

Google은 세 가지 핵심 Web Vital을 정의했습니다.

• 최대 함량 페인트(LCP)
• 첫 번째 입력 지연(FID)
• 누적 레이아웃 시프트(CLS)

이 기사는 Google의 페이지 환경 업데이트에 대한 시리즈의 일부이며 Google의 최신 변경 사항을 반영하도록 업데이트하고 있습니다. 여기에서는 누적 레이아웃 이동 또는 CLS에 대해 설명합니다.

• CLS 란 무엇입니까?
• CLS를 어떻게 측정합니까?
• CLS는 SEO에 어떤 영향을 미칩니까?
• CLS 점수를 향상시키려면 어떻게 해야 합니까?

CLS(누적 레이아웃 시프트)란 무엇입니까?

CLS는 일반적으로 이미 표시된 것 위에 콘텐츠를 동적으로 삽입하여 브라우저에서 초기 렌더링 후 웹 페이지의 형식 변경을 측정합니다.

일반적으로 링크를 클릭하고 해당 링크를 "이동"하여 예기치 않은 위치로 클릭하게 되는 것은 성가신 일입니다. 웹 페이지에서 이러한 종류의 불안정한 콘텐츠는 나쁜 사용자 경험을 만듭니다.

Google은 여기에서 CLS에 대해 설명합니다.

CLS(누적 레이아웃 이동)는 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수량화하는 데 도움이 되기 때문에 시각적 안정성을 측정하기 위한 중요한 사용자 중심 메트릭입니다. 낮은 CLS는 페이지가 만족스러운지 확인하는 데 도움이 됩니다.

예상치 못한 페이지 레이아웃 이동은 사용자 경험을 손상시킵니다. 한 가지 예는 웹 페이지에서 버튼이나 링크가 이동하여 사용자가 다른 것을 클릭하도록 하는 경우입니다. Google의 이 데모에서 볼 수 있듯이 실수로 구매했다는 의미인 경우 이는 정말 나쁠 수 있습니다.

중요하게도 Google은 모든 레이아웃 변경이 나쁜 것으로 간주되는 것은 아님을 분명히 합니다.

레이아웃 전환은 사용자가 예상하지 않은 경우에만 나쁩니다. 반면에 사용자 상호 작용(링크 클릭, 버튼 누르기, 검색 상자 입력 등)에 대한 응답으로 발생하는 레이아웃 이동은 관계가 있는 상호 작용에 충분히 가깝게 이동이 발생하는 한 일반적으로 괜찮습니다. 사용자에게 명확합니다.

사용자 입력의 500밀리초 이내에 발생하는 레이아웃 이동에는 hadRecentInput 플래그가 설정되어 계산에서 제외될 수 있습니다.

CLS(누적 레이아웃 시프트)는 어떻게 측정됩니까?

CLS는 페이지뷰의 최악의 "세션 창" 동안 발생하는 모든 예상치 못한 레이아웃 전환에 대한 모든 개별 레이아웃 전환 점수의 합계로 측정됩니다.

세션 창은 사용자가 페이지를 방문하는 동안 발생하는 5초 범위의 이동입니다. Google은 가장 많은 시프트 페널티가 있는 5초 간격을 찾고 이것이 해당 페이지뷰에 대한 점수입니다.

레이아웃 이동 점수를 계산하기 위해 Google은 충격 비율 과 거리 비율 을 곱합니다. 이것들을 분해하겠습니다.

Impact fraction은 불안정한 요소가 두 프레임 사이에서 차지하는 뷰포트 영역의 양입니다.

아래 예에서 요소가 원래 뷰포트의 50%를 차지한 다음 25%만큼 아래로 이동한 것을 볼 수 있습니다. 두 프레임 사이에서 요소는 뷰포트의 50%에 25%를 더하여 차지하므로 충격 비율이 75%가 됩니다.

두 프레임 간의 레이아웃 이동 예, Google Developers

거리 분수 는 불안정한 요소가 이동한 거리입니다. 아래 예는 요소가 뷰포트 높이의 25%를 이동했음을 보여줍니다.

뷰포트에서 거리 이동의 예, Google Developers

요약하자면 CLS는 다음과 같이 계산되는 레이아웃 전환 점수로 측정됩니다.

영향 비율 * 거리 비율 = 레이아웃 이동 점수

위의 예를 사용하면 0.75 * 0.25 = 0.1875와 같이 계산됩니다. Google은 웹페이지가 사이트의 모든 페이지 또는 페이지 보기에서 0.1 미만의 CLS를 유지해야 한다고 말합니다. 이 예는 그 목표를 넘어서므로 점수가 낮을 것입니다.

CLS 점수가 어떻게 매겨지는지 더 명확하게 보여주는 한 가지 예시: 단일 프레임에서 뷰포트 내부의 모든 것이 뷰포트 밖으로 이동한 경우 레이아웃 점수는 1.0이 됩니다. (GitHub의 다른 예를 참조하십시오.)

페이지에 표시 영역에서 이동하는 요소가 많을수록 점수가 더 나빠질 수 있습니다.

Google의 CLS 점수 목표

여기에서 레이아웃 전환 점수에 대해 자세히 알아보고 여기에서 Google이 임계값을 정의하는 방법을 읽을 수 있습니다.

CLS(누적 레이아웃 이동)는 SEO에 어떤 영향을 미칩니까?

다른 핵심 웹 바이탈과 마찬가지로 CLS는 방문자가 모바일과 데스크톱 모두에서 원활한 페이지 경험을 할 수 있도록 도와줍니다.

좋은 레이아웃 전환 점수는 사용자가 웹페이지에 불만을 품지 않고, 실수로 클릭하여 다른 페이지로 이동하지 않으며, 실수로 구매하지 않도록 하는 데 도움이 됩니다. 우수한 사용자 경험은 순위, 트래픽, 전환 및 수익과 같은 SEO에서 원하는 모든 결과를 달성하는 데 도움이 됩니다.

Screaming Frog 연구에 따르면 검색 결과의 1번 위치에 있는 URL은 9번 위치에 있는 URL보다 핵심 웹 핵심 평가를 통과할 가능성이 10% 더 높습니다. 물론 이 데이터는 기존 페이지를 반영했습니다. 이러한 요소가 순위 알고리즘에 적용되기 전에 핵심 웹 바이탈을 아직 준수해야 합니다.

CLS를 살펴보면 모바일 URL의 절반 미만(46%)과 데스크톱 URL의 절반 미만(47%)이 "좋은" CLS 점수를 받았습니다. 평균 CLS 점수는 모바일에서 0.29, 데스크톱에서 0.25였습니다. 즉, 대부분의 사이트에서 CLS 개선의 여지가 있습니다 .

Screaming Frog는 위치별로 통과율을 분류했으며 검색 결과 페이지에서 위치를 아래로 이동할 때 "좋은" URL의 비율이 감소하는 것을 발견했습니다. 다음 예는 모바일 결과이지만 데스크톱용 데이터도 그래프로 표시했습니다.

"얼마나 많은 사이트가 핵심 Web Vitals 평가를 통과합니까?", Screamingfrog.co.uk

CLS(누적 레이아웃 변경) 점수를 개선하려면 어떻게 합니까?

Google은 CLS 점수를 측정하고 최적화하는 데 도움이 되는 실험실 도구와 현장 도구를 제공합니다. CLS의 경우 랩 도구는 웹 페이지에 대해 야생에서 캡처한 실제 데이터만큼 유용하지 않을 수 있습니다.

제공되는 도구는 다음과 같습니다.

• Chrome 사용자 경험 보고서(필드)
• PageSpeed ​​Insights(실험실 및 현장)
• Search Console(핵심 Web Vitals 보고서)(필드)
• Chrome DevTools(실험실)
• 등대(실험실)
• WebPageTest(실험실)
• WaterFaller.dev(실험실)

CLS를 측정하는 또 다른 방법은 web-vitals JavaScript 라이브러리를 사용하는 것입니다. 여기에서 자세히 알아볼 수 있습니다.

레이아웃 변경의 일반적인 원인은 다음과 같습니다.

• 치수가 없는 이미지
• 광고, 동영상 및 기타 포함된 개체 또는 치수가 없는 iframe
• 동적으로 주입된 콘텐츠
• 다른 항목이 로드된 후 스타일이 적용되는 늦은 로드 CSS
• 보이지 않거나 스타일이 지정되지 않은 텍스트를 깜박이는 웹 글꼴
• 다른 항목이 표시되기 전에 네트워크를 통해 로드될 때까지 기다리는 페이지의 요소
• CSS의 "transform: scale()" 대신 "높이"와 "너비"로 요소에 애니메이션 적용
• CSS의 "transform: translate()" 대신 "top", "right", "bottom" 또는 "left"로 요소 애니메이션

CLS를 개선할 기본 원칙은 다음과 같습니다.

1. 이미지, 비디오 및 기타 포함된 항목 또는 iframe에 대해 항상 크기 속성을 사용하십시오. 요소가 동적으로 로드되는 경우 콘텐츠가 로드되기 전에 CSS를 사용하여 모든 컨테이너 요소를 동일한 크기 또는 종횡비로 스타일 지정합니다. 그런 다음 콘텐츠가 해당 컨테이너 요소에 로드될 때 페이지가 이동하지 않습니다.
2. 기존 콘텐츠 위에 콘텐츠를 동적으로 삽입하지 마십시오.
3. CSS를 사용하여 요소에 애니메이션을 적용하는 경우 "변환" 애니메이션을 선호합니다.

YouTube에서 Google Chrome 개발자가 제공하는 CLS에 대한 동영상을 확인하세요.

더 자세한 정보를 원하십니까? 주문형 웹 세미나 마지막에 확장된 Q&A를 포함하여 핵심 Web Vitals를 개선하기 위한 3가지 전문가 팁을 시청하십시오.

이 순위 업데이트에 대한 자세한 내용은 전체 페이지 경험 시리즈를 읽어보세요.

1. 페이지 경험 업데이트란 무엇입니까?
2. 모바일 친화적인 사이트를 만드는 방법
3. 방해가 되는 전면 광고 및 SEO에 나쁜 이유
4. 사용자 및 순위를 위한 HTTPS
5. 핵심 Web Vitals 개요
6. 핵심 Web Vitals: LCP(가장 큰 콘텐츠가 포함된 페인트)
7. 핵심 Web Vitals: FID(첫 입력 지연)
8. 핵심 Web Vitals: CLS(누적 레이아웃 이동)