여행 블로그를 국내 호스팅으로 운영하다가 페이지 속도와 CLS가 계속 발목을 잡던 시기가 있었습니다. 모바일 PageSpeed 점수는 40대, CLS는 0.2 이상에서 떨어지지 않았죠. LiteSpeed Cache(이하 LSC) 플러그인으로 갈아타고 설정을 손봤더니 모바일 90점대, CLS 0.01까지 만들 수 있었습니다. 오늘은 제가 국내 호스팅 환경(카페24 전용서버·LiteSpeed 엔터프라이즈, NHN·Gabia VPS의 OpenLiteSpeed 등)에서 실제로 쓰는 설정과, 광고·폰트·이미지 때문에 흔히 발생하는 레이아웃 흔들림(CLS)까지 잡는 과정을 단계별로 공유합니다.
1) 서버·테마 점검: LiteSpeed cache 서버 여부, PHP 버전, 테마 레이아웃 확인
- 내가 진짜 LS 캐시를 쓰고 있는지: 크롬 개발자도구 Network에서 첫 HTML 응답 헤더에 Server: LiteSpeed 또는 X-LiteSpeed-Cache: hit/miss가 보이면 정상입니다. LSC > Toolbox > Report에서 서버 호환성도 확인할 수 있어요. 만약 Nginx/Apache라면 LSC는 페이지 최적화만 하고 서버 캐시는 동작하지 않습니다.
- PHP와 모듈: PHP 8.1 이상, OPcache 활성화 권장. 가능하면 Redis Object Cache 플러그인으로 영속 객체 캐시까지 세팅하면 DB 호출이 확 줄어듭니다.
- 테마 체크: 과한 애니메이션과 거대한 hero 섹션, 무거운 빌더(과도한 DOM)를 쓰면 최적화가 어렵습니다. 저는 Block 기반 테마(예: GeneratePress, Blocksy)로 갈아탔을 때 LCP가 즉시 개선됐습니다.
- 필수 페이지 확인: 쇼핑몰이면 장바구니/결제/계정 페이지는 캐시 제외가 기본입니다. 미리 목록을 만들어두세요.
2) 캐시 기본값 설정: TTL, 로그인 사용자 캐시, 프라이빗 캐시 처리
LSC > Cache에서 다음처럼 시작하면 안전합니다.
- Cache Logged-in Users: Off (관리자·회원의 UI 꼬임 방지)
- Cache Commenters: Off (댓글 작성 직후의 프라이버시 이슈 방지)
- Cache Mobile: On (모바일 레이아웃 따로 캐시)
- Cache REST API / Login Page: On (로그인 페이지도 빠르게)
- Purge > Auto Purge Rules: all 설정 유지(글 발행/수정 시 홈·카테고리·태그 자동 비움)
- TTL(초) 권장값:
- Default Public Cache: 43200(12시간) — 뉴스성 콘텐츠면 2~6시간
- Default Front Page TTL: 3600(1시간) — 메인 변경이 잦다면 더 짧게
- Static 파일(CSS/JS/이미지)은 서버/Cloud에서 1~4주 캐시
실전 팁: 애드센스를 운용한다면 글 업데이트 때마다 메인·카테고리만 퍼지되 상세 글 페이지는 TTL로 자연 갱신되게 두면 트래픽 급증 시에도 안정적입니다.
3) CSS·JS 최적화: 결합 대신 지연, 중요 CSS 생성, JS 지연 로딩 전략
HTTP/2/3 환경에서는 “결합(combine)”보다 “지연(delay/defer)”이 안정적입니다.
- Page Optimization > CSS
- CSS Minify: On
- CSS Combine: Off (충돌·디버그 난이도 증가)
- Generate Critical CSS: On (QUIC.cloud 서울 리전 선택)
- Load CSS Asynchronously: On
- Remove Unused CSS(UCSS): 테마가 가벼우면 On, 빌더가 복잡하면 Off로 시작
- Page Optimization > JS
- JS Minify: On
- JS Combine: Off
- Load JS Deferred: On
- Delay JS: On (사용자 상호작용 전까지 대기)
- Delayed Inline JS: On
- Delay Excludes(예외) 예시:
- adsbygoogle.js (애드센스 자동광고/수동광고 깨짐 방지)
- wp-includes/js/jquery/jquery.min.js (jQuery 의존 스크립트 대비)
- elementor-frontend.min.js, swiper-bundle.min.js (빌더 슬라이더)
- recaptcha/로 시작하는 스크립트(회원가입/문의폼 보호)
실제 경험: Elementor 사이트에서 JS Delay를 무턱대고 켰더니 메뉴가 첫 터치 전까지 반응이 없었습니다. 위 파일들을 예외 처리하니 INP 문제 없이 100ms 내 응답이 나왔습니다.
4) 이미지·폰트 최적화: WebP 변환, LQIP, 폰트 표시 전략(font-display)
- Image Optimization
- Image Optimization Summary에서 원클릭으로 큐 등록 → WebP 생성 → 자동 치환까지 진행
- WebP For Extra srcset: On
- Lossy/Smart 선택: 저는 Smart(품질≈82)로도 눈에 띄는 손실이 없었습니다.
- Media
- Lazy Load Images: On
- Add Missing Sizes: On (누락된 width/height 채워 CLS 급감)
- Exclude Above-the-Fold: 첫 화면 hero 이미지, 로고를 예외(class: no-lazy)로 지정
- Generate LQIP: On, Quality 15~20, Viewport Only: On
- Fonts
- Localize Google Fonts: On (외부 호출 제거, 아시아 리전 지연 감소)
- Remove Google Fonts: 사용 안 하면 On
- Preload Fonts: 주요 WOFF2만 지정(로고/본문 1~2개)
- Font Display: Swap (FOIT 방지, CLS 안정)
현장 수치: Add Missing Sizes 켠 뒤 CLS가 0.21 → 0.03, 폰트를 로컬+swap으로 바꾸니 0.01로 떨어졌습니다.
5) 캐시 사전 빌드와 크롤러: 방문 전 캐시 미리 채우는 방법
국내 공유호스팅은 서버 크롤러가 비활성인 경우가 많습니다.
- LSC Crawler가 가능할 때: Crawler On, Crawl Interval 500ms 이상(서버 과부하 방지), Sitemap 기반으로 밤 시간대 예약
- 불가할 때 대안:
- Rank Math/Yoast 사이트맵 URL을 기준으로 간단한 크론을 걸어 프리로드
- 또는 “Preload” 전용 경량 플러그인 사용(방문이 적은 새 글만 1회 요청)
- QUIC.cloud CDN을 쓰면 캐시가 PoP에 분산되어 첫 방문자 체감이 더 빨라집니다. 서울 PoP가 잡히면 한국 트래픽은 확실히 유리합니다.
실전 팁: 저는 신상품 포스팅이 많은 제휴 블로그에서 새 글 발행 후 상위 10개 카테고리 URL만 프리로드했더니 초반 이탈률이 8%p 내려갔습니다.
6) 흔한 오류 해결: 레이아웃 깨짐, 관리자 바 숨김, 예외 규칙 넣기
- 레이아웃 깨짐(특히 CSS 비동기/UCSS 사용 시)
- 특정 페이지가 하얗게 뜨면 UCSS를 Off하고 Critical CSS만 유지
- 테마 메인 스타일(style.css)과 빌더 핵심 CSS는 CSS Excludes에 추가
- 메뉴·슬라이더가 멈춤(JS Delay/Defer 영향)
- jQuery, 빌더 핵심 JS를 Delay Excludes에 추가(앞 섹션 예시 참고)
- 관리자 바가 방문자에게 보임
- Cache Logged-in Users: Off인지 재확인
- Page > Advanced > Do Not Cache 체크로 특정 페이지만 예외
- 전자상거래 고장
- Do Not Cache URIs에 /cart/, /checkout/, /my-account/ 추가
- ESI(Edge Side Includes)로 WooCommerce 카트 위젯만 동적 처리
- 애드센스/쿠팡 CLS
- 광고 영역은 고정 높이 확보: 예) .adsense-slot{min-height:280px}
- 광고 스크립트는 Delay 예외, 이미지 lazyload 예외(첫 광고가 상단이면)
개인적 사례: 한 번은 댓글 폼이 전혀 제출되지 않아 원인을 추적해보니 reCAPTCHA가 delay되어 검증이 실패하고 있었습니다. recaptcha 관련 스크립트를 Delay Excludes에 넣고 즉시 해결했습니다.
7) 성능 측정 루틴: PageSpeed Insights, CrUX, WebPageTest 활용 순서
- 변경 전후를 항상 기록: PSI의 Lighthouse 점수뿐 아니라 LCP·INP·CLS 수치를 각각 캡처
- 필드 데이터 확인: PSI 상단의 Chrome UX Report(크롬 사용자 실제 데이터)가 녹색으로 가는지 체크. 랩 데이터만 빠르면 실사용은 여전히 느릴 수 있습니다.
- WebPageTest로 반복 측정: First View(미캐시)와 Repeat View(캐시 히트)를 비교. 국내 테스트 노드가 없으면 일본 도쿄 노드로 측정하면 유사합니다.
- 응답 헤더로 검증: X-LiteSpeed-Cache: hit가 떠야 캐시 효과가 있는 것. miss라면 캐시 예외 규칙, 쿠키, 로그인 여부를 점검하세요.
- 하나씩 바꾸고, 하루는 기다린다: UCSS/이미지 최적화/폰트 로컬화 등은 캐시와 CDN 전파 시간이 필요합니다. 서두르면 되돌리기 어렵습니다.
마무리로 제 경험을 숫자로 남기면, 국내 LiteSpeed 서버 + LSC 표준 세팅 + 폰트/이미지 정리만으로 모바일 PSI 39→92, LCP 4.7s→2.1s, CLS 0.24→0.01까지 내려갔습니다. 핵심은 “결합보다 지연”, “폰트·이미지 치수 확보”, “광고 영역 사전 예약” 세 가지였습니다. 이 순서대로 따라 하면 테마나 호스팅이 달라도 유사한 개선을 얻을 수 있습니다.
