[Blog value up] CLS 0.1 초과? 모바일 페이지 표시안됨? 반응형 페이지로 대응하자

Google Search Console로 페이지를 보다보면 다양한 상황과 마주하게 됩니다. 제 블로그에서는 코어 웹 바이탈 특성에서 CLS가 0.1을 초과된 사이트가 다수 보였습니다.  

 

 

Google Search Console에서 말하는 CLS는 무엇인가?

CLS는 누적 레이아웃 변경으로 표시 영역에서 표시되는 콘텐츠의 양과 영향을 받는 요소가 이동한 거리를 결합해서 콘텐츠의 불안정성을 측정한다고 정의하고 있습니다. CLS 점수는 콘텐츠 이동 양과 이동 정도를 계산한 단위가 없는 값이라고 합니다. 

구글에서는 아래와 같이 잘못된 CLS의 원인을 정의하고 있습니다. 

특히 크기가 지정이 안되어 있는 이미지나 iframe들이 문제가 됩니다. 

따라서 크기 문제를 해결하기 위해서 반응형 웹으로 수정이 필요합니다. 

 

우선 티스토리의 경우 블로그의 스킨 편집으로 들어가서 CSS로 이동하여 아래와 같이 반응형 페이지를 위한 코드를 추가해줍니다. 

/* img */
img {
	max-width: 100%;
	height: auto;
}

 

초기 웹에서는 width, Height를 고정해서 사용했지만 지금은 다양한 스크린 사이즈를 가진 단말들이 많기 때문에 화면에 맞는 이미지 사이즈를 반영하도록 지원해주기 위함입니다.