이 워드프레스 블로그에서 테마를 변경한 후부터 구글 서치 콘솔의 코어 웹 바이탈 섹션에서 개선이 필요한 URL 개수가 급증하면서 CLS 문제: 0.1 초과(모바일) 경고가 표시되기 시작했습니다.
데스크톱에서는 이상이 없고 모바일에 대하여 빠른 URL이 모두 개선이 필요한 URL로 바뀌었습니다. 보고서를 살펴보면 아래 그림과 같이 CLS 문제가 발생하고 있었습니다.
코어 웹 바이탈 - CLS 문제: 0.1 초과(모바일) 해결
이 문제도 결국 사이트 최적화와 관련이 있는 것 같습니다. 이전 글에서 LCP 문제: 2.5초 초과 경고 해결에 대하여 다루었는데요. 연장선상에서 추가적인 최적화 조치를 하나씩 취하여 문제를 해결할 수 있었습니다.
CSL는 Cumulative Layout Shift의 약자로서 시각적인 안정성을 측정하는 코어 웹 바이탈의 측정 항목입니다.
레이아웃 변경 횟수 (CLS)는 안정적인 Core Web Vitals 측정항목입니다. 이는 시각적 안정성을 측정하는 중요한 사용자 중심 측정항목입니다. 사용자가 예기치 않은 레이아웃 변경을 경험하는 빈도를 수치화하는 데 도움이 되기 때문입니다. CLS가 낮으면 페이지가 유쾌해집니다.
저는 클라우드웨이즈에서 제공하는 Breeze 캐시 플러그인과 Clearfy라는 최적화 플러그인을 사용하여 보다 정교한 세팅을 시도해보았습니다.
이 블로그에서 시도한 방법을 간단히 정리해보았습니다. 먼저는 LCP 문제에 대한 글을 참조하신 후에 이 글을 보시면 이해가 쉬울 것입니다.
Minify 모듈 비활성화
저는 CSS/JS Minify 기능은 Breeze 플러그인에서 설정했습니다.
Minify 설정을 할 때에는 사이트 오류가 발생하지 않으면서 성능을 최대한으로 끌어오리는 세팅을 찾도록 합니다.
Clearfy 플러그인에서는 Components 섹션에서 사용하지 않는 모듈(예: Html minify, Minify and combile (JS, CSS) 등)은 모두 비활성화했습니다.
사용하지 않는 기능 비활성화
구글 폰트나 구글 지도 등 사용하지 않는 요소들은 모두 비활성화했습니다.
사용하지 않는 불필요한 위젯들도 비활성화했습니다.
사이드바 등에 텍스트 등의 위젯이 사용된다면 해당 위젯은 활성화해야 합니다. 페이지 위젯, 달력 위젯, 태그 클라우드 위젯 등은 보통 사용하지 않으므로 비활성화하는 것을 고려할 수 있습니다.
또한, 그라바타(Gravatar)를 로컬에서 로드되도록 설정했습니다.
DNS 요청 프리페치 (Prefetch of DNS Request)
Breeze 플러그인의 Preload 탭에서 DNS 요청 프리페치 섹션에 URL을 입력하여 설정했습니다.
저는 다음과 같은 URL을 입력했습니다.
//s.gravatar.com
//0.gravatar.com
//2.gravatar.com
//1.gravatar.com
//youtube.com
//ajax.googleapis.com
//apis.google.com
//google-analytics.com
//www.google-analytics.com
//ssl.google-analytics.com
//googleads.g.doubleclick.net
//adservice.google.com
//pagead2.googlesyndication.com
//tpc.googlesyndication.com이 섹션에서 로딩에 시간이 많이 소요되는 웹폰트가 있다면 Preload Webfont 섹션에서 웹폰트 URL을 입력하여 웹폰트를 프리로드(Freload)할 수 있습니다.
언어 파일을 PHP로 로드하는 플러그인 설치
워드프레스에서 .mo 형식의 언어 파일을 로드할 때 사이트 속도가 느려지는 것으로 알려져 있습니다. 다행히 (오는 4월 2일 공개될 예정인) 워드프레스 6.5 버전부터는 언어 파일이 PHP로 처리되어 로드된다고 합니다.
Performant Translations이라는 플러그인을 사용하면 MO 파일이 PHP 파일로 변환되어 로드된다고 합니다. 이를 통해 언어 파일 로딩으로 인한 사이트 속도 저하를 줄일 수 있습니다.
워드프레스 6.5로 업데이트되는 경우에도 상황에 따라 이 플러그인이 유용할 수 있다고 합니다.
저는 워드프레스 6.5 업데이트 후에 이 플러그인을 삭제했습니다. 아바다, Divi 등 워드프레스 저장소에서 제공되지 않는 테마를 사용하는 경우 이 플러그인을 이용하면 사이트 속도를 개선하는 데 도움이 될 것입니다.
애드센스 광고 스크립트 지연 로드
이 블로그에 애드센스 광고 스크립트를 지연 로드하기 위해 자바스크립트를 사용해왔지만 효과가 제한적이었습니다. 중요하지 않은 자바스크립트를 지연로드하여 사이트 속도를 높여주는 Flying Scripts라는 플러그인을 설치하여 활성화하니 애드센스 광고가 게재되어도 속도가 많이 개선되었습니다.
구글 애드센스 광고 스크립트 때문에 사이트 속도가 느려지는 경우 유료 플러그인을 사용할 필요 없이 상기 글에서 소개하는 Flying Scripts 플러그인을 사용하여 테스트해 보시기 바랍니다.
추가적인 사이트 성능 개선 조치
Cloudways에 사이트 속도 개선에 대하여 문의해 보았습니다. 제 사이트의 성능 테스트를 한 후에 다음과 같은 조치를 추천했습니다.
- CSS, JS, HTML 코드 Minify 실행. Breeze와 같은 캐시 플러그인에서 Minification 기능을 사용할 수 있습니다. 또한, 이미지도 최적화해야 합니다. EWWW 최적화 플러그인을 사용할 수 있습니다.
- 추가적으로, 사이트의 성능을 더욱 개선하려면 CDN 서비스를 이용할 수 있습니다. 서드파티 CDN 서비스를 사용하거나 Cloudflare 엔터프라이즈 애드온을 사용할 수 있습니다.
Cloudflare Enterprise 애드온의 경우 비용이 (5개 미만인 경우) 도메인당 월 4.99달러인 것 같습니다.
보안을 위해 클라우드플레어 서비스를 이용하기를 원하는 분들도 계십니다. 그런 경우 고려해볼 수 있을 것 같습니다.
마치며
저는 상기와 같은 조치들을 하나씩 취했더니 CLS 문제가 해결되었습니다. 쾌적한 사이트 속도를 위해서는 다음과 같은 사항을 고려할 수 있습니다.
- 가볍고 빠른 테마 사용
- 플러그인 사용 최소화
- 무거운 플러그인 사용 자제
- 캐시 플러그인을 설치하여 세팅
- 최적화 플러그인 활용(예: Clearfy, Autoptimize)
- 빠른 웹호스팅 이용
GeneratePress와 같은 테마가 빠른 테마로 평가되고 있습니다. 이 블로그에서는 GeneratePress 테마를 한 동안 사용하다 약 1개월 전에 Kadence라는 테마로 변경했습니다. 속도는 GP 테마가 약간 더 빠른 것 같지만, Kadence도 나름 빠른 속도를 보여주는 것 같습니다.
사이트 속도가 빠르면 SEO(검색엔진 최적화)에 유리하여 구글 등 검색엔진에서 좋은 평가를 받을 수 있습니다. 사이트 속도가 느리면 이탈률이 증가하여 SEO에 불리하게 됩니다.
빠른 웹호스팅을 원하는 경우에는 이 블로그에 사용되고 있는 클라우드웨이즈(Cloudways)를 고려할 수 있습니다. 가성비 좋은 호스팅을 찾는 경우에는 패스트코멧(FastComet)과 같은 해외 호스팅이 저렴한 옵션일 수 있습니다. 국내호스팅을 원하는 경우 카페24가 무난한 것 같습니다.
댓글 남기기