[WordPress Core Web Vitals 개선 시리즈] 전체 가이드 (모바일 우선)

Core Web Vitals는 체감 품질을 수치화한 기준이다

Core Web Vitals는 사용자가 페이지를 보면서 느끼는 속도, 반응성, 안정성을 숫자로 묶어 보여주는 사용자 경험 지표다.

WordPress 사이트를 운영하다 보면 “이미지는 줄였는데 첫 화면이 왜 늦지?”, “모바일에서 버튼을 눌렀는데 왜 한 박자 늦게 반응하지?”, “읽는 중에 화면이 왜 밀리지?” 같은 문제가 반복된다.

데스크톱에서는 괜찮아 보여도 실제 방문자는 모바일 네트워크, 보급형 기기, 여러 앱이 열린 상태에서 페이지를 본다.

그래서 중요한 것은 총점이 아니라 첫 화면이 빨리 보이는지, 누른 뒤 바로 반응하는지, 읽는 동안 레이아웃이 흔들리지 않는지다.

– LCP·INP·CLS를 먼저 이렇게 이해한다

LCP는 방문자가 “이 페이지가 떴다”라고 느끼는 핵심 콘텐츠의 표시 시간이다. 보통 대표 이미지, 큰 제목, 상단 콘텐츠 블록이 여기에 걸린다.

INP는 사용자가 버튼, 탭, 메뉴를 눌렀을 때 실제 반응이 시작되기까지의 체감 지연을 본다. 모바일에서 자바스크립트가 무거우면 바로 나빠진다.

CLS는 화면이 보이는 도중 요소가 밀리거나 튀는 현상이다. 이미지 크기 미지정, 늦은 폰트 적용, 광고 슬롯 흔들림이 대표 원인이다.

실무에서는 셋을 동시에 붙잡기보다 가장 불편한 현상부터 잡아야 한다. 첫 화면이 느리면 LCP, 누른 뒤 굼뜨면 INP, 읽는 중 흔들리면 CLS부터 보는 식이 가장 빠르다.

– 왜 이런 문제가 생기는가 (Why)

① WordPress는 테마, 플러그인, 폰트, 분석 스크립트가 겹치면서 첫 화면 전에 불러와야 할 자원이 빠르게 늘어난다.
② 모바일 기기는 CPU와 네트워크 여유가 작아서 데스크톱에서는 괜찮은 설정도 실제 방문자 환경에서는 지연으로 드러난다.
③ 특히 대표 이미지가 크거나 서버 응답이 느리거나 캐시가 약하면 LCP가 먼저 무너진다.

④ INP는 자바스크립트 실행 시간이 길어질수록 나빠지며, 슬라이더·팝업·추적 코드가 겹치면 입력 후 반응까지의 공백이 커진다.
⑤ CLS는 이미지와 광고 영역의 크기를 미리 잡지 않았거나 웹폰트가 늦게 적용될 때 자주 발생한다.
⑥ 결국 핵심 문제는 콘텐츠 자체보다 콘텐츠가 보이기 전에 끼어드는 자원과 로딩 순서를 통제하지 못하는 데 있다.

결국 CWV 개선은 기능 추가보다 우선순위 재정렬에 가깝다.

– 비교/판단 기준 – 무엇을 먼저 고칠지 정하는 기준

진단은 점수보다 현상에서 시작해야 한다. 모바일에서 가장 먼저 불편한 지점 1개를 고르면 우선순위가 바로 선다.

현상	먼저 볼 지표	대표 원인	가장 먼저 할 일
첫 화면이 늦게 뜬다	LCP	큰 이미지, 느린 서버 응답, 캐시 부족	대표 이미지 압축, WebP/AVIF, 페이지 캐시
버튼 반응이 굼뜨다	INP	무거운 JS, 플러그인 충돌	불필요한 스크립트 제거, 지연 실행
읽는 중 화면이 밀린다	CLS	이미지 크기 미지정, 폰트 교체, 광고 흔들림	width/height 지정, 폰트 전략 조정
모바일만 유독 느리다	LCP+INP	고해상도 자원, 애니메이션 과다	모바일 우선 경량 레이아웃 적용

언제 A를 선택하고 언제 B를 선택하느냐는 기준도 분명하다. 대표 이미지가 크고 콘텐츠가 단순하면 LCP부터, 필터·토글·버튼 클릭이 많으면 INP부터 본다.

– 진단 순서 : 현상에서 원인으로 좁혀 간다

기준 페이지 3개를 고른다. 홈, 유입이 많은 게시글 1개, 전환 페이지 1개면 충분하다.

각 페이지에서 가장 거슬리는 현상을 1개만 적는다. 첫 화면 지연, 클릭 지연, 레이아웃 흔들림 중 하나로 좁힌다.

그 현상에 연결된 자원을 본다. 대표 이미지 용량, 폰트 수, JS 실행량, 광고 슬롯, 캐시 상태를 순서대로 확인한다.

