본문 바로가기
블로그, 소셜 미디어 관련

블로그 코어웹바이탈, CLS 개선/향상시키기! -페이지스피드인사이트 측정결과 개선!

by 와썸_ 2022. 6. 23.
반응형

조금 세부적인, 구글 페이지스피드인사이트/서치콘솔에서 코어웹바이탈과 CLS 수치를 향상시키는 법입니다!

- 이번에 구글 SEO 최적화를 하면서 겨우 알게 된 내용이라 포스팅합니다. 

아무리 찾아봐도 없어서 혼자 해결하고 뿌듯해 적는 포스팅. 

포스팅이 길어서, 결론부터 말하면

1. 갑자기 데스크탑 환경에서의 코어웹 바이탈 실패(fail)과 CLS 지연 현상이 심해졌다! (>0.2s)

2. 광고도 줄이고 별의별 방법을 쓰고 검색해봐도 안나왔는데, 여러가지 시도 끝에 반응형 광고가 원인인걸 찾았고 바로 해결되었다! 

포스팅, 시작합니다. 


최근 단기 목표 중 하나가, 구글 SEO 최적화였습니다. 

그래서 구글 서치콘솔과 페이지스피드마스터를 항상 체크하는데,

원래 모바일 환경은 점수가 항상 낮게 나왔지만, 데스크탑은 그나마 점수도 잘나오고, 모바일/데스크탑 환경 모두 코어웹바이탈은 통과했는데 어느날부터 데스크탑 환경 코어웹바이탈이 실패(fail)가 떴습니다.

확인해보니, Cumulative Layout Shift(CLS, 벤츠의 그것과는 다른.) 지연으로 인한 것이었습니다. 

잘 기억 안나지만, 원래 0.05초 내외였던거 같은데 갑자기 0.231초? 뭐지.... 

CSS 나 html은 잘 모르고 머리아프니 왠만하면 안건드리는데... 

페이지스피드인사이트 측정결과
허허... CLS 0.231 머선일이구...

그런데, 광고수를 줄이고 있으면 있었지, 

손도 안대고 있었는데 왜 이럴까 이래저래 찾아보고, CLS 개념도 찾아보고 개선방향도 찾아보는데 

검색해도 잘 안나옵니다. 

안돼.. .이러다 안그래도 구글 검색을 통한 유입이 정말 찔끔찔끔 늘어나는데 도루묵될라.

SEO 최적화 시도하는 마당에 코어웹바이탈 실패면 안되지. 

구글이 CLS에 관해 자세히 설명해주고, 대처방안도 말해주는데 제 능력선을 넘어가는 놈들입니다. 

아래는 구글 developer tool의 CLS 관련 설명 링크. 

 

Cumulative Layout Shift(누적 레이아웃 이동, CLS)

이 게시물에서는 누적 레이아웃 이동(CLS) 메트릭을 소개하고 이를 측정하는 방법을 설명합니다.

web.dev

구글 설명들 특징이, 자세히 잘 적어놨는데 읽고나서는 머리에 남는게 없고 따라하기 힘들더라구요. 

저같은 초심자를 위해서는 하나하나, 버튼위치부터 무엇을 눌러서 어떻게 수정하고 나중에 확인버튼도 잘 눌러줘야해요~ 해도 잘못 따라해서 html 다 깨지는 마당에. 


결국 찾은 결론은, 구글 애드센스 반응형 광고가 원인이었습니다. 

반응형

반응형 광고 특징이 해당 레이아웃에서, '알아서' 적당한 크기의 광고를 송출하는 것이다보니 

그만큼 블로그 전체 레이아웃이 짧은시간안에 슥삭 바뀌어버리는 거죠. 

(단지, 너무 짧은 시간에 바뀌어 인간이 모를 뿐.)

 

구글 애드센스 광고 유형 중 반응형 광고 몇개를 사이즈를 지정해주니, 코어웹 바이탈을 바로 통과합니다. 

블로그 개선후 코어웹바이탈 재측정 결과
오... 바로 CLS가 0.05로 양호해졌네요. 구글아 너희가 단 광고이면서 코어웹 바이탈 실패하게 하면...

거참. 이것저것 계속 찾아보고 여러가지 시도해봤는데 허망하네요. 

괜히 CSS랑 html 건드렸으면 블로그 디자인만 깨지고 코어웹바이탈 개선도 안되었을듯. 

물론, 애드센스 광고 반응형을 줄이면 또 광고 수입이 줄수도 있겠지만,

요런 작은 시도를 개인 기록용으로 포스팅 남겨둡니다. 

p.s. 엇 이거 반응형 광고 줄이니 거의 90점 가까이 페이지스피드인사이트에서 측정되는데... 

그만큼 광고수입 주는 건 아닌지. 며칠 봐야겠습니다. 

 

추가 후기.

광고수입/페이지뷰는 그대로지만 적어도 서치콘솔 측정치는 좋아졌네요. 

서치콘솔 페이지 측정 결과
갑자기 빠른 URL 비율이 급감하더니 다시 반등했습니다.
서치콘솔 코어웹 바이탈 2
휴 갑자기 개선이 필요하다더니 다행히 호전됨.

반응형