워드프레스 속도 개선 가이드: LCP, CLS, TBT 지표 이해하기

워드프레스 사이트를 운영하다 보면 Google PageSpeed Insights나 Search Console에서 성능 결과를 보게 됩니다. 숫자와 약어가 많아 막막하게 느껴질 수 있지만, 처음에는 LCP, CLS, TBT가 무엇을 보여 주는지 이해하면 개선 우선순위를 정하기 쉬워집니다. 특히 LCP만 조금 느리고 CLS·TBT가 안정적이라면 전체 구조를 뜯어고치기보다 첫 화면의 큰 요소부터 점검하는 편이 효율적입니다.

1. 속도 측정 결과를 보기 전에 구분할 것

PageSpeed Insights에는 실제 사용자의 데이터를 바탕으로 한 필드 데이터와, 테스트 환경에서 측정한 실험실 데이터가 함께 표시될 수 있습니다. 같은 페이지라도 기기, 네트워크, 방문 시점에 따라 결과가 달라질 수 있으므로 한 번의 점수만 보고 플러그인을 여러 개 설치하기보다, 어떤 지표가 반복해서 나쁜지 먼저 확인하세요.

현재 Google의 Core Web Vitals는 LCP, INP, CLS입니다. TBT는 Core Web Vitals 자체는 아니지만 Lighthouse 성능 보고서에서 메인 스레드의 긴 작업을 살펴볼 때 유용한 실험실 지표입니다. 따라서 TBT가 높다면 실제 상호작용 지표인 INP와 함께 원인을 점검하는 방식이 좋습니다.

2. LCP는 메인 콘텐츠가 보이는 속도

LCP는 사용자가 페이지에 들어왔을 때 가장 큰 콘텐츠 요소가 화면에 표시되기까지의 시간을 뜻합니다. 보통 히어로 이미지, 대표 이미지, 큰 제목 블록이 LCP 후보가 됩니다. Google은 좋은 사용자 경험을 위해 LCP가 페이지 로딩 시작 후 2.5초 이내에 발생하도록 권장합니다. 2.5초 초과 4초 이하는 개선 필요, 4초 초과는 나쁨으로 분류하는 기준을 참고할 수 있습니다.

워드프레스에서 LCP가 느릴 때는 가장 먼저 첫 화면 대표 이미지를 확인하세요. 이미지가 실제 표시 크기보다 과도하게 크거나, 무거운 원본 파일을 불러오거나, 페이지 첫 화면에서 지연 로딩돼 있으면 핵심 콘텐츠 표시가 늦어질 수 있습니다. WebP나 AVIF처럼 브라우저 지원을 고려한 현대적 형식, 적절한 압축, 필요한 크기의 이미지 제공, 캐시 설정을 차례로 점검해 보세요.

3. CLS는 화면이 덜컹거리는 정도

CLS는 페이지가 로딩되는 중 이미지·광고·글꼴·배너 등이 갑자기 자리를 바꾸는 현상을 수치화합니다. 읽으려던 문장이나 누르려던 버튼이 이동하면 사용자 경험이 나빠지기 때문에, Google은 CLS 0.1 이하를 좋은 기준으로 안내합니다. 0.1 초과 0.25 이하는 개선 필요, 0.25 초과는 나쁨으로 볼 수 있습니다.

가장 흔한 개선 방법은 이미지와 동영상, 광고 영역에 미리 공간을 잡아 주는 것입니다. 워드프레스 편집기에서 이미지의 가로·세로 비율을 유지하고, 외부 임베드나 광고 슬롯에는 고정된 최소 높이를 지정하면 로딩 뒤 요소가 밀려나는 현상을 줄일 수 있습니다. 웹폰트가 바뀌며 글자 폭이 달라지는 경우도 있으므로 폰트 로딩 방식과 대체 글꼴도 함께 확인하세요.

4. TBT는 긴 자바스크립트 작업을 찾는 단서

TBT는 First Contentful Paint부터 Time to Interactive 사이에 메인 스레드가 사용자 입력에 응답하지 못한 시간을 합산해 보여 줍니다. 50밀리초를 넘는 긴 작업에서 초과한 부분을 더하는 방식이며, Lighthouse 모바일 기준 0~200밀리초는 빠름으로 표시됩니다. 데스크톱 기준의 빠름 구간은 0~150밀리초로 더 엄격합니다.

TBT가 높다면 자바스크립트 파일을 무조건 모두 지연시키기보다, 어떤 스크립트가 긴 작업을 만드는지 Lighthouse 진단과 브라우저 성능 패널에서 확인해야 합니다. 사용하지 않는 플러그인·위젯을 정리하고, 추적 코드와 채팅 위젯 같은 서드파티 스크립트를 필요한 페이지에서만 불러오며, 무거운 기능은 사용자 행동 뒤에 로드하는 방법을 검토해 보세요.

5. 워드프레스에서 안전하게 개선하는 순서

첫째, 개선 전후를 비교할 수 있도록 동일한 URL과 모바일·데스크톱 환경의 측정 결과를 기록합니다. 둘째, LCP 후보 이미지의 파일 크기와 실제 표시 크기, 캐시 헤더, 지연 로딩 설정을 확인합니다. 셋째, CLS가 있다면 이미지·광고·임베드 영역의 크기 예약을 보완합니다. 넷째, TBT가 높을 때만 플러그인과 자바스크립트 요청을 하나씩 점검합니다.

캐싱 플러그인이나 최적화 기능은 테마·결제·폼·광고 스크립트와 충돌할 수 있습니다. 운영 사이트에서 한 번에 여러 설정을 바꾸지 말고, 백업이나 스테이징 환경에서 한 항목씩 적용한 뒤 페이지 기능과 성능을 함께 확인하세요. 점수 개선보다 주문·문의·로그인 같은 핵심 기능이 정상 동작하는지가 우선입니다.

6. 자주 묻는 질문

Q. LCP만 개선 필요로 나오면 전체 테마를 바꿔야 하나요?
반드시 그렇지는 않습니다. 먼저 LCP 후보가 대표 이미지인지, 서버 응답이나 렌더링 차단 리소스인지 보고 가장 큰 원인부터 한 가지씩 보완하세요.

Q. CLS가 0에 가까워야만 하나요?
0에 가까울수록 안정적이지만, Google의 좋은 기준은 0.1 이하입니다. 광고·임베드·폰트처럼 이동을 만드는 요소를 찾아 공간을 예약하는 것이 실용적입니다.

Q. TBT가 낮으면 INP도 항상 좋나요?
아닙니다. TBT는 실험실 지표이자 INP를 살펴보는 보조 단서입니다. 실제 사용자 상호작용을 반영하는 INP도 함께 확인해야 합니다.

7. 마무리

CLS와 TBT가 안정적인데 LCP만 약간 개선 필요로 나온다면, 사이트 전체 구조가 무너졌다고 볼 필요는 없습니다. 첫 화면의 대표 이미지와 렌더링 경로를 우선 점검하고, 변경 전후의 실제 측정 결과를 비교해 보세요. 참고: Google Web Vitals, CLS 가이드, Lighthouse TBT 가이드