누적 레이아웃 변화(CLS)는 로딩 중에 페이지 콘텐츠가 예상치 못하게 얼마나 많이 이동하는지 측정합니다. 이로 인해 사용자가 좌절하고 실수로 클릭하게 될 수 있습니다. 이 점수표 규칙은 사용자 경험과 작업 완료에 부정적인 영향을 미치는 시각적 안정성 문제를 식별하고 해결하는 데 도움이 됩니다.
이 점수카드 규칙에 관하여
이 누적 레이아웃 전환 규칙은 디지털 경험 성숙도 모델 의 레벨 2(사전 예방)의 일부입니다. 로딩하는 동안 페이지가 시각적 안정성을 유지하는지, 콘텐츠가 튀어나와 사용자 전략을 방해하지 않는지 평가합니다.
이 점이 중요한 이유: 레이아웃이 바뀌면 사용자가 실수로 잘못된 요소를 클릭하거나, 읽는 동안 읽던 곳을 잃어버리거나, 좌절해서 작업을 포기하는 경우가 발생합니다. 좋은 CLS 점수는 페이지가 예측 가능하게 로드되어 사용자가 예상치 못한 콘텐츠 이동 없이 자신 있게 상호 작용할 수 있음을 나타냅니다.
이 규칙의 작동 방식
이 규칙은 페이지의 누적 레이아웃 이동(CLS) 점수의 75번째 백분위수가 Google의 시각적 안정성 한계인 0.1을 초과하는지 평가합니다. CLS는 페이지의 전체 수명 주기 동안 발생한 모든 예상치 못한 레이아웃 변화 점수의 합계를 측정합니다.
중요 참고 사항: CLS는 초 단위가 아닌 단위 없는 점수로 측정됩니다. 점수는 레이아웃 변경의 영향과 거리를 모두 합친 것을 나타냅니다.
점수 이해하기
- 합격(녹색): 75회 백분위수 CLS 점수가 0.1 이하(좋음)
- 실패(빨간색): 75번째 백분위수 CLS 점수가 0.1을 초과함(개선 필요 또는 불량)
- 개구리, 목표: 최적의 사용자 환경을 위해 0.1 미만의 CLS 점수를 달성하세요.
Google의 CLS 청년값, 이에 대한 값:
- 좋음: 0.1 이하
- 개선 필요: 0.1～0.25
- 나쁨: 0.25보다 큼
레이아웃 전환이란: 레이아웃 전환은 표시되는 요소가 렌더링된 프레임 간에 위치가 변경될 때 발생합니다. CLS는 페이지의 전체 수명 주기 동안 가장 큰 레이아웃 변화 점수를 측정하며, 이는 시각적 안정성과 사용자 경험에 영향을 미칩니다.
CLS 점수를 개선하는 방법
점수가 시각적 안정성이 좋지 않은 경우 레이아웃 변화를 줄이려면 다음 단계를 따르세요.
1. 문제가 있는 페이지와 요소 식별
- 뉴렐릭 브라우저에서 CLS 데이터 검토: CLS 점수가 가장 높은 페이지 식별
- 사용자 영향 평가: 얼마나 많은 사용자가 레이아웃 변경 문제를 경험하는지 확인
- 변화 패턴 분석: 페이지 로드 중 변화가 가장 자주 발생하는 시기를 파악합니다.
- 비즈니스 영향에 따라 우선순위 지정: 전환 및 사용자 작업에 중요한 페이지에 집중
2. 레이아웃 변경의 일반적인 원인 수정
이미지를 위한 공간을 예약하세요:
- 이미지에 대한 너비 및 높이 속성을 항상 지정하세요.
- 반응형 이미지에 CSS 종횡비 속성을 사용하세요
- 적절한 이미지 로딩 전략 구현
동적 콘텐츠를 올바르게 처리하세요.
- 광고, 위젯 및 동적 콘텐츠에 대한 최소 공간을 예약하세요
- 기존 콘텐츠 위에 콘텐츠를 삽입하지 마세요
- 콘텐츠가 로드되는 동안 플레이스홀더를 사용하세요
글꼴 로딩 최적화:
- 텍스트 레이아웃 변화를 줄이기 위해 중요한 글꼴을 미리 로드합니다.
- 더 나은 로딩 성능을 위해 font-display:swap을 사용하세요
- 사용자 정의 글꼴과 유사한 웹 안전 대체 글꼴을 선택하세요
타사 콘텐츠 관리:
- 내장된 콘텐츠에 대해 일관된 차원 설정
- 소셜 미디어 위젯과 광고를 비동기적으로 로드합니다.
- 레이아웃 영향에 대한 타사 스크립트 테스트
3. 개발 모범 사례 구현
안정성을 위한 디자인:
- 더 예측 가능한 레이아웃을 위해 CSS Grid와 Flexbox를 사용하세요.
- 콘텐츠가 로드되는 동안 스켈레톤 화면을 구현합니다.
- 다양한 콘텐츠 길이와 유형에 걸쳐 레이아웃 테스트
모니터링 및 검증:
- CLS 테스트를 위해 Chrome DevTools와 Lighthouse를 사용하세요
- 뉴렐릭 브라우저로 실 사용자 모니터링 구현
- CLS 점수가 주니어 값을 초과할 경우 알림 설정
- 다양한 기기 및 네트워크 조건에서 테스트
개선 측정
CLS 최적화 노력을 확인하려면 다음 지표를 추적하세요.
- CLS 점수 감소: 75번째 백분위수 CLS 값을 0.1 이하로 감소
- 사용자 환경 지표: 이탈률 감소, 작업 완료 개선
- 전환 영향: 시각적 안정성이 더 좋은 페이지에서 전환율이 더 높아집니다.
- 사용자 피드백: "불안정하거나" 불안정한 페이지 경험에 대한 불만이 감소했습니다.
일반적인 시나리오 및 솔루션
전자상거래 상품 페이지:
- 제품 이미지와 고객 리뷰를 위한 정확한 공간을 예약하세요
- 제품 정보 및 가격에 일관된 레이아웃을 사용하세요
콘텐츠 웹사이트:
- 콘텐츠 이동을 방지하기 위해 광고 공간을 예약하세요
- 텍스트 리플로우를 줄이기 위해 글꼴 로딩을 최적화합니다.
랜딩 페이지:
- 오류 메시지에 고정 간격을 둔 디자인 양식
- CTA 버튼이 안정적인 위치에 유지되도록 하세요.
중요한 고려 사항
- 기능성을 고려한 균형 최적화: 사용자 경험을 위해 일부 레이아웃 변경이 필요할 수 있습니다.
- 실제 조건에서 테스트: 다양한 장치와 네트워크 속도에서 최적화가 작동하는지 확인
- 사용자 영향에 집중: 중요한 사용자 여정과 전환에 영향을 미치는 변화를 우선시합니다.
- 지속적으로 모니터링: CLS는 콘텐츠 업데이트, 새로운 기능 및 타사 수정 사항에 따라 변경될 수 있습니다.
다음 단계
- 즉각적인 조치: CLS 점수가 가장 높은 페이지를 식별하고 이미지 및 동적 콘텐츠에 대한 빠른 수정을 구현합니다.
- 기술적 최적화: 글꼴 로딩, 타사 스크립트 및 레이아웃 아키텍처 해결
- 프로세스 통합 : 개발활동 흐름 및 성능예산에 CLS 감시 추가
- 최적화 지속: LCP 및 INP와 같은 다른 Core Web Vitals로 진행
CLS 최적화에 대한 자세한 지침은 Core Web Vitals 문서 와 성능 모니터링 모범 사례를 참조하세요.