CLS (Cumulative Layout Shift) 문제는 웹사이트에서 페이지 로딩 중에 발생하는 레이아웃 변화가 사용자 경험에 부정적인 영향을 미치는 문제입니다. CLS 점수는 변화된 레이아웃 요소의 크기와 위치, 그리고 해당 요소의 가시성에 따라 결정됩니다. CLS 점수가 0.1을 초과하면 사용자 경험이 나쁘게 느껴지기 때문에 최적화가 필요합니다. 이를 해결하기 위한 방법은 다음과 같습니다.
CLS 문제 해결 방법
1. 이미지와 비디오 크기 설정
이미지와 비디오는 웹페이지에서 CLS 문제를 발생시키는 가장 일반적인 요인 중 하나입니다. 따라서 이미지와 비디오의 크기를 설정하여 레이아웃 변화를 최소화해야 합니다. 즉, 이미지와 비디오의 크기를 설정하고, 이 크기가 변경되지 않도록 고정합니다. 포스팅된 페이지 안에 자동으로 리사이징 되는 형태의 이미지와 비디오가 많을 경우 딜레이 되는 시간이 늘어날 수 있습니다. 특히 과도하게 큰 이미지를 삽입하였는데, 호스팅 서버의 반응이 늦다면 일어날 수 있는 문제라고 보이네요. 결국 이 문제를 해결하려면 이미지의 가로폭에 맞게 줄이거나 용량을 줄여서 올려주는 방식이 도움이 될 것 같습니다.
2. 리소스 사전 로딩
리소스 사전 로딩은 웹페이지가 로드되기 전에 이미지, 비디오 및 기타 파일을 로드하여 CLS 문제를 줄이는 방법입니다. 이를 위해서는 다음과 같은 코드를 추가할 수 있습니다.
```
<link rel="preload" href="your-image.jpg" as="image">
```
이렇게 하면 웹페이지가 로드되기 전에 이미지가 미리 로드되어 CLS 점수를 줄일 수 있습니다. 이건 제가 예전에 비용은 많이 지불할 수 없는 상황에서 호스팅 서버 환경이나 회선 속도가 느린 저렴한 호스팅을 사용하면서 홈페이지 제작할 때 많이 사용했던 방법입니다. 게시판 형태는 불가능하고 페이지 단위로 제작된 것들은 메인 페이지 하단에 모두 보이지 않게 사전 로딩을 해 두면 방문자가 다른 카테고리(또는 메뉴) 페이지에 접속하며 홈페이지를 둘러볼 때 이미지 로딩 속도가 엄청나게 빠르다고 느껴서 홈페이지를 둘러볼 때 쾌적하게 느끼게 됩니다.
3. 애니메이션 최적화
애니메이션은 웹페이지에서 CLS 문제를 발생시키는 또 다른 요인입니다. 따라서 애니메이션을 최적화하여 레이아웃 변화를 최소화해야 합니다. 이를 위해서는 애니메이션 속도와 지속 시간을 조정하거나, 애니메이션을 비활성화하거나, CSS 애니메이션을 사용하는 것이 좋습니다. 이건 뭐 사실 답이 없습니다. 용량이 적은 애니메이션이라면 퀄리티가 낮아질 수밖에 없는데, 있으나 마나 한 상황이 될 수도 있으니 차라리 없는 것이 더 나을 것 같습니다.
4. 광고 최적화
광고는 웹페이지에서 CLS 문제를 발생시키는 또 다른 요인 중 하나입니다. 따라서 광고를 최적화하여 레이아웃 변화를 최소화해야 합니다. 이를 위해서는 광고의 크기와 위치를 조정하거나, 광고를 비활성화하는 것이 좋습니다.
결론적으로 이야기하자면 티스토리의 경우 구글 애드센스 광고가 늦게 뜨는 현상 때문에 발생되는 CLS 문제가 가장 큽니다. 최근 개편 중인 티스토리(아닐 수도 있음)는 본문 상단의 광고 자리에 광고가 뜨지 않으면 본문이 밀려서 위로 올라가는 형태가 되고 있습니다. 이 경우 휑하니 빈 공간이 없기 때문에 보는 사람은 안정감을 찾을 수는 있으나 이로 인해 CLS 문제가 발생될 여지가 있게 됩니다. 티스토리에서 어떤 방법으로 해결하는지는 모르겠지만, 아마도 max-height와 같은 형태를 사용하지 않을까 짐작해 봅니다.
참고로 지금 사용하는 블로그 스킨은 이런 현상은 없는데, 기존에 사용하던 다른 블로그에서 CLS 문제가 발견되어서 상단 구글 광고 자체를 제거하고 문제를 해결했습니다. 휑하니 비워두는 방법도 있는데, 자존심이 허락하지 않아서요 ^^;;
.revenue_unit_item.adsense {
background-image: none !important;
min-height: 280px !important;
}도움 되시라고 CSS 코드 하나 공유했습니다. 관리자모드 HTML 편집 들어가셔서 CSS 탭에서 추가하세요.
5. 서버 응답 시간 최적화
서버 응답 시간이 느리면 웹페이지가 로드되는 데 시간이 오래 걸리므로 CLS 문제를 발생시킬 수 있습니다. 따라서 서버 응답 시간을 최적화하여 웹페이지를 더 빠르게 로드할 수 있도록 해야 합니다. 이를 위해서는 서버 측 최적화를 수행하거나, 캐시를 사용하는 것이 좋습니다. 이건 블로그 운영자가 손댈 수 없는 영역이므로 생략하겠습니다.
어찌 되었건 이러한 방법을 염두에 두면서 블로그 포스팅에 신경을 써서 CLS 문제를 최적화하면 사용자 경험을 향상하고 검색 엔진 최적화에도 도움이 될 수 있습니다. 저의 경험이 여러분에게 도움이 되길 바랍니다.
댓글