워드프레스 CLS 수치가 계속 높게 나오는 이유

새로고침을 몇 번을 해도 CLS 점수는 그대로일 때가 있습니다⠀

PageSpeed Insights 화면을 새로고침해 보지만 숫자가 꼼짝하지 않는다면⠀

현장 데이터가 최근 28일치 방문을 모은 값이기 때문일 수 있습니다⠀

⠀

⠀⠀⠀

몇 번을 눌러도 안 바뀌는 그 숫자의 정체⠀

⠀⠀⠀

⠀⠀⠀

⠀⠀⠀

사이트를 손본 날 저는 PageSpeed Insights를 열어 같은 페이지를 다섯 번 넘게 새로고침해 봤습니다⠀

그런데 CLS 점수는 매번 똑같았습니다⠀

화면 위쪽 현장 데이터 항목을 다시 보니 이유가 있었습니다⠀

⠀

이 값은 제가 방금 새로고침한 결과가 아니라 최근 28일 동안 실제 방문자들에게서 모은 데이터입니다⠀

그것도 개별 방문 하나하나가 아니라 75번째 백분위, 즉 방문의 75%가 겪은 값을 기준으로 잡습니다⠀

매일 갱신되기는 하지만 하루 안에 크게 움직이는 값은 아닙니다⠀

그래서 오늘 이미지 크기를 고쳤다고 해도 오늘 오후에 새로고침한 화면에는 아직 반영되지 않을 수 있습니다⠀

⠀⠀⠀

화면에 뜬 저 숫자, 좋음인가 나쁨인가⠀

⠀⠀⠀

CLS 항목 옆에 색으로 구간이 나뉘어 있는데 이 구간을 기준으로 보면 됩니다⠀

0.1 이하면 좋음, 0.1에서 0.25 사이면 개선 필요, 0.25를 넘으면 나쁨으로 분류됩니다⠀

⠀

제 사이트는 개선 필요 구간에 걸려 있었는데 워드프레스 코어가 이미지에 자동으로 width와 height를 붙여 주는 버전을 쓰고 있었는데도 그랬습니다⠀

테마가 배너 영역을 CSS로 직접 그리고 있어서 그 영역은 코어의 자동 처리 대상이 아니었습니다⠀

그 배너가 로드되는 타이밍에 아래 콘텐츠가 밀려 내려가는 게 화면에서 보였습니다⠀

⠀⠀⠀

한 번 재서 0.1을 넘었다고 탈락은 아닙니다⠀

⠀⠀⠀

기준을 충족한다는 말은 한 번 잰 값이 0.1 이하라는 뜻이 아닙니다⠀

방문의 75%에서 0.1 이하가 나와야 충족으로 봅니다⠀

⠀

그래서 제 눈앞의 화면 하나가 0.12로 나왔다고 그 순간 기준 미달이 확정되는 건 아닙니다⠀

같은 페이지를 다른 시간대, 다른 기기로 열어 보면 값이 다르게 잡히는 경우도 있었습니다⠀

현장 데이터 항목 자체가 이미 여러 방문을 모아 놓은 결과라서 오늘 제가 연 한 번의 화면과는 계산 방식이 다릅니다⠀

⠀⠀⠀

현장 데이터랑 Lighthouse 값이 따로 놉니다⠀

⠀⠀⠀

같은 페이지인데 위쪽 현장 데이터 CLS와 아래쪽 Lighthouse 점수가 다르게 나오는 걸 보고 처음엔 오류인 줄 알았습니다⠀

현장 데이터는 실제 사용자들이 각자의 기기와 회선으로 방문한 값을 모은 것이고 Lighthouse는 구글 서버가 정해진 조건으로 한 번 시뮬레이션한 결과입니다⠀

⠀

제 경우는 현장 데이터 쪽 CLS가 더 높게 나왔는데 이럴 때는 실제 방문자의 기기 환경이나 광고 노출 여부처럼 시뮬레이션에 안 잡히는 요소를 들여다봐야 할 수 있습니다⠀

반대로 Lighthouse 쪽이 더 높다면 그 페이지를 처음 여는 순간의 렌더링 과정 자체를 봐야 할 수 있습니다⠀

개인적으로 두 값 중 어느 쪽이 높은지부터 먼저 확인하는 게 다음에 뭘 볼지를 정하는 데 더 맞다고 봅니다⠀

⠀⠀⠀

고친 뒤 뭘 적어 둬야 나중에 비교가 됩니다⠀

⠀⠀⠀

배너 영역에 최소 높이를 지정해 두고 다음 날 같은 페이지를 다시 열었습니다⠀

⠀

현장 데이터 CLS 값과 그날 날짜를 함께 적어 두고 Lighthouse 점수는 따로 구분해서 적었습니다⠀

두 값을 한 줄에 섞어 적으면 나중에 어느 쪽이 좋아졌는지 헷갈리기 쉽습니다⠀

⠀

오늘 날짜로 적어 둔 현장 데이터 CLS 값 옆에는 일주일 뒤 날짜를 하나 더 비워 뒀습니다⠀

⠀⠀⠀

• NAS 백업만 믿었다가 사이트 날린 진짜 이유
• 개인사업자 등록 절차와 필요 서류 및 과세 선택 기준
• 세 번 떨어진 뒤에야 구글 공식 문서를 읽었습니다
• 가족관계증명서 제출 방법과 인터넷 발급 기준
• 월 호스팅비 아끼려다 낭패? NAS 1년 실제 유지비 산정해보니