케이스 스터디: April Moto가 WordPress 사이트를 최적화한 방법

2021년, April Moto는 자사 WordPress 사이트의 웹 성능을 최적화하기 위해 저에게 연락을 주었습니다. 기본적인 합성 테스트 도구 기준으로 사이트 점수는 좋지 않았습니다. Core Web Vitals는 통과하지 못했고 FCP, LCP, Total Blocking Time에 문제가 있었습니다.

저의 WordPress 웹 성능 최적화 스택은 주로 다음 3개의 플러그인으로 구성됩니다:

• Imagify ↗: 제가 가장 선호하는 이미지 압축 도구이자 대량 WebP 변환 도구
• WP Rocket ↗: CSS와 JS 파일의 미니파이, 이미지 lazy-loading 등 다양한 웹 성능 최적화를 적용할 수 있음
• Perfmatters ↗: 사이트 전체, 특정 택소노미, 나아가 개별 페이지 단위로까지 로드 리소스를 정교하게 제어할 수 있는 가벼운 플러그인

이미지 최적화

웹 성능 최적화에서 가장 손쉬운 부분은 WordPress 이미지 최적화입니다. Imagify 같은 플러그인을 사용하면 이미 업로드된 모든 이미지는 물론, 이후 업로드될 이미지까지 일괄적으로 최적화할 수 있습니다. 최적화는 실시간으로 수행되며, 사용자에게는 완전히 투명하게 이뤄집니다.

Imagify는 또한 이미지를 WebP 형식으로 변환해, 사람의 눈으로는 인지하기 어려운 품질 손실 없이 최대 30%까지 용량을 절감합니다. 사용자 지원을 최적으로 하기 위해, Imagify는 사이트의 URL을 재작성하여 WebP가 존재하면 해당 형식을 제공하고, 호환되지 않는 브라우저의 경우 원본 형식을 유지합니다.

WP Rocket 구성

WP Rocket은 매우 다양한 옵션을 제공합니다. 정기적으로 사용하는 WordPress 웹 성능 최적화 설정을 별도의 글로 자세히 다룰 예정이지만, 각 사이트와 테마는 모두 다르므로 환경에 맞춘 설정과 섬세한 튜닝이 중요하다는 점을 항상 염두에 두셔야 합니다.

이미지 Lazy-loading

WP Rocket은 미디어에 대해 매우 간단한 lazy-loading 기능을 제공합니다. 두 번의 클릭으로 사이트의 모든 이미지와 April Moto 페이지에 있는 YouTube iframe에 lazy-loading을 적용할 수 있습니다. 이 옵션은 로드되는 이미지 수를 크게 줄여주지만, 보다 완성도 높은 최적화를 통해 쉽게 보완할 수 있는 단점도 있습니다.

기본적으로 사이트 내 모든 이미지가 lazy-load되어 있었는데, 이는 LCP 개선에 최적이 아닙니다. 브라우저는 페이지 렌더링이 시작되기 전까지 어떤 이미지를 먼저 내려받아야 하는지 알 수 없기 때문입니다. 이 문제를 해결하기 위해, 이미지 제외 필드를 사용하여 퍼스트 뷰(above-the-fold)에 있는 이미지를 식별하는 규칙을 정의했습니다:

• 먼저, 로고 파일 이름을 찾아 lazy-loading 제외 목록에 추가했습니다.
• 게시물 대표 이미지가 고유 클래스를 가지고 있어, 적절한 선택자를 통해 사이트의 모든 게시물 대표 이미지를 제외할 수 있었습니다.

💡 이 최적화 과정에서, footer에도 표시되는 로고가 Google Pagespeed에서 lazy-load 가능 대상으로 표시되는 것을 확인했습니다. 이는 오탐입니다. 로고는 header에서 이미 로드되므로 footer에서 다시 표시될 때는 사용자 캐시에 있어 한 번만 다운로드됩니다. April Moto의 테마가 커스텀 개발이었기에, .no-lazy라는 CSS 클래스를 정의해 퍼스트 뷰 상의 모든 미디어에 적용하여 이 최적화의 지속 가능성을 확보했습니다.

최적화된 CSS 및 JS 에셋

WP Rocket은 CSS와 JS 리소스 최적화도 지원합니다. 몇 번의 클릭으로 사이트의 CSS와 JS 리소스를 미니파이하고, 모든 스크립트에 defer 속성을 적용해 사용자에게 페이지 렌더링을 차단하지 않도록 했습니다.

더 나아가 JavaScript 실행을 지연시키는 옵션을 사용해 사용자의 프로세서를 가볍게 하고 April Moto의 Total Blocking Time을 줄였습니다. 이 설정을 통해 파일은 사용자가 페이지에서 마우스 이동, 클릭, 키보드 입력 등 상호작용을 수행한 뒤에야 실행됩니다.

WordPress 필터의 활용

이상의 조언들은 비교적 단순한 설정에서 출발했지만, 각 환경에 맞춰 적용하려면 엄격함과 시간이 필요합니다. 직접 적용하다 보면 몇 번은 사이트가 깨질 수도 있습니다. 그럼에도 이러한 조언들은 기술적 배경지식이 없어도 접근할 수 있습니다.

다음의 조언들로, 저는 April Moto의 WordPress 사이트 웹 성능을 한 단계 더 끌어올렸습니다.

대표 이미지 프리로드

페이지 썸네일과 get_the_post_thumbnail_image 필터를 활용하면, 테마의 functions.php(또는 전용 WordPress 플러그인)에서 아래 코드를 추가해 페이지의 대표 이미지를 프리로드할 수 있습니다.