플러그인을 한 번에 다 건드리지 말고 영향이 큰 요소 1개만 끄거나 교체해 전후 차이를 비교한다.

점수 전체를 올리려는 접근보다 병목 1개를 줄이는 접근이 실제 운영에서 훨씬 빠르다.

– 개선 로드맵 : WordPress에서 바로 효과가 나는 3단계

이미지부터 정리한다. 첫 화면 이미지는 실제 표시 크기에 맞춰 줄이고 WebP 또는 AVIF를 우선 쓴다. 핵심 이미지는 과한 지연 로딩 대상에서 뺀다.

폰트를 줄인다. 웹폰트는 1종, 굵기는 2개 수준으로 제한하고 font-display 전략을 적용해 늦은 교체로 인한 흔들림을 줄인다.

캐시와 스크립트를 정리한다. 페이지 캐시, 브라우저 캐시, CDN을 우선 적용하고 사용하지 않는 CSS·JS는 페이지 단위로 막는다.

그래도 느리면 서버 응답을 본다. 느린 호스팅과 무거운 테마는 프런트 최적화만으로는 한계가 있다.

우선 ‘이미지·폰트·캐시’ 3가지만 잡아도 모바일 체감은 분명히 달라진다.

– 테스트(검증) : 숫자로 다시 확인하는 방법

검증 기준은 단순하게 두면 된다. 모바일 기준으로 LCP 2.5초 이하, INP 200ms 이하, CLS 0.1 이하를 목표선으로 잡는다.

수정 후에는 같은 페이지를 최소 3회 반복 확인한다. 오전과 저녁처럼 시간대를 나눠 보면 일시적인 캐시 효과와 실제 개선을 구분하기 쉽다.

기록도 숫자로 남겨야 한다. “조금 빨라 보인다”가 아니라 “게시글 페이지 LCP가 3.6초에서 2.4초로 줄었다”처럼 적어야 다음 결정을 할 수 있다.

– 예방/운영 팁 : 다시 느려지지 않게 관리한다

새 플러그인을 추가할 때마다 모바일 페이지 1개를 바로 다시 본다. 기능 1개가 스크립트 3~4개를 늘리는 경우가 많다.

이미지 업로드 규칙도 고정하는 편이 좋다. 예를 들어 가로 1600px 이하, 250KB 이하, WebP 우선 기준을 두면 편집 단계에서 병목이 줄어든다.

테마를 바꿀 때는 디자인 기능 수보다 DOM 구조와 스크립트 무게를 먼저 본다. 보기 좋은 테마보다 가벼운 테마가 체감 품질을 오래 지킨다.

– 30초 체크리스트

– 자주 하는 실수 / 주의할 점

가장 흔한 실수는 점수만 보고 모든 최적화 옵션을 한 번에 켜는 것이다. 이 방식은 원인 추적이 안 되고 모바일에서 레이아웃 깨짐만 늘릴 수 있다.

또 다른 실수는 첫 화면 이미지까지 과하게 지연 로딩하는 것이다. 보이지 않는 이미지는 늦게 불러와도 되지만, 처음 보여야 하는 핵심 이미지는 가장 빨리 보여야 한다.

광고와 외부 위젯을 상단에 몰아두는 것도 주의해야 한다. 수익 요소라도 위치와 크기 예약을 잘못 잡으면 LCP와 CLS를 함께 망가뜨린다.

– 마무리 : 상황별 적용 우선순위

콘텐츠형 블로그라면 이미지 최적화와 캐시를 먼저 적용한다. 상호작용이 많은 사이트라면 스크립트 정리와 INP 개선을 먼저 적용한다. 광고 비중이 높은 사이트라면 슬롯 크기 예약과 CLS 안정화를 먼저 적용한다.

중요한 것은 한 번에 전부 고치는 것이 아니라 가장 큰 병목 1개를 먼저 줄이는 것이다.

오늘은 유입이 가장 많은 게시글 1개를 골라 모바일 기준으로 대표 이미지, 폰트, 캐시부터 점검한다.

– 요약

– FAQ

• Q1. WordPress에서 CWV를 가장 빨리 개선하는 한 가지는 무엇인가요?
  A1. 첫 화면 대표 이미지 최적화다. 이미지 용량과 포맷만 바꿔도 LCP가 바로 줄어드는 경우가 많다.

• Q2. INP가 나쁘면 캐시만으로 해결되나요?
  A2. 아니다. INP는 자바스크립트 실행과 입력 반응 지연의 영향이 커서 스크립트 정리와 지연 실행이 더 직접적이다.

• Q3. CLS는 왜 모바일에서 더 거슬리나요?
  A3. 화면이 좁아 작은 이동도 크게 느껴지기 때문이다. 이미지 크기 미지정, 늦은 폰트 적용, 광고 흔들림이 특히 잘 보인다.