CLS 방법은 웹페이지 콘텐츠가 페이지 렌더링 주기 전체에 걸쳐 얼마나 변동하는지, 즉 웹사이트의 시각적 외관이 얼마나 안정적인지를 측정하는 데 사용됩니다.
살면서 메뉴를 클릭했는데 실수로 광고를 클릭하게 되어 제3자 웹사이트로 이동하는 경험, 또는 웹페이지 레이아웃이 갑자기 바뀌는 현상 등 짜증나는 상황을 여러 번 겪어보셨을 겁니다. 물론 레이아웃 변화는 사용자에게 불편함을 줄 뿐만 아니라, 웹사이트 운영자에게는 더 심각한 문제를 야기할 수 있습니다. 레이아웃 변화로 인한 의도치 않은 클릭은 이탈률을 높이고 광고 정책 위반으로 이어질 수 있기 때문입니다.
또한, 구글은 CLS를 세 가지 " 핵심 웹 바이탈 " 중 하나로 간주하기 때문에 CLS 점수가 낮으면 전체 핵심 웹 바이탈 점수에 부정적인 영향을 미쳐 사용자가 불합격 등급을 받을 수 있습니다. 최근 구글 검색 알고리즘 변경에 따라 핵심 웹 바이탈 평가에서 합격점을 받은 사이트는 검색 결과에서 더 높은 순위에 노출됩니다.
CLS 점수를 높이면 전반적인 사용자 경험이 향상되고, 잠재적으로 구글 검색 순위가 높아지며, 구글 검색 엔진 최적화(SEO) 트래픽이 증가할 수 있습니다.
누적 레이아웃 변동은 어떻게 측정되나요?
뷰포트에 보이는 요소의 시작 위치가 어떤 이유로든 변경되면 해당 변경 사항이 기록됩니다. 따라서 시작 위치가 변경되면 해당 요소는 불안정한 것으로 간주됩니다. 중요한 점은 보이는 요소가 페이지에서 발생하는 어떤 사건으로 인해 다른 위치로 이동할 때만 레이아웃 변경이 발생하며, 새 요소나 기존 요소의 크기가 커지거나 작아지는 경우에는 발생하지 않는다는 것입니다.
CLS 점수는 레이아웃 변화를 추적하기 위해 고안된 두 가지 특정 측정값, 즉 영향 비율과 거리 비율로 구성됩니다. 이 두 측정값을 사용하여 CLS 점수를 계산합니다. 영향 비율은 불안정한 요소가 두 프레임 사이의 뷰포트에 미치는 영향을 측정하는데, 이는 원래 요소와 이동된 요소를 합산하여 두 프레임 사이의 뷰포트 전체 가시 영역과 비교하는 비율로 나타냅니다. 수평 또는 수직으로 움직이는 불안정한 요소의 경우, 거리 비율은 해당 요소가 뷰포트 내에서 이동한 거리(수평 또는 수직)를 나타냅니다.
CLS 점수를 높이려면 어떻게 해야 할까요?
불안정한 요소/변동 동작을 줄이기 위한 몇 가지 권장 사항은 다음과 같습니다
- 사이트 구조에 따라 웹페이지별로 CLS 점수가 다를 수 있습니다. 예를 들어, 기사 페이지의 CLS 점수는 홈페이지보다 높을 수 있습니다. 따라서 첫 번째 단계는 사이트의 모든 주요 페이지 템플릿의 CLS 점수를 측정하는 것입니다.
- 이미지와 동영상에는 항상 너비와 높이 속성이 있어야 합니다. 종횡비가 정의된 반응형 이미지를 만드세요.
- 또는 CSS의 가로세로 비율 박스를 사용하여 요소에 필요한 공간을 확보할 수 있습니다. 이렇게 하면 로딩 과정에서 브라우저가 문서에 적절한 공간을 할당하게 됩니다.
- 광고 게재 위치가 적절하게 최적화되지 않으면 레이아웃 변경에 상당한 영향을 미칠 수 있습니다.
- 이미 로드된 콘텐츠 위에 동적 콘텐츠를 삽입하지 마십시오. 단, 사용자 상호 작용에 따라 레이아웃이 변경되는 경우는 예외입니다.
사이트 최적화 서비스 로 워드프레스 성능을 향상시키세요 !
