워드프레스 웹사이트 성능 최적화의 꽃인 Lighthouse 점수, 그중에서도 가장 까다로운 CLS 점수(Cumulative Layout Shift)를 완벽하게 잡은 경험을 공유합니다.
특히 무료 플러그인을 조합해 사용하면서 유료 기능의 부재를 기술적으로 극복하고 싶은 분들에게 이 글이 명확한 가이드가 되길 바랍니다.
1. 문제 상황: “이미지가 뜨는 순간, 본문이 도망간다”
워드프레스에서 Meow Gallery(무료 버전)와 EWWW Image Optimizer를 함께 사용하다 보면 기묘한 현상을 마주하게 됩니다. 페이지가 로드될 때 본문 텍스트가 상단에 있다가, 갤러리 이미지가 뒤늦게 나타나는 순간 텍스트가 아래로 ‘툭’ 떨어지는 현상입니다.
원인 분석
- Meow Gallery의 한계: 무료 버전은 이미지가 로드되기 전 자리를 잡아주는 ‘Skeleton Loading’ 기능을 제공하지 않습니다. (Pro 전용)
- EWWW의 최적화 방식: 지연 로딩(Lazy Load)을 위해 실제 이미지 대신 1×1 픽셀 크기의 투명 GIF를 먼저 뿌립니다.
- 브라우저의 오해: 브라우저는 이 1×1 픽셀을 보고 “이 영역은 높이가 거의 0이구나”라고 판단합니다. 이후 이미지가 로드되며 공간을 차지하기 시작하면 주변 레이아웃을 밀어내며 CLS 점수를 치솟게 만듭니다.
2. 시도와 실패: “코드의 늪에 빠지다”
처음에는 플러그인의 로직을 수정하려고 다양한 ‘삽질’을 감행했습니다.
- PHP 필터 적용: EWWW의 플레이스홀더를 고정 규격의 SVG로 바꾸려 했으나, 자바스크립트 로딩 방식(
data-eio="j")과 충돌하며 실패했습니다. - JS 패치 시도: 내부 변수를 가로채려 했지만, 이미지 태그의
srcset="... 1w"속성이 브라우저에게 “이 이미지는 원래 1픽셀이야”라고 강하게 주장하는 바람에 이미지가 계속 찌그러져 보였습니다. - Flying Scripts 활용: 스크립트 실행을 지연시켜 보았지만, CLS 점수는 좋아져도 정작 이미지가 늦게 뜨거나 아예 안 뜨는 등 사용자 경험(UX)이 심각하게 저하되었습니다.
3. 최종 해결책: “복잡함을 이기는 단순한 CSS”
결국 정답은 백엔드가 아닌 브라우저 렌더링 원리에 있었습니다. 플레이스홀더를 억지로 수정하는 대신, 갤러리 컨테이너 자체에 “여기에 이미지가 들어올 테니 이만큼 자리를 비워둬!”라고 선언하는 것입니다.
단계별 진화: 고정 높이에서 반응형 비율로
Step 1. 컨테이너 높이 강제 예약
가장 먼저 시도한 것은 갤러리 설정값인 600px을 컨테이너에 박아버리는 것이었습니다.
.mgl-root {
min-height: 600px !important;
}결과는 성공! 하지만 문제가 생겼습니다. 모든 갤러리가 600px이 되면서 본문 중간에 있는 작은 갤러리들 아래에 거대한 공백이 생겼죠.
Step 2. 첫 번째 갤러리만 핀포인트 타겟팅
페이지 상단의 ‘메인 이미지(Hero 영역)’만 잡기 위해 워드프레스 본문 구조를 분석해 선택자를 정교화했습니다.
/* 본문 최상단 첫 번째 블록 안의 갤러리만 선택 */
.entry-content > div:first-of-type .mgl-root {
min-height: 600px !important;
}Step 3. 모바일 대응을 위한 비율(Aspect Ratio) 예약 (최종안)
고정된 600px은 모바일 기기에서 광활한 여백을 남깁니다. 화면 너비가 줄어들면 높이도 자동으로 줄어들어야 합니다. 최신 CSS 속성인 aspect-ratio가 이 고민을 한 번에 해결해 줍니다.
.entry-content > div:first-of-type .mgl-root {
min-height: auto !important; /* 고정 높이 해제 */
aspect-ratio: 800 / 600; /* 4:3 비율 예약 */
width: 100%; /* 너비에 따라 높이가 자동 계산됨 */
}
이렇게 하면 데스크탑에서는 600px 근처를 유지하고, 모바일에서는 줄어든 너비에 맞춰 높이가 가변적으로 변하면서도 공간 예약은 완벽하게 유지됩니다.
4. 결과 및 교훈: “CLS 점수 만점 달성”
최종 코드를 적용한 후 Lighthouse를 돌린 결과, CLS 점수는 0으로 수렴했고 성능 점수는 만점(100점)을 기록했습니다.
오늘의 교훈
웹 성능 최적화는 때로 복잡한 서버 로직이나 유료 플러그인의 화려한 기능보다, 브라우저가 이해하기 가장 쉬운 CSS 한 줄이 더 강력한 도구가 된다는 점입니다. 유료 버전의 스켈레톤 기능이 부럽지 않은 완벽한 반응형 CLS 점수 방어 전략이었습니다.