LiteSpeed Cache 모바일 캐시 설정은 AMP를 사용하는 워드프레스 사이트에서 한 번쯤 고민하게 되는 부분입니다. 특히 반응형 테마를 사용하는 상태에서 AMP까지 추가하면 모바일 캐시를 켜야 하는지, 꺼야 하는지 헷갈리는 경우가 많습니다.
처음에는 단순히 속도 문제라고 생각하기 쉽지만 실제로는 캐시 구조, HTML 분리 방식, CSS 최적화 충돌까지 연결되는 경우가 있습니다. 저도 AMP 설정 이후 모바일 화면이 꼬이거나 캐시가 반복 생성되는 현상을 확인하면서 LiteSpeed Cache 모바일 캐시 설정을 다시 점검하게 되었습니다.
특히 LiteSpeed Cache 모바일 캐시와 AMP 최적화 기능을 동시에 사용하는 경우, 모바일 페이지 구조가 달라지면서 CSS 깨짐이나 캐시 중복 생성 문제가 발생할 수 있습니다. 이런 상황은 단순 화면 문제가 아니라 Core Web Vitals와 SEO에도 영향을 줄 수 있기 때문에 설정 방향을 명확하게 정리해두는 것이 중요합니다.
이번 글에서는 실제 설정 화면 기준으로 LiteSpeed Cache 모바일 캐시와 AMP 최적화 설정을 어떻게 구분해야 하는지 정리해보겠습니다.
목차
반응형 테마인데 모바일 캐시를 켜면 왜 문제가 생길까?
최근 워드프레스 테마 대부분은 반응형 구조를 사용합니다. 즉, 데스크톱과 모바일이 서로 다른 페이지를 사용하는 것이 아니라 같은 HTML을 화면 크기에 맞춰 변경하는 방식입니다.
이 상태에서 LiteSpeed Cache 모바일 캐시를 활성화하면 서버 입장에서는 같은 페이지를 모바일과 데스크톱으로 따로 저장하려고 시도하게 됩니다.
문제는 여기서 시작됩니다.
- 불필요한 캐시 파일 증가
- 동일 페이지 중복 캐싱
- CSS 최적화 충돌 가능성 증가
- 캐시 재생성 반복
- 모바일 속도 저하 가능성
특히 LiteSpeed Cache 모바일 캐시가 켜진 상태에서 CSS 최적화까지 같이 사용하면, 일부 환경에서는 모바일 전용 CSS와 일반 CSS가 섞이면서 레이아웃이 흔들리는 경우도 발생할 수 있습니다.
LiteSpeed Cache 모바일 캐시 설정 확인
아래 화면은 LiteSpeed Cache 캐시 설정에서 모바일 캐시 옵션이 표시되는 부분입니다. AMP를 사용하지 않는 일반 반응형 테마라면 이 옵션을 굳이 활성화할 이유가 거의 없습니다.
오히려 모바일과 데스크톱 캐시를 따로 생성하면서 서버 저장 공간과 캐시 처리량만 증가하는 경우가 많습니다. 특히 게시물이 많아질수록 캐시 재생성 주기가 길어질 수 있고, 크롤러 접근 시 응답 속도가 불안정해지는 상황도 생길 수 있습니다.
반대로 AMP를 사용하는 경우에는 상황이 달라집니다. AMP 페이지는 일반 페이지와 HTML 구조 자체가 다르기 때문에 LiteSpeed Cache 모바일 캐시를 활성화해서 별도의 모바일 캐시를 생성해야 AMP 페이지가 정상적으로 분리됩니다.
즉 핵심은 다음과 같습니다.
- 반응형 테마만 사용 → 모바일 캐시 OFF
- AMP 별도 HTML 사용 → 모바일 캐시 ON
이 차이를 모르고 무조건 모바일 캐시를 활성화하면 서버 부하만 늘어나는 경우가 생각보다 많습니다.
AMP 사용 시 캐시 구조가 달라지는 이유
AMP는 일반 모바일 페이지와 다르게 별도의 AMP HTML을 생성합니다.
즉 아래처럼 페이지가 분리됩니다.
- 일반 페이지
- AMP 페이지
이 경우 동일 URL처럼 보여도 내부 구조는 완전히 다르게 처리됩니다. 그래서 LiteSpeed Cache 모바일 캐시를 꺼둔 상태에서는 AMP 페이지 캐시 분리가 정상적으로 되지 않는 경우가 생길 수 있습니다.
특히 다음 문제가 발생할 수 있습니다.
- AMP CSS 누락
- AMP 캐시 혼합
- 모바일 레이아웃 깨짐
- AMP 페이지 속도 저하
- Search Console AMP 오류 증가
이런 이유 때문에 AMP를 사용하는 사이트는 LiteSpeed Cache 모바일 캐시 활성화 여부를 반드시 확인해야 합니다.
AMP 최적화 기능과 LiteSpeed Cache 충돌 문제
AMP 플러그인 내부에는 Minify, Browser Caching, CSS 최적화 같은 기능이 포함되어 있습니다. 문제는 LiteSpeed Cache에서도 비슷한 최적화 기능을 제공한다는 점입니다.
즉 두 플러그인이 동시에 CSS 압축, 캐시 최적화, HTML 축소 작업을 진행하면서 서로 다른 방식으로 파일을 수정하게 됩니다.
이 과정에서 발생하기 쉬운 문제가 다음과 같습니다.
- CSS 순서 꼬임
- 모바일 메뉴 깨짐
- CLS 증가
- AMP 오류 발생
- 캐시 중복 생성
- PageSpeed 점수 흔들림
특히 LiteSpeed Cache 모바일 캐시를 사용하는 상태에서 AMP 최적화 기능까지 켜두면 모바일 캐시 파일과 AMP 최적화 파일이 서로 다른 구조로 저장되면서 충돌 가능성이 더 커질 수 있습니다.
그래서 실제 운영에서는 한쪽만 사용하는 방식으로 정리하는 경우가 많습니다.
예를 들면 다음과 같습니다.
LiteSpeed Cache 중심으로 운영하는 경우
- LiteSpeed Cache 최적화 사용
- AMP 최적화 기능 OFF
- 모바일 캐시 ON
AMP 최적화 중심으로 운영하는 경우
- AMP 최적화 기능 사용
- LiteSpeed Cache 최적화 최소화
- 모바일 캐시 OFF
이렇게 역할을 분리하면 CSS 충돌이나 캐시 꼬임 현상이 줄어드는 경우가 많습니다.
LiteSpeed Cache 모바일 캐시 설정 후 체감 변화
LiteSpeed Cache 모바일 캐시 설정을 다시 정리한 뒤에는 아래 변화가 나타나는 경우가 많습니다.
- 모바일 CSS 깨짐 감소
- 캐시 재생성 빈도 감소
- 서버 캐시 파일 정리 안정화
- 모바일 페이지 응답 속도 안정
- AMP 오류 감소
- Core Web Vitals 흔들림 감소
특히 반응형 테마만 사용하는 사이트에서는 모바일 캐시를 비활성화하는 것만으로도 캐시 관리가 단순해지는 경우가 많습니다. 반대로 AMP를 운영하는 경우에는 LiteSpeed Cache 모바일 캐시를 활성화해야 AMP 페이지가 분리 저장되면서 모바일 페이지 구조가 안정적으로 유지되는 편입니다.
LiteSpeed Cache 모바일 캐시 설정 정리
LiteSpeed Cache 모바일 캐시 설정은 단순 ON/OFF 문제가 아닙니다. 현재 사이트가 반응형만 사용하는지, AMP 전용 HTML을 사용하는지에 따라 방향이 달라집니다.
핵심만 정리하면 다음과 같습니다.
- 반응형 테마만 사용 → 모바일 캐시 비활성화
- AMP 별도 페이지 사용 → 모바일 캐시 활성화
- AMP 최적화와 LiteSpeed 최적화 동시 사용 주의
- CSS 최적화 중복 적용 확인 필요
특히 LiteSpeed Cache 모바일 캐시와 AMP 최적화 기능을 동시에 설정할 경우 서버 캐시 구조까지 꼬일 수 있기 때문에 현재 사용하는 최적화 방식이 어디 중심인지 먼저 확인하는 것이 중요합니다.
▶ LiteSpeed Cache ESI 기능, 블로그에서는 왜 신중해야 할까?
