워드프레스 모바일 속도 56점 → 97점으로 올린 방법 (LiteSpeed Cache 완전 정복): 호스팅어(Hostinger)에서 운영 중인 iamshoppist.com의 모바일 PageSpeed 점수를 56점에서 97점으로 끌어올린 전 과정을 공유합니다. 핵심은 LiteSpeed Cache 완전 설정과 구글 폰트 로컬화였습니다. 워드프레스 속도 최적화에 어려움을 겪고 있다면 이 글이 도움이 될 것입니다.
최종 결과 – 모바일 97점 달성
| 항목 | 시작 | 최종 |
|---|---|---|
| 모바일 성능 | 56점 | 97점 |
| 접근성 | – | 90점 |
| 권장사항 | – | 100점 |
| 검색엔진 최적화 | – | 100점 |
TBT(Total Blocking Time)는 200ms에서 0ms로 완전히 해소되었고, LCP(Largest Contentful Paint)도 7.4초에서 대폭 개선되었습니다.
Hostinger vs Bluehost 호스팅 비교 [All wirte 32]
1단계 – 호스팅어 AI Troubleshooter로 기본 최적화
호스팅어 hPanel에서는 AI Troubleshooter를 제공합니다. 제공하는 AI Troubleshooter로 기본 최적화를 먼저 진행했습니다. 복잡한 설정 없이 버튼 하나로 LiteSpeed와 데이터베이스를 자동 최적화해 줍니다.
진행 방법:
- hPanel → 웹사이트 → 해당 도메인 선택
- “성능 최적화” 버튼 클릭
- LiteSpeed + 데이터베이스 자동 최적화 실행
- 소요 시간: 약 10분
이것만으로도 모바일 56점 → 65점으로 상승했습니다.
2단계 – 호스팅어에서 LiteSpeed Advanced 연동
다른 호스팅에서 이전해 온 사이트는 LiteSpeed가 제대로 연동되지 않을 수 있습니다. 이 경우 이미지 최적화, 페이지 최적화 탭이 보이지 않습니다.
연동 방법:
- hPanel → 워드프레스 클릭
- 해당 사이트 → “요약” 메뉴
- “라이트스피드 → 설치” 버튼 클릭
- Advanced 프리셋 선택 (호스팅어 공식 추천)
- 워드프레스에서 LiteSpeed Cache 플러그인 비활성화 → 재활성화
연동 완료 후 이미지 최적화, 페이지 최적화, CDN 탭이 새로 나타납니다.
3단계 – LiteSpeed Cache 핵심 설정 완전 가이드
LiteSpeed Cache 플러그인의 각 탭별 최적 설정값을 정리했습니다.
캐시 설정
| 항목 | 권장 설정 |
|---|---|
| 캐시 활성화 | 켜기 |
| 모바일 캐시 | 켜기 |
| 업그레이드 시 모두 제거 | 켜기 |
| 게시물 업데이트 시 자동 제거 | 프론트/홈/페이지/아카이브 체크 |
이미지 최적화 설정
| 항목 | 권장 설정 |
|---|---|
| 자동 요청 크론 | 켜기 |
| 원본 이미지 최적화 | 켜기 |
| 원본 백업 제거 | 끄기 |
| 차세대 이미지 형식 | WebP 선택 |
| 추가 srcset WebP | 켜기 |
| EXIF 데이터 보존 | 끄기 |
설정 후 [이미지 최적화 요청] 탭 → “모두 최적화” 클릭하여 기존 이미지를 일괄 WebP 변환합니다.
페이지 최적화 – CSS 설정
| 항목 | 권장 설정 |
|---|---|
| CSS 결합 | 켜기 |
| CSS 외부 및 인라인 결합 | 켜기 |
| 비동기적으로 CSS 로드 | 켜기 |
| 인라인 CSS 비동기 라이브러리 | 켜기 |
| 글꼴 표시 최적화 | Swap |
| UCSS 생성 | 끄기 (QUIC.cloud 필요) |
페이지 최적화 – JS 설정
| 항목 | 권장 설정 |
|---|---|
| JS 축소 | 켜기 |
| JS 결합 | 끄기 ⚠️ |
| JS 결합 외부 및 인라인 | 켜기 |
| 지연된 JS 로드 | 지연 선택 |
⚠️ JS 결합은 반드시 끄기! 켜면 테마/플러그인 충돌로 사이트가 깨질 수 있습니다. JS 지연 로드 설정 후에도 반드시 사이트 정상 작동을 확인하세요.
페이지 최적화 – HTML 설정
| 항목 | 권장 설정 |
|---|---|
| HTML 축소 | 켜기 |
| DNS 프리페치 제어 | 켜기 |
| 쿼리 문자열 제거 | 켜기 |
| 구글 글꼴 비동기 로드 | 켜기 |
| 워드프레스 이모티콘 제거 | 켜기 |
| 구글 글꼴 제거 | 끄기 (폰트 완전 삭제됨) |
미디어 설정
| 항목 | 권장 설정 |
|---|---|
| 지연 로드 이미지 | 켜기 |
| 반응형 플레이스홀더 | 켜기 |
| 지연 로드 이프레임 | 켜기 |
| 누락된 크기 추가 | 켜기 |
| 워드프레스 이미지 품질 | 85 |
| 원본 이미지 자동 크기 조정 | 켜기 |
뷰포트 이미지 설정
| 항목 | 권장 설정 |
|---|---|
| 뷰포트 이미지 | 켜기 |
| 뷰포트 이미지 크론 | 켜기 |
뷰포트 이미지는 첫 화면에 보이는 이미지를 지연 로드에서 제외하여 즉시 표시되도록 합니다. LCP 점수 개선에 직접적인 영향을 줍니다.
현지화 설정
| 항목 | 권장 설정 |
|---|---|
| 그라바타 캐시 | 켜기 |
| 그라바타 캐시 크론 | 켜기 |
| 그라바타 캐시 TTL | 604800 (7일) |
| 리소스 현지화 | 끄기 |
4단계 – OMGF로 구글 폰트 로컬화 (339KiB 절감)
구글 폰트가 외부 서버에서 로드되면 CSS만 339KiB나 낭비됩니다. OMGF 플러그인으로 구글 폰트를 내 서버에 저장하면 속도를 크게 개선할 수 있습니다.
설치 및 설정 방법:
- 플러그인 → OMGF | Host Google Fonts Locally 설치
- Font-Display Option → Swap 선택
- 불필요한 폰트 굵기 → Don’t Load 체크
- Noto Sans KR 기준: 100, 300, 900 굵기는 Don’t Load
- 400(기본), 500, 700 굵기만 유지
- Save & Optimize 클릭
추가 작업 – @import 코드 제거:
워드프레스 외모 → 사용자 정의하기 → 추가 CSS에서 아래 코드 한 줄을 삭제합니다.
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
이 한 줄 삭제만으로 203KiB 추가 절감이 가능합니다. OMGF가 이미 로컬로 폰트를 제공하기 때문에 폰트 디자인은 그대로 유지됩니다.
5단계 – 불필요한 플러그인 정리
플러그인이 많을수록 사이트가 느려지고 보안 취약점도 늘어납니다. 아래 플러그인들을 제거하거나 정리했습니다.
| 제거한 플러그인 | 이유 |
|---|---|
| Like Button Rating (LikeBtn) | 사용하지 않는 CSS 28.6KiB 낭비 |
| WPConsent + WP Consent API | 한국 사이트는 GDPR 의무 없음 |
| Jetpack | 대용량 JS/CSS 로드로 속도 저하 |
| 듀플리케이터 | All-in-One WP Migration과 기능 중복 |
주의사항 및 팁
워드프레스 속도 최적화 시 반드시 주의해야 할 사항들입니다.
- JS 결합은 끄기 → 켜면 스크립트 충돌로 사이트가 깨질 수 있음
- QUIC.cloud CDN은 DNS 변경 필요 → 리스크가 있으므로 신중하게 진행
- 설정 변경 후 반드시 캐시 전체 삭제 후 사이트 정상 작동 확인
- 페이지 최적화는 하나씩 켜면서 확인 → 한꺼번에 켜면 문제 원인 파악이 어려움
- 애드센스 운영 사이트는 구글 스크립트 때문에 모바일 점수에 현실적인 한계가 있음
결론 – LiteSpeed Cache 하나면 충분하다
LiteSpeed Cache 플러그인 하나로 이미지 최적화, JS/CSS 압축, 지연 로드, WebP 변환까지 모두 해결할 수 있습니다. Smush, Autoptimize 같은 별도 플러그인 없이도 충분합니다.
가장 효과가 컸던 작업 순서:
- LiteSpeed Advanced 호스팅어 연동 (탭 풀세트 활성화)
- JS 지연 로드 활성화 (TBT 200ms → 0ms)
- WebP 이미지 변환 (이미지 용량 30~40% 절감)
- 구글 폰트 로컬화 + @import 코드 제거 (약 370KiB 절감)
- 불필요한 플러그인 정리
모바일 PageSpeed 점수 향상은 단순히 숫자의 문제가 아닙니다. 실제 방문자 경험과 구글 검색 순위에 직접적인 영향을 주기 때문에 꼭 최적화하시기 바랍니다.
#워드프레스 #LiteSpeed_Cache #페이지스피드 #모바일최적화 #구글폰트로컬화 #호스팅어 #PageSpeed_Insights #WebP변환 #OMGF #워드프레스속도개선 #사이트최적화 #캐시플러그인 #JS최적화 #CSS최적화 #워드프레스플러그인
