Astra 테마 사이트 제목 늘어지는 현상 해결 방법

OpenLiteSpeed 웹 서버로 변경한 후 LiteSpeed Cache 플러그인을 사용하면서 사이트를 운영하던 중, Google 서치 콘솔에서 CLS(Cumulative Layout Shift) 오류가 발생했다는 알림을 받았습니다. 문제의 원인을 찾아보니, 사이트 제목이 늘어지는 현상이 주요 원인이었으며, 이는 SEO(검색 엔진 최적화)에 부정적인 영향을 미칠 수 있었습니다. 이번 포스팅에서는 Astra 테마에서 발생할 수 있는 사이트 제목 늘어짐 현상을 해결하는 방법을 공유하겠습니다.

---

1. LiteSpeed Cache 설정 변경

문제점 파악

Google 서치 콘솔에서 CLS 오류가 있다는 알림을 받았지만, 검사 도구로 확인했을 때는 문제가 명확히 드러나지 않았습니다. 브라우저 크기를 조정하며 테스트한 결과, 새로 고침 시 사이트 제목이 늘어지는 현상을 발견했습니다. 이는 CSS와 캐시 설정의 영향을 받는 문제로, 제목 늘어짐이 CLS 오류의 주요 원인임을 확인했습니다.

설정 변경 방법

LiteSpeed Cache 플러그인은 강력하지만 설정이 과도할 경우 레이아웃 문제가 발생할 수 있습니다. 아래 단계를 따라 설정을 조정해 보세요:

1. 워드프레스 관리자 페이지 이동
   플러그인 > LiteSpeed Cache > 설정 경로로 이동합니다.
2. 설정 변경
   기존의 공격적이거나 극단적인 설정을 "권장" 또는 "기본" 설정으로 변경합니다.
3. 캐시 초기화
   설정 변경 후 캐시를 삭제하여 변경 사항이 즉시 적용되도록 합니다.

---

2. 추가 CSS 코드로 제목 늘어짐 방지

문제 해결 접근

LiteSpeed Cache 설정만으로는 해결되지 않는 경우가 있습니다. 특히 Astra 테마 사용자들 사이에서도 동일한 문제가 보고되었으며, 이는 CSS 코드로 직접 해결할 수 있습니다.

CSS 코드 추가 방법

1. 워드프레스 관리자 페이지로 이동
   모양 > 사용자 정의하기 > 추가 CSS로 이동합니다.
2. CSS 코드 입력
   아래 코드를 추가하세요:
3. .site-title { white-space: nowrap; /* 텍스트 줄바꿈 방지 */ overflow: hidden; /* 넘칠 경우 숨김 */ text-overflow: ellipsis; /* 넘칠 경우 '...' 표시 */ max-width: 300px; /* 최대 너비 지정 */ }
4. 캐시 삭제 및 테스트
   CSS 추가 후 캐시를 삭제하고 브라우저에서 새로 고침을 하며 문제가 해결되었는지 확인합니다.

---

3. CLS 문제를 예방하는 추가 팁

1) CLS 오류 확인 및 측정

• 도구 사용: Google PageSpeed Insights 또는 Lighthouse를 사용하여 CLS 문제를 확인합니다.
• 모바일 및 데스크톱 환경 테스트: 다양한 화면 크기에서 브라우저 크기를 조정하며 문제가 발생하는 지점을 파악합니다.

2) 캐시 플러그인 설정 최적화

• CSS 및 JS 결합 설정을 비활성화해 문제가 발생하는지 확인합니다.
• 특정 결합 설정이 원인일 경우 해당 파일을 제외 목록에 추가하여 문제를 해결할 수 있습니다.

3) 테마 관련 문제 해결

• Astra 테마의 문제가 지속될 경우, 다른 테마로 임시 변경하여 문제가 해결되는지 확인합니다.
• 문제가 테마에 한정될 경우 CSS 수정이나 Astra 테마 커뮤니티의 지원을 참고하세요.

---

결론

Astra 테마에서 발생하는 사이트 제목 늘어짐 현상은 CLS 오류의 주요 원인이 될 수 있으며, 이는 SEO에 부정적인 영향을 미칠 가능성이 있습니다. LiteSpeed Cache 설정 조정과 추가 CSS를 활용하면 이러한 문제를 효과적으로 해결할 수 있습니다. 특히 CSS를 통해 제목이 줄바꿈 없이 고정되도록 설정하면 문제가 즉시 개선되는 것을 확인할 수 있습니다.
CLS 문제는 검색 엔진 최적화에 직접적인 영향을 미치기 때문에, 문제가 발견되면 최대한 빠르게 조치하시기 바랍니다. 위의 방법을 참고하여 사이트의 성능과 사용자 경험을 향상시키세요.