워드프레스 사이트 속도 최적화는 점수 100점을 만드는 작업이 아니라 실제 방문자가 주요 콘텐츠를 빠르게 보고, 클릭에 즉시 반응하며, 화면이 갑자기 움직이지 않게 만드는 과정입니다. Core Web Vitals의 LCP·INP·CLS를 각각 측정하고 원인을 분리해야 합니다.
Core Web Vitals 기준
| 지표 | 측정 대상 | 좋음 | 개선 필요 | 나쁨 |
|---|---|---|---|---|
| LCP | 주요 콘텐츠 로딩 | 2.5초 이하 | 2.5~4초 | 4초 초과 |
| INP | 상호작용 반응성 | 200ms 이하 | 200~500ms | 500ms 초과 |
| CLS | 시각적 안정성 | 0.1 이하 | 0.1~0.25 | 0.25 초과 |
Google의 Core Web Vitals 공식 안내는 실제 사용자 환경의 로딩, 반응성, 시각적 안정성을 측정하고 각 지표의 ‘좋음’ 기준을 제시합니다.
현장 데이터와 실험실 데이터 차이
| 데이터 | 예시 | 장점 | 주의점 |
|---|---|---|---|
| 현장 데이터 | Search Console, CrUX | 실제 사용자·기기·네트워크 반영 | 충분한 트래픽과 최근 28일 집계 필요 |
| 실험실 데이터 | PageSpeed Insights 진단, Lighthouse | 즉시 반복 측정과 원인 추적 | 한 번의 조건을 재현한 결과 |
실험실 점수가 좋아도 느린 기기와 네트워크의 실제 사용자는 다를 수 있고, 현장 데이터가 나빠도 오늘 수정한 효과가 바로 반영되지는 않습니다. 두 데이터를 역할에 맞게 함께 사용하세요.
1단계: 대표 페이지 유형을 나눠 측정한다
홈 한 페이지만 측정하지 말고 글, 카테고리, 소개 페이지처럼 템플릿별 대표 URL을 고릅니다. 로그인하지 않은 상태, 모바일 우선, 캐시가 비어 있는 첫 방문과 반복 방문을 구분해 기록하세요.
- 같은 URL과 같은 측정 도구 사용
- 테스트 날짜·시간·기기 조건 기록
- LCP 요소와 느린 요청 확인
- 긴 JavaScript 작업과 레이아웃 이동 원인 기록
- 한 번에 한 변경만 적용
LCP: 가장 큰 콘텐츠가 늦게 보이는 이유
LCP 요소는 대표 이미지, 큰 본문 이미지, 제목 영역, 배경 이미지일 수 있습니다. 서버 응답이 느리거나 이미지가 너무 크거나, 브라우저가 LCP 자원을 늦게 발견하거나, 렌더링을 막는 CSS·JavaScript가 있으면 지연됩니다.
| 원인 | 개선 방향 |
|---|---|
| 느린 서버 응답 | 페이지 캐시·호스팅·데이터베이스 점검 |
| 큰 대표 이미지 | 표시 크기에 맞춰 압축·반응형 형식 사용 |
| LCP 이미지 지연 로딩 | 첫 화면 후보를 lazy loading에서 제외 |
| 늦은 자원 발견 | 초기 HTML에서 이미지가 발견되게 함 |
| 렌더 차단 자원 | 중요 CSS와 불필요한 스크립트 분리 |
Google의 LCP 최적화 문서는 서버 응답, 자원 발견, 다운로드, 렌더링 지연을 나눠 점검하도록 안내합니다.
INP: 클릭 후 반응이 늦는 이유
INP는 사용자가 클릭·탭·키 입력을 했을 때 다음 화면이 그려질 때까지의 반응성을 봅니다. 무거운 JavaScript, 긴 메인 스레드 작업, 복잡한 메뉴·팝업·광고 코드, 한 번에 많은 DOM 변경이 반응을 늦출 수 있습니다.
- 사용하지 않는 플러그인과 스크립트를 제거합니다.
- 태그 관리자와 광고·분석 스크립트의 필요성을 검토합니다.
- 긴 작업을 작은 작업으로 나누는 테마·플러그인 업데이트를 확인합니다.
- 모바일 메뉴, 검색, 댓글, 폼 버튼을 실제로 눌러 봅니다.
- 지연 실행 후 기능이 깨지지 않는지 검증합니다.
CLS: 화면이 갑자기 움직이는 이유
이미지와 광고의 크기가 미리 정해지지 않았거나, 웹폰트가 바뀌며 글자 폭이 달라지거나, 기존 콘텐츠 위에 배너가 삽입되면 레이아웃이 이동합니다. 사용자 입력 직후 예상된 이동과 예고 없이 생기는 이동을 구분하세요.
| 원인 | 개선 |
|---|---|
| 크기 없는 이미지 | width·height 또는 aspect-ratio 선언 |
| 광고 공간 미확보 | 가능한 슬롯의 최소 높이 예약 |
| 상단 알림 삽입 | 기존 콘텐츠를 밀지 않는 위치·공간 사용 |
| 웹폰트 교체 | 대체 글꼴과 로딩 전략 조정 |
| 지연 콘텐츠 | 예상 크기의 플레이스홀더 제공 |
캐시를 적용할 때 확인할 것
페이지 캐시는 서버가 HTML을 만드는 시간을 줄여 LCP에 도움을 줄 수 있지만 INP와 CLS를 자동으로 해결하지는 않습니다. CSS·JavaScript 지연과 결합을 한꺼번에 켜면 메뉴나 광고가 깨질 수 있습니다. 자세한 계층과 제외 규칙은 워드프레스 캐시 설정 가이드에서 확인하세요.
이미지 최적화 우선순위
대표 이미지는 실제 표시 크기에 맞추고 WebP·AVIF 같은 효율적인 형식을 검토합니다. 첫 화면 LCP 후보에는 무조건 지연 로딩을 적용하지 말고, 아래쪽 이미지만 늦게 불러오세요. width와 height를 유지하면 CLS 예방에도 도움이 됩니다. 자세한 절차는 이미지 최적화 가이드를 참고하세요.
플러그인과 외부 스크립트 감사
플러그인 개수만으로 성능을 판단할 수 없습니다. 하나의 플러그인이 모든 페이지에 큰 스크립트를 넣을 수도 있고, 여러 작은 플러그인은 거의 영향을 주지 않을 수도 있습니다. 네트워크 요청과 실행 시간을 보고 판단하세요.
- 기능이 겹치는 플러그인
- 모든 페이지에서 로드되는 폼·슬라이더
- 광고·분석·소셜 공유 외부 스크립트
- 사용하지 않는 글꼴 굵기와 아이콘 세트
- 오래된 테마 기능과 페이지 빌더 요소
문제가 의심되면 스테이징에서 하나씩 비활성화하고 플러그인 충돌 진단 순서로 기능을 검증합니다.
WordPress 최적화 실행 순서
- 백업과 복원 방법을 확인합니다.
- 대표 템플릿의 현장·실험실 기준값을 기록합니다.
- 가장 나쁜 지표와 원인을 하나 고릅니다.
- 이미지 크기, 캐시, 불필요 스크립트 중 한 항목만 변경합니다.
- 기능과 레이아웃을 모바일에서 확인합니다.
- 같은 조건으로 다시 측정합니다.
- 며칠 뒤 Search Console 현장 데이터 추세를 확인합니다.
점수가 흔들리는 이유
네트워크, 서버 부하, 테스트 위치, 캐시 상태, 광고 콘텐츠가 달라지면 점수도 변합니다. 1점 차이에 반응하지 말고 여러 번 측정한 중앙값과 구간 변화를 봅니다. Google의 임계값 설명처럼 현장 평가는 페이지 방문의 75번째 백분위수를 기준으로 합니다.
변경 후 기능 검증
- 홈·글·카테고리가 로그아웃 상태에서 열리는가?
- 모바일 메뉴와 검색이 즉시 반응하는가?
- 댓글·문의 폼·광고가 정상인가?
- 이미지와 글꼴 로딩 중 화면이 이동하지 않는가?
- 관리자 글 편집과 미리보기가 되는가?
- 브라우저 콘솔과 서버 로그에 새 오류가 없는가?
최종 체크리스트
- LCP 2.5초, INP 200ms, CLS 0.1 기준을 이해했는가?
- 현장 데이터와 실험실 데이터를 구분했는가?
- 대표 페이지 유형을 각각 측정했는가?
- LCP 요소를 실제로 확인했는가?
- 첫 화면 이미지에 지연 로딩을 남용하지 않았는가?
- 이미지·광고 공간의 크기를 예약했는가?
- 불필요한 JavaScript와 외부 스크립트를 점검했는가?
- 한 번에 한 변경만 적용하고 재측정했는가?
Core Web Vitals는 검색 순위만을 위한 숫자가 아니라 사용자가 사이트를 편하게 이용하는지 보여 주는 신호입니다. 가장 나쁜 지표부터 원인을 하나씩 줄이고, 실제 사용자 데이터가 충분히 쌓일 시간을 두고 추세를 확인하세요.