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

CLS 레이아웃 변경 분석

최근 며칠 전 제 블로그에서 발생한 [ CLS 레이아웃 변경 ] CLS(Cumulative Layout Shift) 수치의 변화가 감지되었습니다. 이전에는 움직임이 없던 페이지 레이아웃이 0.006만큼 CLS 레이아웃 변경 현상이 발생했습니다.이를 통해 검색 엔진 최적화(SEO)와 관련된 중요한 요소인 CLS에 대한 글을 정리해야 하겠다는 생각이 들었습니다.

이번 기회에 제 블로그의 CLS 문제를 해결하면서 관련 내용을 깊이 있게 다뤄보겠습니다.

CLS 레이아웃 분석

CLS는 사용자가 웹 페이지를 탐색하는 동안 발생하는 예기치 않은레이아웃 변경을 의미합니다. 이는 페이지가 처음 로드될 때 콘텐츠가 이동하는 현상입니다. CLS 값이 높을수록 사용자 경험에 부정적인 영향을 미치고, 검색 엔진 최적화에서도 중요한 요소로 다뤄집니다.

CLS점수가 허용치 이상으로 벗어나게 되면검색상위 노출은 포기해야 할 정도로 중요한 문제입니다.

CLS 레이아웃 문제발생

CLS 레이아웃 변경 요소 파악

제 블로그에서 발생한 CLS 문제를 분석한 결과, 상단 메뉴 바로 아래에 위치한 이미지에서 문제가 발생하고 있음을 확인했습니다. 해당 이미지는 페이지가 로드된 후 위치가 약간 이동하면서 레이아웃에 영향을 주었고, 이로 인해 CLS 수치가 증가했습니다.

이를 해결하기 위해, 이미지를 포함한 상단 요소들을 하나씩 점검해 수정 작업을 진행했습니다.

CLS 레이아웃 문제발생 요소 파악

작은 CLS 변동이 미치는 영향

제 블로그의 경우, CLS 값이 0.006으로 상대적으로 작은 움직임을 보였습니다. 이 값은 CLS 통과 기준인 0.1보다 훨씬 낮은 수치로, 사용자 경험에 큰 문제를 일으키지 않습니다. 하지만 이러한 작은 변동이라도 SEO 성능에 미세한 영향을 줄 수 있어 사전에 문제를 파악하고 해결하는 것이 중요합니다.

CLS 문제 요소 수정

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

CLS 문제 요소 수정

동적 광고의 영향

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

✔예시

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

동적 광고의 영향

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

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

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

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

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

CLS 최적화 문제 해결 방법

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

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

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

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

검색 최적화에서 CLS문제는 간단하면서도 복잡할수 있는 문제 입니다. 그러나 중요한것은 무시하면 절대 안되는 문제입니다.