Astra 테마 CLS 오류는 PageSpeed Insights에서는 잘 보이지 않는데 Search Console에서는 계속 경고가 발생하는 경우가 많습니다. 특히 LiteSpeed Cache를 강하게 설정한 상태에서 사이트 제목 영역이 흔들리면 CLS 점수가 갑자기 증가하는 현상이 나타날 수 있습니다.
처음에는 이미지 크기 문제나 광고 위치 문제라고 생각하기 쉽지만, 실제로는 사이트 제목 줄바꿈 때문에 레이아웃이 순간적으로 밀리는 경우도 있습니다. 저도 OpenLiteSpeed와 LiteSpeed Cache를 사용하는 환경에서 Search Console CLS 오류가 반복적으로 발생했고, 여러 테스트 끝에 사이트 제목이 늘어지는 현상을 발견했습니다.
특히 브라우저 폭을 줄이거나 새로고침을 반복했을 때 제목 영역 높이가 순간적으로 변경되면서 상단 레이아웃 전체가 흔들리는 문제가 나타났습니다. 이런 현상은 단순 디자인 문제가 아니라 Core Web Vitals와 SEO에도 직접 연결됩니다.
이번 글에서는 Astra 테마 CLS 오류 원인을 찾은 과정과 LiteSpeed Cache 설정 조정, 추가 CSS 적용 흐름까지 실제 테스트 기준으로 정리해보겠습니다.
목차
왜 CLS 오류는 측정 도구에서 안 보였을까?
CLS는 항상 고정적으로 발생하는 문제가 아닙니다. 특히 다음 상황에서만 발생하는 경우가 많습니다.
- 브라우저 크기 변경
- 캐시 재생성 직후
- 모바일 전환 순간
- CSS 지연 로딩 시점
- 새로고침 반복 상황
즉 단순히 PageSpeed만 돌리면 정상처럼 보이는데 실제 사용자 환경에서는 레이아웃이 흔들리는 경우가 있습니다.
특히 LiteSpeed Cache의 공격적 설정은 CSS 결합과 지연 로딩이 강하게 적용되기 때문에 Astra 테마 같은 구조에서는 사이트 제목 폭 계산이 늦어지는 현상이 발생할 수 있습니다.
LiteSpeed Cache 사전 설정 변경 확인
위 화면은 LiteSpeed Cache 사전 설정에서 “고급(권장)” 옵션을 사용하는 상태입니다. 처음에는 공격적 또는 극단 설정을 사용하고 있었는데, 이 상태에서는 CSS와 JS 결합이 강하게 적용되면서 일부 레이아웃이 늦게 계산되는 현상이 발생했습니다.
특히 사이트 제목처럼 폭이 유동적인 영역은 CSS 로딩 순서가 바뀌면 화면이 순간적으로 밀리는 문제가 생길 수 있습니다.
브라우저에서는 정상처럼 보여도 실제 사용자 환경에서는 다음 흐름으로 CLS가 발생할 수 있습니다.
- HTML 먼저 출력
- CSS 늦게 적용
- 제목 줄 길이 변경
- 헤더 높이 변경
- 전체 화면 밀림
결국 LiteSpeed Cache 설정 자체가 문제라기보다, Astra 테마 구조와 과한 최적화 조합이 충돌한 상태였습니다. 그래서 먼저 LiteSpeed Cache 설정을 권장 수준으로 낮춰 CSS 결합 강도를 줄였습니다.
변경 후에는 다음 변화가 나타났습니다.
- 새로고침 시 흔들림 감소
- 헤더 위치 안정화
- 모바일 제목 영역 고정
- CLS 수치 감소 시작
테마 문제인지 캐시 문제인지 확인했던 이유
처음에는 Astra 테마 자체 문제라고 생각했습니다. 실제로 Astra 사용자 포럼에서도 비슷한 증상을 이야기하는 사례가 있었기 때문입니다. 하지만 테마만 원인이라면 다른 테마에서는 문제가 없어야 했습니다.
그래서 직접 테스트를 진행했습니다.
테스트 과정
- Astra 테마 사용
- 다른 테마 교체 테스트
- LiteSpeed Cache 유지
- 브라우저 폭 반복 변경
- 모바일 전환 테스트
결과적으로 테마를 바꿔도 제목 흔들림이 일부 계속 발생했습니다.
즉 핵심 문제는 아래 조합이었습니다.
- 유동적인 제목 폭
- 캐시 최적화
- CSS 로딩 시점 차이
- 줄바꿈 발생
결국 사이트 제목 자체를 고정하지 않으면 CLS가 반복될 가능성이 높다는 결론이 나왔습니다.
Astra 테마 사이트 제목 줄바꿈 방지 CSS 적용
위 화면은 워드프레스 “추가 CSS” 영역에 사이트 제목 줄바꿈 방지 코드를 넣는 모습입니다. 핵심은 사이트 제목이 폭 변화 때문에 아래 줄로 밀리지 않도록 고정하는 것입니다.
특히 아래 CSS 속성이 중요했습니다.
- white-space: nowrap
- overflow: hidden
- text-overflow: ellipsis
이 조합을 적용하면 제목 길이가 길어져도 레이아웃 자체는 유지됩니다.
즉 다음 문제가 줄어듭니다.
- 헤더 높이 변화
- 메뉴 위치 흔들림
- CLS 발생
- 모바일 레이아웃 밀림
추가 CSS 적용 뒤에는 브라우저 크기를 반복적으로 줄이고 새로고침 테스트를 진행했습니다. 그 결과 이전처럼 사이트 제목이 아래 줄로 내려가면서 화면이 흔들리는 현상이 크게 줄어들었습니다.
Astra 테마 CLS 오류가 SEO에 영향을 주는 이유
CLS는 단순 화면 흔들림 문제가 아닙니다. Google은 실제 사용자 경험 데이터를 기반으로 Core Web Vitals를 측정하기 때문에 다음 현상이 반복되면 SEO에도 영향을 줄 수 있습니다.
- 제목 위치 변경
- 광고 밀림
- 메뉴 이동
- 콘텐츠 점프 현상
특히 모바일 환경에서는 헤더 영역 CLS 영향이 더 크게 잡히는 경우가 많습니다. Search Console CLS 보고서가 계속 증가하는 경우 다음 항목을 먼저 확인하는 것이 좋습니다.
우선 점검할 부분
- 사이트 제목 줄바꿈 여부
- LiteSpeed Cache CSS 결합
- JS 지연 로딩
- 웹폰트 로딩 시점
- 광고 로딩 위치
- 모바일 메뉴 높이 변화
실제로 CLS는 “큰 문제 하나”보다 “작은 흔들림 여러 개”가 누적되는 경우가 많습니다.
Astra 테마 CLS 오류 해결 후 체감 변화
설정 변경 후에는 아래 변화가 가장 먼저 보였습니다.
- 모바일 헤더 흔들림 감소
- 새로고침 시 레이아웃 안정
- Search Console CLS 감소
- 브라우저 크기 변경 시 안정화
- 메뉴 위치 고정
- 제목 영역 밀림 감소
특히 LiteSpeed Cache 공격적 설정을 낮추고 CSS 고정을 같이 적용한 뒤부터 CLS 경고 빈도가 줄어드는 흐름이 확인되었습니다.
Astra 테마 CLS 오류 정리
Astra 테마 CLS 오류는 단순 테마 문제 하나로 발생하는 경우보다 캐시 최적화와 제목 영역 구조가 같이 겹치면서 나타나는 경우가 많습니다.
핵심 흐름만 정리하면 다음과 같습니다.
- LiteSpeed Cache 강한 최적화 적용
- CSS 로딩 시점 변화
- 사이트 제목 줄바꿈 발생
- 헤더 높이 변경
- CLS 증가
그래서 해결 방향도 단순히 캐시를 끄는 방식보다 아래처럼 접근하는 편이 안정적이었습니다.
- LiteSpeed Cache 권장 설정 사용
- CSS/JS 결합 강도 조정
- 사이트 제목 줄바꿈 방지
- 브라우저 크기 직접 테스트
- 모바일 환경 반복 확인
결국 이번 문제는 “사이트 제목 한 줄” 때문에 발생한 CLS였고, CSS 고정과 캐시 설정 조정 이후 레이아웃 흔들림이 크게 줄어드는 결과로 이어졌습니다.
▶ 워드프레스 빠른 테마 5가지 정리 (속도 비교 기준)
