티스토리 CLS 구글 서치 콘솔 코어 웹 바이탈 CLS 수치 초과 해결하는 5가지 방법

구글 서치콘솔에는 소유 웹사이트의 성능을 총 6가지의 속성으로 체크해서 종합적으로 성능을 체크해서 관리자에게 제공하는 시스템이 존재합니다. 바로 코어 웹 바이탈인데, 오늘은 이 곳의 속성 중 레이아웃의 변동을 체크하는 CLS 수치가 0.1이 넘었다고 경고를 받았을 때 어떻게 해결해야 하는지를 다뤄보겠습니다.

구글 서치콘솔 코어 웹 바이탈 CLS 수치를 줄여보자

이번 글에서는 코딩없이 CLS 초과 문제를 해결하는 방법에 대해서 알아보겠습니다.

구글 CLS란?

CLS는 Cumulative Layout Shift(누적 레이아웃 이동)의 약자로 사용자가 페이지를 사용할 때 불필요한 레이아웃 이동이나, 사용자 경험에 영향을 주는 대규모 레이아웃 이동을 종합적으로 나타내는 수치입니다. 

CLS 수치는 0.1 이하면 양호, 0.1 이상이되면 개선을 필요로하고, 0.25 이상이 되면 매우 취약하다는 뜻입니다. CLS 수치가 0.1이 초과되면 아래와 같은 개선 권장 메시지가 구글 서치콘솔에 나타납니다. 이 경우 구글 검색 순위에 영향을 줄 수 있으니 빠르게 해결하는 것이 좋습니다.

 

구글 CLS 수치가 0.1을 초과하면 발생하는 문제

누적 레이아웃 이동 수치가 0.1을 초과하게 되면 아래와 같이 구글 서치콘솔에서 개선을 요구하는 페이지가 생성됩니다.

 

야후 재팬 웹페이지의 경우 이 CLS 수치를 0.2 감소시키고 나서 세션 당 페이지 조회수가 15% 증가했고, CLS를 1.65에서 0으로 낮춘 사이트는 전 세계적으로 도메인 순위가 크게 상승했다고 합니다. 그러니 여러분도 이 수치 문제를 최대한 빠르게 해결하는 것이 좋습니다.

아래서 CLS 수치를 낮추는 방법에 대해서 알아보도록 하겠습니다.

---

내 웹사이트 성능 측정하는 방법

구글에서는 웹사이트의 스피드, 성능을 측정하는 사이트를 제공하고 있습니다. 사이트 바로가기는 아래에 있습니다.

PageSpeed Insights

위 사이트에서 특정 페이지를 분석하면 아래와 같은 성능 문제 진단을 해줍니다. 성능 진단 후 

왼쪽 페이지는 CLS 수치가 0.1을 초과한 상태인 페이지이고 오른쪽 페이지는 아래에서 소개할 방법 등으로 CLS 수치를 0.1 내로 최적화한 모습입니다.

앞서 소개한 PageSpeed Insights 사이트에서 분석한 결과 페이지에서 우측 아래 All, FCP, LCP, TBT, CLS 중 CLS를 클릭하시면 CLS 수치에 영향을 주는 요소들만 볼 수 있게 필터됩니다.

---

CLS 수치 줄이는 방법

CLS 수치를 줄이는 방법에는 여러가지가 있습니다. 
 

 

이미지 크기 수동으로 설정하기

일단 가장 쉬운 방법이고 웹페이지 편집없이도 사용할 수 있는 방법은 이미지 크기 지정입니다. 이미지 크기를 수동으로 설정하는 것은 html 코드 내에서 width 속성의 값을 지정해주는 것과 같습니다.

이는 페이지의 이미지가 로딩이 다 되지 않아도, 설정해준 너비와 높이 값 만큼 공간을 미리 차지하기 때문에, 불필요한 레이아웃 이동을 최소화할 수 있습니다. 이는 쉽지만 효과가 좋은 방법입니다.

---

페이지 내 광고의 수 줄이기

광고는 보통 반응형으로 많이 설정합니다. 하지만 광고의 대부분은 본문보다 로딩이 오래걸리기 때문에 사용자가 스크롤을 하는 도중에 로딩이 되면 광고의 크기만큼 레이아웃 이동이 발생합니다. 이는 CLS 점수를 낮추기 때문에 본문에 광고가 너무 많으면 줄여보는 것도 하나의 방법이 될 수 있습니다.

구글의 공식 CLS 최적화 문서에 따르면 사용자가 웹페이지를 방문했을 때 가장 처음 보게 되는 뷰포트 상단 근처에는 광고를 배치하지 않는게 좋다고 합니다. 일반적으로 상단에 있는 광고가 더 많은 컨텐츠들을 아래로 밀어내기 때문입니다.

광고의 수를 조절하는 것은 수익과 직접적인 연관이 될 수 있기에 여러가지 시도해보는 것이 좋을 것 같습니다.

---

광고의 크기를 고정하기

만약 상단에 배치를 하면서 레이아웃의 이동을 최소화하려면 광고의 크기를 고정적으로 지정해주는 것입니다. 위에서 소개한 이미지 크기 수동 지정과 맥락이 같습니다. 하지만 광고의 크기를 일일이 알아내는 것은 힘들기에, 만약 예상한 광고의 크기보다 작은 광고가 게시되면 그만큼 빈공간이 생기기 때문에 주의해야합니다.

---

임베드 및 iframe 사용 최소화

유튜브 영상이나 구글 맵을 본문에 임베드하는 것처럼 임베드 및 iframe은 얼마만큼의 공간을 차지하는지 쉽게 알 수 없기 때문에 이들이 최종적으로 로딩이 될 때 레이아웃의 이동이 발생할 수 있습니다. 사용을 최소화하거나 공간 지정을 해주는 것이 필요해보입니다.

---

웹폰트 사용 방식 & 애니메이션 사용 방식

이 방법은 CSS를 조절해서 레이아웃을 줄이는 방법입니다. 웹폰트가 로딩될 때까지 FOUT, FOIT 현상이 발생해서 레이아웃 이동이 발생할 수 있습니다. 이는 아래와 같은 방식으로 해결할 수 있습니다.

페이지를 이루는 요소들의 애니메이션은 레이아웃을 이동시킬 수 있기 때문에 CSS의 transform을 이용한 애니메이션을 주로 사용하는 것을 권장합니다.
 

---

마무리

저 같은 경우에는 이미지 크기를 수동으로 조절해주는 것만으로도 CLS 수치를 절반 가까이 줄일 수 있었습니다. 추천드리는 방법은 앞서 소개드린 여러 방법들을 천천히 따라하면서 따라하고, 분석하고를 반복하면서 가장 최적의 방법을 찾아보시는 것을 추천드립니다.

---

함께 보면 좋은 글

넷플릭스 PC 화질이 안 좋다면 확인! 컴퓨터로 4K 화질 시청 방법

뱅앤올룹슨 포탈 Beoplay Portal과 HX 비교, 한 달 사용하고 느낀 점 리뷰