블로그를 새로 만들 때 저는 먼저 워드프레스 테마를 바꿉니다. 이유는 간단합니다. 테마가 무거우면 어떤 글을 써도 코어 웹 바이탈에서 발목이 잡히기 때문입니다. 특히 한국어 웹폰트와 이미지가 얹히면 LCP·CLS가 흔들리기 쉬워서, 테마-폰트-이미지 세팅을 한 번에 잡아야 승인과 이후 수익화가 편안해집니다.
최근 저는 미니멀 FSE 테마로 갈아타고, Pretendard 서브셋과 AVIF/WEBP로 정리한 뒤 PageSpeed 데스크톱·모바일 모두 90점대, LCP 2.1~2.4초를 꾸준히 유지하고 있습니다. 그때의 점검 순서를 그대로 풀어봅니다.
테마 선택 기준: 최소 CSS·자바스크립트 개수와 크기 확인법
가벼운 테마는 말로만 가벼운 게 아니라, “요청 수와 바이트”로 증명됩니다. 저는 설치 직후 아무 플러그인 없이 다음을 확인합니다.
- 크롬 개발자도구 → Network 탭에서 .css/.js 필터: 초기 로드에서 CSS 2~3개, JS 3~5개가 이상적입니다. 번들 하나가 100KB 넘으면 경계합니다.
- Coverage 탭(명령팔레트에서 “Show Coverage”): 사용되지 않는 코드가 50% 이상이면, 기능이 과한 테마일 가능성이 큽니다.
- Lighthouse에서 “Reduce unused CSS/JS” 경고 갯수: 경고가 많으면 커스텀 빌드가 어려울 수 있습니다.
실제 사례: 예전에 화려한 애니메이션 테마를 썼을 때 첫 화면에서 JS가 600KB 가까이 올라갔고, 모바일 LCP가 3.8초까지 튀었습니다. 블록 기반의 초경량 테마로 바꾸고 나니 요청 수가 43→21개로 줄었고, LCP가 바로 2.3초대로 떨어졌습니다. 저는 요즘 FSE(풀 사이트 에디팅) 기반의 깔끔한 기본 테마를 선호합니다. 업데이트가 빨라서 보안·성능 패치도 빠릅니다.
한글 웹폰트 로딩 전략: 서브셋, preconnect, font-display
한국어 폰트는 용량이 큽니다. 전체 글리프를 다 내려받으면 LCP와 CLS에 모두 불리합니다. 그래서 저는 다음 4가지를 고정 세팅으로 둡니다.
- 서브셋 분리: 본문·제목·숫자/영문을 나눠서 woff2로 제공. 자주 쓰는 범위는 별도 파일로 쪼개면 첫 페인트가 빨라집니다.
- preconnect: 폰트 CDN을 쓸 경우 DNS/TLS를 미리 연결합니다.
- preload: 첫 화면에서 실제로 쓰는 굵기 1~2개만 선별해 미리 불러옵니다.
- font-display와 size-adjust: 폴백 폰트로 전환될 때 줄바꿈이 뒤틀리지 않도록 크기를 보정합니다.
제가 쓰는 예시는 아래와 같습니다.
<link rel="preconnect" href="https://cdn.examplefont.com" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="/fonts/Pretendard-subset-regular.woff2" crossorigin>@font-face{
font-family:'Pretendard';
src:url('/fonts/Pretendard-subset-regular.woff2') format('woff2');
font-weight:400;
font-display:swap;
size-adjust:105%;
ascent-override:90%;
unicode-range: U+0020-007E, U+AC00-D7AF; /* 영문+한글 기본 */
}
body{
font-family:'Pretendard', 'Apple SD Gothic Neo','Malgun Gothic', system-ui, sans-serif;
}- tip: 제목에만 굵은 700을 쓰고, 본문은 400 하나로 제한해도 디자인이 깔끔합니다.
- tip: CDN을 쓰면 동일 출처 캐시 이점이 줄 수 있으니, 방문자 지역과 캐시 적중률을 보고 자체 호스팅도 비교하세요.
실제 경험으로, font-display를 block에서 swap으로 바꿨을 때 CLS가 0.11→0.03으로 줄었습니다. size-adjust까지 넣으니 줄바꿈 밀림이 거의 사라졌습니다.
이미지 세팅: AVIF/WEBP, srcset, lazyload 충돌 해결
이미지는 LCP의 절반 이상을 좌우합니다. 저는 글 발행 전에 다음 체크리스트로 통과시킵니다.
- 포맷: AVIF 우선, 실패 시 WEBP. 워드프레스 6.x는 WEBP 내장이 편합니다. 변환은 ShortPixel/EWWW/Imagify 중 하나만 사용합니다.
- 크기: 긴 변 1600px, 썸네일 768px 기준으로 리사이즈. 블로그 폭이 720~800px이면 과한 해상도는 낭비입니다.
- srcset/sizes: 테마가 제대로 넣어주는지 확인. 첫 화면의 대표 이미지에는 sizes=”(max-width: 800px) 100vw, 800px”.
- fetchpriority: 가장 위에 보이는 LCP 이미지는 fetchpriority=”high”를 직접 넣어줍니다.
예시:
<img src="hero.avif"
srcset="hero-800.avif 800w, hero-1200.avif 1200w, hero-1600.avif 1600w"
sizes="(max-width: 800px) 100vw, 800px"
fetchpriority="high"
decoding="async"
alt="가벼운 워드프레스 세팅">- lazyload 충돌: 워드프레스 코어가 이미 지연 로딩을 합니다. lazyload 플러그인을 또 쓰면 중복으로 지연되어 LCP가 늦어질 수 있어 하나는 꺼야 합니다. 저는 코어 lazyload만 남기고, LCP 이미지는 제외 처리합니다.
실전에서 썸네일 갤러리 페이지의 총 이미지 용량을 5.4MB→1.1MB로 줄였고, 모바일 LCP가 3.1초→1.9초로 개선됐습니다.
플러그인 덜어내기: 테마 내장 기능으로 대체
승인 전 단계에서는 “가벼움”이 곧 “신뢰 신호”였습니다. 저는 다음 순서로 플러그인을 덜어냅니다.
- 슬라이더 제거 → 커버 블록+그리드 패턴으로 대체
- SNS 아이콘 플러그인 제거 → 테마 네비게이션 블록의 소셜 링크 사용
- 관련 글 플러그인 제거 → 쿼리 루프로 카테고리·태그 기반 목록 구성
- 코드 삽입 플러그인 제거 → theme.json + 추가 CSS로 해결
실제 블로그에서 플러그인을 18개에서 9개로 줄이고, JS 크기가 420KB→170KB가 되었고, INP 지표도 안정화되었습니다. 기능은 덜어도, 독자가 필요한 것(검색, 카테고리 이동, 글 읽기)은 더 빨라졌습니다.
실제 측정법: PageSpeed, WebPageTest, 서버 위치 점검
저는 새 글을 올릴 때마다 아래 루틴으로 확인합니다.
- PageSpeed Insights: 모바일 기준 LCP, CLS, INP를 캡처해 누적 기록. “Largest Contentful Paint element”를 눌러 문제 요소를 바로 찾습니다.
- WebPageTest: First Byte, CDN 캐시, 차단된 요청 확인. 3회 테스트 평균으로 보며, 국내 타깃이면 서울 리전을 선택합니다.
- 서버 위치와 TTFB: 해외 서버+한국 방문자면 TTFB가 800ms 넘기도 합니다. 국내 리전 호스팅이나 역방향 프록시/CDN(예: Cloudflare)로 300~500ms로 묶어두면 본문 체감 속도가 좋아집니다.
- 크롬 성능 탭: 스크립트 장시간 태스크(>50ms)가 없는지 체크. 광고/분석 스크립트가 자주 걸리면 지연 로딩 후보입니다.
이 루틴으로 운영 중인 요리 블로그의 모바일 LCP를 평균 2.4초대, CLS 0.03 이하로 3개월 유지했고, 애드센스 자동 광고를 켠 뒤에도 지표가 크게 흔들리지 않았습니다.
광고 스크립트와 속도 균형: 지연 로딩과 예외 처리
애드센스는 비동기 로딩이지만, 첫 화면에 광고를 많이 두면 레이아웃이 밀리고 INP가 나빠집니다. 저는 다음 원칙을 지킵니다.
- 첫 화면 광고는 1개 이내. 접힘선 아래로 주력 배치.
- 스크립트 최적화 플러그인에서 adsbygoogle, gtag 관련은 “제외 목록”에 추가. 광고 코드 자체 변경은 금지합니다.
- 플레이스홀더 높이 고정: 광고 컨테이너에 min-height를 지정해 CLS를 막습니다.
- 지연 로딩 전략: 스크롤 200~300px 후 로딩 또는 사용자 첫 상호작용 이후 로딩. Perfmatters/Flying Scripts를 쓰면 “키워드 지연” 방식으로 구현이 쉽습니다(코드 변형 없이 로딩 타이밍만 조절).
예시 CSS:
.ads-slot {
min-height: 280px; /* 광고 사이즈에 맞춰 조정 */
}실전에서 접힘선 위 광고를 하나 줄이고, 지연 로딩을 적용했더니 CLS 0.09→0.02, INP 지연도 줄었습니다. 수익은 큰 변동이 없었고, 페이지 이탈률이 낮아져 오히려 RPM이 안정됐습니다.
이 흐름 그대로 적용하면, 무거운 테마와 큰 한글 폰트, 뒤죽박죽 이미지 세팅 때문에 흔들리던 코어 웹 바이탈을 안정권으로 가져오기 쉽습니다. 새로 시작하신다면 테마 요청 수와 폰트 서브셋부터 잡고, LCP 이미지에 fetchpriority를 주는 것만으로도 체감 속도가 확 달라집니다.