add\_action('wp\_head’, 'pauld\_preload\_main\_image', 11); function pauld\_preload\_main\_image() { if (get\_the\_post\_thumbnail\_url()) { echo ''."\
"; } } 

CSS 코드 최적화

성능 최적화에 매우 유용한 기본 필터 2개가 있습니다. 첫 번째는 사용된 Gutenberg 블록의 CSS만 로드하도록 합니다:

add\_filter('should\_load\_separate\_core\_block\_assets', '\_\_return\_true'); 

또한 styles_inline_size_limit 값을 조정하면, 인라인 CSS 대신 외부 CSS로 전송되도록 강제하여 WP Rocket의 캐시 및 최적화 이점을 활용할 수 있습니다.

add\_filter('styles\_inline\_size\_limit', '\_\_return\_zero'); 

사용자 리소스 최적화

사용자의 네트워크 대역폭과 디바이스 성능이 과도하게 소모되면 사이트 성능이 제한됩니다. 사용자 리소스가 포화되지 않도록, 페이지 이용에 꼭 필요한 리소스만 제공하는 것이 권장됩니다.

Perfmatters를 사용해 사용되지 않는 페이지에서 특정 리소스를 제외할 수 있었습니다. 예를 들어, 문의 양식의 CSS와 JS가 사이트 모든 페이지에서 로드되고 있었습니다. 또한 표를 표시하는 플러그인의 리소스는 해당 기능이 사용되는 택소노미 페이지에서만 로드되도록 했습니다.

Perfmatters는 매우 미세한 수준의 설정을 지원합니다. 사이트 전체에서 리소스를 제거할 수도 있고, 페이지별로 선택적으로 적용할 수도 있습니다.

폰트 최적화

April Moto는 외부 도메인에서 폰트를 호출하고 있었습니다. 이는 웹 성능 측면에서도, RGPD 준수 ↗) 측면에서도 바람직하지 않습니다.

폰트를 로컬로 임포트하고 적절한 preload를 수행한 결과, Google Pagespeed 기준 텍스트 표시 시간이 약 700ms 개선되어 FCP가 큰 폭으로 향상되었습니다!

서버 구성 최적화

서버와의 통신은 웹 성능에서 매우 중요한 요소입니다. April Moto는 인포저 렌탈(관리형) 공급업체와 협업하고 있습니다. WordPress 웹 성능 최적화 서비스를 제공할 때는 항상 제가 일하는 클라이언트의 파트너 및 공급업체와의 커뮤니케이션이 포함됩니다.

HTTP/2 프로토콜 지원

HTTP/2는 2014년에 출시되었고, 오늘날 호환 사용자 비율은 약 95%에 달합니다. 이 네트워크 프로토콜의 핵심 장점은 HTTP/1이 한 번에 하나의 파일만 다운로드하는 데 비해, 여러 파일을 병렬로 다운로드할 수 있다는 점입니다.

HTTP/2를 도입한 결과, April Moto의 Pagespeed 점수는 92에서 99/100으로 도약했습니다.

Brotli 압축 알고리즘 적용

Brotli는 사이트의 리소스와 텍스트 파일 로딩 시간을 가속화하는 압축 알고리즘입니다. Facebook과 Dropbox에 따르면, Brotli는 파일 크기를 약 14~21%까지 줄여줍니다.

서버에서 이 두 가지 간단한 최적화를 적용하자, Pagespeed 점수가 약 13포인트 상승했습니다!

WordPress 웹 성능 최적화 성과

이 모든 최적화를 사이트에 적용한 결과, April Moto ↗의 WordPress 웹 성능 최적화로 Pagespeed 점수가 40에서 99로 향상되었고, 특히 28일 후 사이트 전 페이지에서 Google의 실데이터 CrUX가 통과되었습니다.

최적화 몇 주 후, 클라이언트는 홈페이지 상단에 동영상을 추가한 뒤 페이지 점수가 하락했다며 조언을 구해왔습니다. 빠르게 분석해 보니, 동영상 포맷을 최적화할 여지가 있었고 무엇보다 플레이어에 thumbnail 속성으로 썸네일이 설정되어 있지 않았습니다.

이 두 가지 수정으로 WordPress 사이트의 Pagespeed 점수가 다시 향상되었고, 성능 점수가 장기적으로 안정적으로 유지되도록 할 수 있었습니다.

4년 뒤 진행한 업데이트

2025년 말, Nicolas는 다시 저에게 의뢰했습니다. 사이트는 크게 변화했습니다. 새로운 CDN, 플러그인과 WordPress의 신규 버전, 새로운 페이지 템플릿 등이 도입되었고, April Moto는 모든 지표가 양호한지 점검하길 원했습니다.

재감사를 거친 뒤, HTTP/3 프로토콜 활성화나 speculation rules 추가 같은 최신 최적화는 물론, 전환 퍼널 최적화까지 제안할 수 있었습니다.

권고안을 적용한 이후, April Moto는 Maaf, Allianz 등 업계의 거대 경쟁사를 제치고 프랑스 모터사이클 보험 시장에서 1위를 달성했습니다.

실제 사이트 방문 사용자 데이터에 따르면:

• 사용자 92%가 2.5초 이내에 페이지를 로드했습니다
• 사용자 상호작용(클릭, 키보드 입력 등)은 95.5%의 사용자에게 즉각적으로 처리되었습니다

이 조언을 직접 적용하기 어렵거나, 웹 성능 최적화를 전문가에게 맡기고 싶으신가요? 언제든지 연락해 주세요. WordPress 웹 성능 관련 모든 과제를 기꺼이 함께 해결하겠습니다!