검색 최적화 SEO .CLS 레이아웃 변경 문제 분석 및 해결 방법

검색 최적화 CLS 문제 분석

검색 최적화와 관련된 레이아웃 변경 (CLS)이 며칠 전부터 이상합니다. 최근에 몇 가지 CSS 작업을 진행했고 아마 이 부분에서 문제가 발생한거 같습니다. CLS에 대한 내용을 더 자세히 다루어야 한다는 생각이 있었지만, 많이 다뤄진 주제라 미루고 있었습니다. 마침 제 블로그의 CLS 문제를 해결하며 관련 글을 작성해 보겠습니다.

최근 며칠 간 CLS 값이 변경되고 이전에는 움직임이 없던 레이아웃이 0.006만큼 변동된 것을 확인했습니다. 이를 해결하기 위해 수정 작업을 진행합니다.

CLS 문제 분석

CLS 문제 확인

검색 최적화에서 CLS (Cumulative Layout Shift) 문제는 비교적 쉽게 파악할 수 있습니다.

검색 최적화 CLS 수치 변동

CLS 문제 요소 파악

현재 문제가 되는 부분( CLS)을 클릭하게 되면 문제가 발생된 요소를 확인할 수 있습니다.

CLS의 문제가 발생하는 부분은 상단메뉴 아래 이미지 부분에서 발생하고 있습니다.

검색 최적화 CLS 문제 요소 파악

 CLS 문제 요소 수정

레이아웃이 변경된 이유를 파악해야 합니다. 제일 먼저 의심해야 할 0순위는 움직인 요소입니다. 그리고 상단에 배치는 요소들을 점검합니다. 0부터 6번까지의 요소를 하나씩 점검해서 문제가 되는 부분을 수정합니다.

✔ 문제 파악방법

코드를 확인해서 각 요소들의 영역이 확보되어 있는지 확인합니다. 

✔ 팁

문제가 되는 요소를 쉽게 찾는 방법은 변경 수치입니다. 저의 경우 0.006의 작은 움직임이고 CLS 통과 점수인 0.1 안에 들어오는 수치이므로 수정할 필요는 없습니다. 즉 이렇게 작은 움직임은 문제가 발생한 요소가 아닌 다른 문제로 발생할 가능성이 높습니다. 반면, 높은 수치는 문제의 요소일 가능성이 높습니다.

그리고 실제 0.1을 조금 초과 해도 문제가 되지는 않습니다. 이유는 느린 4G 통신 상태에서 테스트한 값이라 실제 측정치는 0.1에 들어오기 때문입니다.

제 블로그는 몇칠전에 로그 아래 작성한 문구가 문제입니다. 3번이 문제를 발생했기 때문에 수정했습니다.삭제하거나 글자 영역을 확보해 주면 됩니다.

검색 최적화 CLS 문제 발생요소 점검

---

CLS 문제 동적광고

광고를 노출하지 않은 원래 블로그의 CLS 수치는 0에서 0.001 정도입니다. 대부분의 CLS 문제는 동적으로 형성되는 광고 때문에 발생합니다.

의도 하지 않은 광고가 CLS에 부정적으로 작용한다

동적 광고의 영향

동적 광고는 웹 페이지에 접속할 때 전체 레이아웃이 형성된 후, 광고가 무작위로 추가되면서 레이아웃(CLS값)이 변경될 수 있습니다.

✔ 예시

글 페이지의 위치가 광고가 들어오면서 광고의 크기만큼 아래로 이동합니다.

검색 최적화 CLS 광고로 인한 변경

✔ 광고를 자동으로 노출시킬 경우의 CLS 수치 예시입니다.

그러나 이러한 수치가 나와도 코어 웹 비탈 메트릭스(Core Web Vitals)를 통과할 수 있습니다.

CLS 최적화를 진행하지 않아도 코어 웹 테스트를 통과하는 이유는 자동 광고가 상단과 하단을 병행하여 노출되기 때문에, CLS 부정적인 수치가 줄어들기 때문입니다. 10번 테스트를 해서 7번만 통과하면 됩니다.

즉,
상단에 계속 노출시키는 경우 CLS 수치에 문제가 발생할 가능성을 줄이기 위해 자동화 광고도 상하로 랜덤 노출되게 합니다.

검색 최적화 CLS 측정값(자동화 광고시)

CLS 최적화 문제 해결 방법

광고 위치와 영역을 설정 해주면 됩니다.

광고가 노출될 위치를 미리 선정하고 광고의 영역을 확보해주면 간단하게 광고로 발생하는 CLS문제는 해결할수 있습니다.

CLS 최적화 작업을 하게되면
광고를 아무리 많이 노출시켜도 전혀 문제가 되지 않게 됩니다.

검색 최적화 CLS 광고의 문제 해결방법

여기까지 글을 읽으셨다면 뭔가 이상한데?  그렇게 생각이 들어야 정상입니다.

질문?

자동화 시키지 않고 수동으로 한다고 해도  광고가 자기 멋데로 상단에 노출되는데?....

맞습니다. 

운영자의 광고는  코드를 작성하거나 자동화를 조절할수 있지만 통제 불가능한  광고도 존재합니다.

가장 중요하고 핵심은 이 질문이고 이질문의 답은 첫화면의 노출영역입니다.

즉 로딩으로 노출되는 첫화면의 영역까지 통제를 해주면 됩니다.