WordPress 사용자라면 웹사이트 성능을 최우선으로 고려해야 합니다. 방문자에게 빠르게 로딩되는 페이지를 제공하면 검색 엔진 순위가 향상되고, 트래픽이 증가하며, 독자에게 쾌적한 사용자 경험을 선사할 수 있습니다.
웹사이트 최적화의 핵심은 Google PageSpeed Insights, GTmetrix, Pingdom Website Speed Test 같은 성능 벤치마킹 도구를 활용해 웹 페이지를 분석하는 것입니다. 이러한 서비스는 특정 URL의 성능을 평가하고, 페이지 용량과 로딩에 걸리는 시간을 알려줍니다.
성능 벤치마킹 도구는 단순히 페이지를 분석하는 데 그치지 않고, 로딩 시간을 개선하기 위해 무엇을 수정해야 하는지도 알려줍니다. 예를 들어 사용하지 않는 CSS 코드를 제거하거나 이미지 용량을 줄이라는 조언을 받을 수 있습니다.
그중 가장 자주 접하게 되는 권장 사항이 바로 WordPress에서 렌더링 차단 리소스 제거입니다. 이 글에서는 렌더링 차단 리소스가 무엇인지 설명하고, 이를 제거하여 웹사이트의 페이지 로딩 속도를 개선하는 방법을 소개합니다.
WordPress의 렌더링 차단 리소스란?
웹사이트 최적화의 궁극적인 목표는 방문자에게 페이지를 최대한 빠르게 전달하는 것입니다. 하나의 일반적인 페이지에는 다양한 요소가 포함되어 있습니다.
| 구조 및 디자인 | HTML과 CSS로 구성됨 |
| 콘텐츠 | 텍스트와 이미지 |
| 동적 콘텐츠 | 동영상, 슬라이더 등 동적 요소는 JavaScript로 표시됨 |
방문자가 웹사이트의 페이지에 접속하면 브라우저는 페이지 코드를 위에서부터 아래로 순차적으로 처리합니다. 이 과정을 흔히 "페이지 렌더링"이라고 부릅니다.
그런데 처리 중 외부 CSS나 JavaScript 파일을 불러오는 구문을 만나면, 브라우저는 해당 파일들을 모두 내려받고 처리할 때까지 페이지 렌더링을 멈춰야 합니다. 이처럼 렌더링 과정을 지연시키는 리소스를 "렌더링 차단(Render-Blocking) 리소스"라고 합니다.
렌더링 차단 리소스는 브라우저가 사용자에게 주요 콘텐츠를 표시하기까지 걸리는 시간을 늘립니다. 이는 Google이 FMP(First Meaningful Paint, 유의미한 첫 페인트)라고 부르는 중요한 성능 및 검색 순위 지표에 직접적인 영향을 미칩니다.
다만 텍스트와 이미지는 렌더링을 차단하지 않으며, 모든 CSS와 JavaScript 파일이 렌더링을 차단하는 것도 아닙니다. 일반적으로 용량이 큰 CSS·JavaScript 파일들이 페이지 렌더링 속도를 늦추는 주범입니다.
WordPress에서 렌더링 차단 리소스 확인하는 방법
WordPress의 렌더링 차단 리소스는 성능 벤치마킹 도구를 사용하면 손쉽게 확인할 수 있습니다. 분석하고 싶은 페이지의 URL을 입력하기만 하면 됩니다.
Google PageSpeed Insights는 렌더링 차단 리소스가 페이지 첫 페인트에 추가하는 총 시간을 표시해 줍니다. 그 아래에는 각 렌더링 차단 리소스의 URL과 파일 크기가 정리되어 있으며, 해당 리소스를 제거했을 때 페이지가 얼마나 더 빨라질 수 있는지도 함께 보여줍니다.
GTmetrix 역시 각 렌더링 차단 리소스의 목록과 파일 크기, 다운로드에 소요된 시간을 표시해 줍니다.
Pingdom Website Speed Test에는 렌더링 차단 리소스를 별도로 강조하는 섹션이 없지만, "File Requests" 영역을 통해 어떤 요소가 페이지를 느리게 만드는지 파악할 수 있습니다.
이 영역에서는 아이콘, 폰트, JavaScript 파일 같은 렌더링 차단 리소스를 확인할 수 있으며, 각 리소스의 파일 URL, 크기, 다운로드 시간이 표시됩니다. File Requests 영역은 로딩 시간을 늘리는 이미지를 찾는 데에도 유용합니다.
WordPress는 웹사이트 전반에서 서로 다른 CSS와 JavaScript 파일을 불러오기 때문에, 모든 렌더링 차단 리소스를 놓치지 않으려면 여러 페이지에 대해 성능 테스트를 진행하는 것이 좋습니다. 예를 들어 홈페이지, 블로그 목록, 블로그 글, 소개 페이지, 연락처 페이지 등 핵심 페이지들을 각각 테스트해 보세요.
핵심(Critical) 리소스 식별하기
어떤 리소스가 웹 페이지의 첫 화면을 표시하는 데 반드시 필요하다면 그것이 바로 '핵심 리소스'입니다. 나머지는 모두 비핵심(non-critical) 리소스로 분류됩니다.
핵심 리소스를 가장 쉽게 파악하는 방법 중 하나는 Chrome DevTools의 Coverage 탭을 활용하는 것입니다. 이 탭은 초기 페이지 로딩을 올바르게 표시하는 데 실제로 필요한 코드의 비율을 정확히 보여주며, 핵심 스타일은 초록색으로, 비핵심 스타일은 빨간색으로 표시됩니다.
아래 스크린샷에서 WordPress.org의 경우 렌더링 차단 CSS·JavaScript 파일에 포함된 코드 상당 부분이 실제로 활용되지 않는 것을 확인할 수 있습니다. 많은 WordPress 사이트에서는 상황이 더 심각해서, 커버리지 테스트 결과 파일 전체의 100%가 사용되지 않는 경우도 여러 개 발견됩니다.
인라인 호출로 렌더링 차단 CSS 제거하기
Google은 렌더링 차단 리소스에 담긴 모든 핵심 코드를 HTML 페이지 안의 인라인 호출로 옮길 것을 권장합니다. 페이지 첫 화면에 필수적인 스타일은 head 섹션 안의 style 블록으로 정의할 수 있고, 핵심 JavaScript 함수는 script 태그를 통해 페이지 내에서 인라인으로 호출할 수 있습니다.
그러나 테마와 플러그인을 통해 CSS·JavaScript가 추가되는 WordPress 같은 동적 플랫폼에서는 핵심 스타일을 일일이 수작업으로 옮기는 것이 비현실적일 수 있습니다. 그래서 많은 WordPress 사용자가 NitroPack이나 Critical CSS 같은 서비스를 활용해 핵심 스타일시트를 자동으로 추출하고 head 섹션에 인라인으로 삽입합니다.
웹사이트 스타일이 작은 CSS 파일들로 나뉘어 있다면, WordPress 성능 플러그인인 Asset CleanUp을 사용해 작은 스타일시트의 스타일을 자동으로 인라인 처리할 수 있습니다.
Async & Defer로 렌더링 차단 JavaScript 제거하기
WordPress의 렌더링 차단 JavaScript 리소스는 Async와 Defer라는 두 가지 기법으로 제거할 수 있습니다. 두 방식 모두 브라우저가 백그라운드에서 CSS·JavaScript 파일을 내려받는 동안에도 페이지 렌더링을 계속 진행할 수 있게 해줍니다.
페이지에 따라 Async가 더 적합할 수도 있고 Defer가 더 적합할 수도 있으므로, 두 기법을 모두 테스트해 어느 쪽이 더 좋은 결과를 내는지 확인하는 것이 좋습니다. 어느 방법을 선택하든 페이지 로딩 시간은 단축됩니다.
| Async | 페이지가 렌더링되는 동안 파일을 다운로드하고, 다운로드가 완료되는 즉시 실행 |
| Defer | 페이지가 렌더링되는 동안 파일을 다운로드하고, 렌더링이 끝난 후 순차적으로 실행 |
Async와 Defer는 WordPress 성능 플러그인을 통해 사이트 전체에 일괄 적용할 수 있습니다.
필자의 개인 블로그에서는 Async JavaScript 플러그인을 사용해 페이지의 JavaScript를 defer 처리하고 있습니다. Autoptimize 개발자 Frank Goossens이 만든 이 플러그인은 비핵심 JavaScript 파일에 Async와 Defer를 적용할 수 있게 해주며, jQuery 파일에는 별도의 설정을 지정하는 옵션도 제공합니다.
또한 플러그인의 설정 마법사가 GTmetrix에서 여러 차례 테스트를 진행하며 사이트에 가장 적합한 설정을 찾아줍니다.
필자가 Async JavaScript를 선택한 이유는 사이트 전체에 Async 또는 Defer를 자동으로 적용해 주기 때문입니다. 이는 WordPress에서 렌더링 차단 리소스를 제거하는 가장 간단한 방법임이 분명하지만, HTTP/2 Push Preload 플러그인을 사용하면 더 좋은 결과를 얻을 수도 있습니다.
Chrome의 커버리지 도구나 GTmetrix, Google PageSpeed Insights 같은 성능 벤치마킹 서비스로 WordPress 사이트의 렌더링 차단 리소스를 파악했다면, HTTP/2 Push Preload를 사용해 파일 단위로 Async와 Defer를 적용할 수 있습니다.
파일마다 Async와 Defer의 성능을 직접 테스트할 의향이 있다면, 각 리소스에 가장 적합한 기법을 찾아낼 수 있습니다. 이렇게 하면 페이지 로딩 시간을 더욱 크게 단축할 수 있습니다.
어떤 WordPress 플러그인으로 Async와 Defer를 적용하든, 적용 후에는 반드시 웹사이트 디자인을 점검하여 아무것도 깨지지 않았는지 확인하세요.
이 주제에 대한 더 자세한 내용이 궁금하다면, "WordPress에서 Defer와 Async로 JavaScript 파싱 지연시키는 방법" 관련 글도 함께 읽어보시기 바랍니다.
마무리
WordPress의 렌더링 차단 리소스는 페이지 로딩 시간을 크게 늘립니다. 또한 모든 렌더링 차단 리소스가 다운로드되고 실행될 때까지 방문자에게 빈 화면만 보이기 때문에, 웹사이트의 사용자 경험에도 악영향을 미칩니다.
Chrome의 커버리지 도구와 Google PageSpeed Insights, GTmetrix 같은 서비스를 활용하면 렌더링 차단 리소스를 쉽게 찾아낼 수 있습니다. 이후 Async JavaScript, HTTP/2 Push Preload 같은 WordPress 플러그인으로 해당 리소스를 제거하면 됩니다.
읽어주셔서 감사합니다.
Kevin 드림