검색엔진 최적화에 간과하기 쉬운 CLS를 해결하는 2가지 방법

검색엔진 최적화는 내돈내산(SEM)이 아닌 내노력 내실력(SEO)으로 상위에 랭크되게 하는 기술인데요. 각 플랫폼 별로 다양한 낭설과 실제 이론들이 존재합니다.

 

대표적인 낭설로 alt를 이용한 꼼수, 이미지의 갯수에 따른 검색순위 조정등 여러 낭설이 있지만, 어떤 것은 맞고 어떤 것은 틀립니다.

 

오늘은 구글에서 검증되었으며, 공식적인 SEO 가이드에 있는 CLS에 대해서 말해보려고 합니다.

 

구글 서치 콘솔 확인

검색엔진 최적화를 연구해본 사람은 구글 서치 콘솔을 다 아실겁니다. 아직 모르신다면, 구글 서치 엔진에 들어가서 본인의 사이트를 등록하고 살펴보세요. (필수중에 필수 입니다)

 

좌측 메뉴에 보면, "코어 웹 바이탈"이라는 메뉴가 있습니다.

 

 

해당 스코어에 따라 검색엔진의 순위가 달라질 수 있습니다.

 

 

다행히, 저는 0개의 URL이네요. 문제 부분에 보시면, CLS 문제라는 말이 나옵니다.

 

그럼, CLS문제를 해결해서 검색엔진에서 순위를 높이는 것이 어떤 것인지 쉽게 설명해 보겠습니다.

 

CLS가 뭐지?

CLS는 Cumulative Layout Shift의 약어입니다. Cumulative는 누적된 것이라는 뜻이고, Layout Shift란, 웹 페이지에서 레이아웃이 밀리는 현상에 대한 것입니다. 즉, 누적된 화면 밀림에 대한 평가 값인데요.

예를 들면, 비어있는 공간에 갑자가 이미지가 나오면서 레이아웃일 밀린다던지, 없던 어떤 요소가 갑자가 나와서 전체적으로 레이아웃이 이동(밀림)되는 현상을 평가하겠다는 뜻입니다.

이게 누적되면, 사용자에게 안좋은 경험을 주기 때문에 검색엔진 순위를 낮추게 됩니다. 정말 특별한 컨텐츠가 아니라면, (사실 그런 컨텐츠는 거의 없지만) 경쟁 구도에 들어가게 되고, 구글은 사용자 경험이 좋은 쪽에 손을 들어주겠다는 뜻입니다.

 

낮은 CLS를 해결하는 방법

자 그럼 핵심적인 논의로 들어가 보겠습니다.

CLS가 발생하는 원인이 무엇인지 확인하고, 그 원인을 제거 하면 됩니다. (사실 모든 문제가 그렇죠, 원인 파악, 원인 개선)

 

오늘은 CLS의 주된 원인 2가지에 대해서 알아보겠습니다.

 

첫번째 원인

이미지 로딩 - 이미지는 기본적으로 텍스트보다 용량이 큽니다. 따라서, 네트웍으로 전송되는 웹이라는 특징으로 서버에 동시에 텍스트와 이미지를 요청한 경우, 텍스트가 먼저 오게됩니다. 여기서 텍스트는 본문의 내용뿐 아니라, 웹 페이지를 구성하는 html 뼈대를 말합니다.

 

이미지를 모두 받은 후에 웹 페이지를 표시한다면, 그것 또한 사용자에게 좋은 경험은 아닙니다.

그래서, 웹 브라우저는 먼저 받은 것을 특별한 조건이 없다면 먼저 표시합니다.

 

이때, 이미지의 화면에서의 차지하는 영역 표시가 적절하지 않다면, 그 공간은 비어 있는 공간 처럼 보입니다.

이후 이미지가 모두 로딩된 후에 그 공간이 넓어지면서 이미지가 들어오는 것이죠.

그럼 그때, LS(Layout Shift)가 발생합니다. - 이게 쌓이면 CLS 이슈가 되는 것입니다.

 

첫번째 원인에 대한 해결책

위에서 분석한 것과 같이 결국 해결책은 이미지 원본을 다운로드 받기전에 해당하는 이미지의 화면상 크기를 미리 지정하면 이 문제는 해결됩니다.

 

예를 들면 아래와 같습니다.

<img src="image.jpg" width="600" height="400" alt="seo example">

 

이미지 태그 사용시, width와 height를 미리 지정해 주는 것입니다. 이를 해결하는 다양한 라이브러리나 플랫폼들이 있지만 주제가 맞지 않아 스킵합니다. 참고로, 대부분의 워드프레스 테마는 이를 잘 대응해 주고, 티스토리는 스킨에 따라 다른 것 같습니다.

 

두번째 원인

웹폰트 - 웹 폰트는 브라우저가 실행중인 컴퓨터의 폰트를 사용하지 않고, 네트웍에서 폰트 파일을 내려받아서, 사용하는 구조입니다. 영어권은 그래도 괜찮은 편인데, 한글 폰트의 경우, 용량이 제법 큽니다.

 

구글에서 제공하는 Noto Sans 폰트를 예로 들면,

	글자 세트	TTF 폰트 파일 기준
Noto Sans(영어)	200~300자 라틴 알파벳 및 기호	약 400KB
Noto Sans KR (한글)	약 11,172자 완성형 한글	약 16MB (16*1024 KB)

 

위의 도표와 같이 용량에 있어서 40배 이상 차이가 납니다.

 

따라서, 적절한 방법을 사용하지 않으면, 웹 페이지에 접속하면, 처음에는 아무것도 안보이다가, 갑자가 글씨가 여기저기서 튀어나오면서 Layout Shift 현상이 발생할 수 있습니다.

 

두번째 원인에 대한 해결책

웹 폰트로딩 문제를 해결하기 위해서 우선적으로 데스크탑의 폰트를 사용하고, 폰트 다운로드가 다 끝나면 교체하는 방식을 사용하면, CL 현상을 줄여줄 수 있습니다.

 

코드는 아래와 같습니다.

 

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont.woff2') format('woff2');
  font-display: swap; /* 즉시 fallback 폰트를 렌더링하고 웹 폰트 로딩 후 교체 */
}

 

위와 같이 font-display: swap; 을 명시하면, 웹 폰트가 로딩될때까지 기본 폰트를 사용하고, 폰트 로딩이 끝나면, 웹 폰트로 변경이 됩니다. 폰트패밀리에 유사한 대체 폰트를 fallback으로 넣는 것도 괜찮습니다. 지금 아무 웹페이지나 들어가서 개발자도구를 통해 어떤 font-family 전략을 썼는지 확인해보세요.

 

결론

검색엔진 최적화에 키워드도 중요하고, 페이지 로딩 속도도 중요하지만, 오늘은 간과되는 CLS에 대해서 알아봤습니다.

2가지를 기억하면 됩니다. 이미지 공간은 미리 확보하자, 웹폰트 로딩될 동안 기본 폰트로 보여주자. 간단하죠!?

 

블로그에 처음 도전한다면, 아래글도 추천합니다.

 

수익형 블로그 쌩 기초 코스 : 기초가 튼튼해야 든든히 섭니다.