언젠가부터 서치콘솔에서 모바일 페이지경험에 우수한 URL이 없다고 뜨기 시작했다. 코어웹바이탈을 체크해보면 CLS가 시간초과로 개선이 필요하다고 나온다. 애드센스 상단 광고 때문에 생기는 이 문제를 해결하는 방법 알아본다.
코어웹바이탈 CLS 시간초과 생기는 원인
어떤 상황이었냐면, 티스토리 블로그의 본문 상단에 티스워드로 생성한 숏코드 형식의 광고를 수동으로 삽입하고 있다. 첫 문단 텍스트 아래에 디스플레이 광고 하나가 나오도록 글 쓸때마다 에디터에서 넣어주는 것이다.
문제는 페이지가 로딩되면서 첫번째 문단 텍스트와 두번째 문단 텍스트가 잠시 보였다가, 애드센스 광고 뜰 자리가 빈 공간으로 생겨나면서 두번째 문단의 텍스트가 아래로 밀린다. 그 과정이 깜박임처럼 눈에 보이게 되고 이것이 구글 SEO에서 중시하는 속도 점수의 저하를 가져온다.
적용중인 스킨은 구글 SEO 최적화 컨셉인 라꼬인데 애드센스 배치 때문에 점수를 떨어뜨리면 너무 안타까운 일이다.
지난번 티스토리 대표 유료스킨 3가지의 속도 대결 실험을 해봤을 때 분명 CLS는 0.09로 양호했다. 그런데 최근 0.1초과로 개선이 필요하다고 뜨게 된 것이다.
어느날 부터인가 서치콘솔 모바일에서 페이지 경험이 우수한 URL이 제로가 되어버렸고, 코어웹바이탈에서도 전체 URL이 개선필요 노란색으로 표시되었다.
내용을 눌러보면 CLS 문제 : 0.1초과(모바일) 이라고 나온다.
CLS 의미와 시간초과 해결방법
CLS라는건 cumulative layout shift의 약자로, 페이지 로딩중에 화면 레이아웃에 변경을 가져오는 시간을 체크한다.
이게 수치가 작으면 그만큼 빠른 시간내에 나올거 나오고 움직일거 움직이고 다 끝낸 상태에서 방문자에게 고정된 화면을 보여준다는 의미이다.
수치가 크다는 것은 이미 방문자가 화면을 보고 있는데 뒤늦게 어디가 움직여서 레이아웃이 바뀌는 것을 뜻한다. 이럴경우 화면이 껌뻑이거나 시선이 분산되는 등 정신을 산만하게 할 수 있어서 사용자 경험이 안좋아진다.
페이지 로딩 첫화면을 기준으로 하기 때문에 티스토리 스킨에서 이게 문제가 있다면 십중팔구는 삽입한 애드센스 광고가 뜨면서 본문 레이아웃을 밀어버리는 경우다. 소스코드 수정을 통해서 문제를 해결했고 결과는 아래와 같다.
동일 페이지의 페이지스피드 측정 결과로 0.16이던 것이 0.016으로 대폭 단축되었다. 지난번 3대 유료스킨 속도대결 테스트 했을 때보다 오히려 더욱 빨라졌다. 아무리 빠르고 좋은 스킨이어도 쓰는 사람의 기본적인 지식도 필요하다는 것이다.
해결방법을 소개하자면, 애드센스 광고가 뜨는 부분의 영역을 미리 고정시켜 주었다. 화면 로딩된 후에 애드센스 나오면서 레이아웃이 밀리니까 아예 처음부터 자리를 만들어주고 광고야 나와라 하고 기다리는 식이다.
#dd11 {
width: 100%;
height: 0;
position: relative;
}
@media screen and (max-width: 600px) {
/* 모바일 환경 */
#dd11 {
padding-bottom: 100%; /* 모바일 환경에서의 비율 */
}
}
@media screen and (min-width: 601px) {
/* PC 환경 */
#dd11 {
padding-bottom: 290px; /* PC 환경에서의 비율 */
}
}나는 <div id=”dd11″> 형태로 광고를 삽입했기 때문에 css에서 dd11에 대한 정의를 위와같이 내려주었다. id는 class와 달리 문서 내에서 한번만 사용될 수 있는 고유한 식별자이다. 똑같은 코드를 여러번 반복하고 싶다면 id가 아니라 class로 지정하고 css에서는 .dd11 이런 식으로 해주면 된다.
(dd11은 그냥 아무렇게나 붙인 이름이다. 자기가 하고싶은대로 하면 된다.)
위처럼 height는 0을 해주고 padding-bottom을 이용해서 아래쪽 단락의 텍스트를 밀어내는 방식을 택했다. 이 때 모바일과 데스크톱에서 각각 광고가 나오는 사이즈가 달라지므로 가로폭에 따라 다르게 지정했다.
일정 폭 이상으로 PC 화면 상태에서는 세로 290픽셀로 광고 영역을 고정하고, 가로폭 600이하의 모바일 화면에서는 절대값이 아닌 비율로 100%를 주었다. 가로폭 대비 세로폭을 100%로 한다는 의미이다.
padding-bottom 비율 = (세로/가로)
이렇게 해주면 모바일에서도 가로폭이 얼마던지 정사각형 만큼 광고 영역을 만들고 아래 텍스트를 밀어내기 때문에 문제가 없다.
애드센스 광고 로딩시 본문 밀리면서 발생하는 CLS 점수하락 문제 해결 성공
