몇번 포스트로 전해드린 것처럼, 구글은 2021년 6월 중순부터 LCP, FID, CLS로 대표되는 Core Web Vitals 값을 검색에 적용합니다. 저 또한 구글의 검색 로직 변경에 대응하여 블로그 속도를 지속적으로 개선시키고 있습니다.
참고: 2021년 6월부터 Google 검색에서 페이지 속도가 검색 순위에 반영될 예정
Google의 PageSpeed Insights로 계속 페이지 속도를 점검해 왔는데 CLS 값이 실험실 데이터와 필드 데이터가 크게 차이가 났었습니다. 모바일 기준, 실험실 데이터에선 CLS 값이 0으로 나온 반면, 필드 데이터에선 0.1을 초과하는 "개선이 필요함" 단계로 나왔었습니다. CLS 값이 높다는 것은, 페이지의 요소들이 여기저기 왔다갔다 하는 것을 의미합니다.
제 블로그에서 모바일 필드 데이터의 CLS가 높게 나온 원인은 애드센스의 앵커 광고였습니다. 구글 애드센스의 앵커 광고는 화면의 상단이나 하단에 고정되어 보이는 광고입니다. 앵커 광고가 화면 상단에 붙으면서, 스크롤을 위아래로 할 때 CLS 값이 높아지는 것을 확인했습니다. 하지만 각 블로그마다 사정은 다를 수 있습니다.
블로그마다 사정이 다르므로, 앵커 광고를 해제한다고 해서 문제가 해결되지 않을 수 있습니다. 보통 이미지 태그에 사이즈를 지정하지 않아서(구글 블로거 기준 "원본 크기" 사용) CLS가 늘어나는 경우가 많습니다. LCP/FID/CLS 값에 영향을 끼치는 원인을 알고 싶으시다면 아래 글을 확인해주세요.
참고: 페이지 속도를 나타내는 핵심 성능 보고서, LCP/FID/CLS 값 확인해보기
앵커 광고 여부에 따른 CLS값 점검
영어로 찾아보니 애드센스 자동 광고 중 앵커 광고가 CLS를 발생시킨다는 글이 많이 있었습니다. 앵커 광고는 상단에 고정되어 있는 만큼 요소가 움직이는 것이 아니지만 CLS 값이 높아지는데 영향을 준다고 합니다.
- Adsense “Auto Ads” force CLS Layout Shift
- Adsense Anchor Ads Causes CLS (구글 애드센스 포럼)
- Adsense Anchor Ads Causes CLS (Github의 lighthouse 페이지)
앵커 광고가 CLS 값을 높이는 것이 정말 맞는지 확인하기 위해 실험을 진행했습니다. 앵커 광고를 활성화/비활성화했을 때 핵심적인 웹 지표가 "좋음"으로 바뀌는지 확인했습니다.
- 4월 29일: 앵커 광고 해제
- 5월 12일: CLS가 0.1 초과하는 문제 해결됨 / 핵심적인 웹 지표 "좋음"
- 5월 14일: 앵커 광고 재활성화
- 5월 17일: 다시 CLS가 0.1 초과 / "개선이 필요함" 상태로 전환
- 5월 20일: 앵커 광고 다시 해제
- 5월 26일: CLS가 0.1 초과하는 문제 다시 해결됨
앵커 광고를 비활성화하고 기다리니 CLS 값이 떨어지고 "좋음"으로 상태가 바뀌었습니다. 앵커 광고를 활성화하고 기다리니 CLS 값이 올라가서 "개선이 필요함" 상태로 되돌아갔습니다. 적어도 제 블로그에선 애드센스의 앵커 광고가 CLS 값을 높이고, 핵심 성능 보고서를 통과하지 못했던 원인이었던 것 같습니다.
원인을 찾기 위해 1월달부터 이것저것 알아봤는데, 앵커 광고가 원인일줄은 상상도 못 했네요. 지금은 모바일 기준 CLS 0.04, FID는 18밀리초, LCP는 1.7초입니다. 구글이 정해 놓은 기준을 여유 있게 통과합니다. 빠른 페이지 100%를 달성햇습니다. 구글이 정해 놓은 LCP/FID/CLS 기준은 코어 웹 바이탈 보고서 도움말을 참고해주세요.
Google 검색에 Core Web Vitals가 적용될 때까지 얼마 남지 않았습니다. 블로그의 속도를 점검해서 구글 검색 랭킹에 불이익이 없도록 점검해 보시기 바랍니다.
(6/12 추가) CrUX 대시보드에서 CLS 값을 확인해 보았습니다.
페이지 속도를 나타내는 핵심 성능 보고서, LCP/FID/CLS 값 확인해보기 포스트에서 CrUX 대시보드에서 LCP/FID/CLS 값 확인하는 방법을 공유한 적이 있습니다.
댓글 0
댓글 쓰기
취소댓글 작성이 안 되실 경우 아래 링크를 이용해 주십시오.
댓글 달기