WordPress에서 Defer·Async로 자바스크립트 파싱을 지연하는 방법 총정리

빠르게 로딩되는 워드프레스 사이트는 방문자의 사용자 경험 향상, 검색 엔진에서의 노출 개선, 그리고 유기적 트래픽 증가에 큰 도움을 줍니다.

하나의 웹 페이지는 HTML, CSS, 자바스크립트, 이미지로 구성되어 있으며, 페이지 로딩 시간을 단축하려면 각 요소를 모두 최적화해야 합니다. 특히 이미지는 페이지 용량에 가장 큰 영향을 미치는 요소 중 하나이므로, 워드프레스 이미지 최적화 플러그인을 활용해 파일 크기를 줄이는 것이 중요합니다.

페이지 성능을 한층 더 끌어올리고 싶다면 워드프레스에서 자바스크립트 파싱을 지연(defer)하는 방법을 활용해 보세요. 이는 브라우저에게 자바스크립트를 불러오기 전에 먼저 페이지 콘텐츠와 이미지를 표시하도록 지시하는 것입니다. 이 방식을 적용하면 폼이나 슬라이더 같은 자바스크립트 요소가 몇 초 늦게 로딩될 수 있지만, 전체 페이지 로딩 속도가 눈에 띄게 빨라지므로 감수할 만한 대가입니다.

자바스크립트 코드는 Defer와 Async라는 두 가지 기법을 사용해 나중에 실행할 수 있습니다. 두 방식 모두 주요 워드프레스 캐싱 플러그인에서 지원하지만, 전용 솔루션을 사용하면 어떤 자바스크립트 파일을 나중에 로딩할지 좀 더 세밀하게 제어할 수 있습니다.

이 글에서는 자바스크립트 파일 로딩을 지연할 때 얻을 수 있는 장점을 설명하고, 작업을 간편하게 해주는 유용한 워드프레스 플러그인 5가지를 소개합니다.

처음부터 끝까지 읽으시면 주제를 온전히 이해할 수 있습니다. 다만 초보자분들이라면 이 글에서 딱 한 가지만 기억하세요. 바로 Defer와 Async만으로도 웹사이트의 페이지 로딩 속도를 크게 개선할 수 있다는 점입니다.

Defer와 Async로 워드프레스 자바스크립트 파싱을 지연하는 다양한 방법

자바스크립트는 버튼, 폼, 미디어 갤러리, 오디오, 동영상, 카운트다운 타이머, 소셜 미디어 타임라인 등을 표시하는 데 사용되며, 워드프레스 사이트의 핵심 구성 요소로 자리 잡았습니다.

하지만 안타깝게도 자바스크립트는 웹 페이지가 느리게 로딩되는 주요 원인이기도 합니다. 브라우저는 페이지의 HTML 마크업을 계속 분석하기 전에 각 스크립트를 멈추고 다운로드한 후 실행해야 하기 때문입니다.

파싱(parsing)은 브라우저가 페이지의 코드를 분석하고 실행 가능한 형태로 변환하는 과정을 말합니다. 이 과정을 멈추게 하는 코드를 "렌더링 차단(Render-Blocking)" 리소스라고 부르며, 방문자에게 페이지를 그려주는(rendering) 작업을 지연시키기 때문입니다.

렌더링 차단 리소스는 워드프레스 사이트가 느려지는 흔한 원인입니다. 중요 CSS(Critical CSS)를 인라인으로 표시해 렌더링 차단을 막을 수 있지만, Defer나 Async를 사용해 자바스크립트 로딩을 뒤로 미루는 것이 자바스크립트 코드가 페이지 렌더링을 방해하는 것을 예방하는 더 좋은 방법입니다.

또한 사용하지 않는 자바스크립트 코드를 제거하고 자바스크립트 실행 시간을 줄이는 것도 좋은 습관입니다. 이를 위한 방법 중 하나가 압축(Minification)인데, 각 자바스크립트 파일에서 공백과 불필요한 코드를 제거해 파일 크기를 줄이는 과정입니다.

Google PageSpeed Insights나 GTmetrix 같은 웹사이트 벤치마킹 서비스가 가장 중요하게 평가하는 지표 중 하나가 FCP(First Contentful Paint)입니다. FCP는 첫 번째 콘텐츠가 방문자에게 표시되기까지 걸리는 시간을 의미합니다. Google은 FCP가 0~1.8초면 '좋음', 1.8~3초면 '보통', 3초를 넘으면 '느림'으로 분류합니다.

웹사이트 벤치마킹 서비스에 페이지 URL만 입력하면 해당 페이지의 렌더링을 막고 있는 자바스크립트 및 CSS 파일을 확인할 수 있습니다. 아래 스크린샷에서 볼 수 있듯이 렌더링 차단 CSS와 자바스크립트 파일은 다운로드에 몇 초씩 걸릴 수 있으므로, 이런 리소스를 제거하면 페이지가 훨씬 빨리 로딩됩니다.

렌더링 차단 자바스크립트 파일을 없애는 가장 효과적인 방법은 defer와 async 속성을 사용하는 것입니다. 이 불리언(boolean) 속성은 SRC 속성으로 외부 파일을 호출할 때만 script HTML 요소와 함께 사용할 수 있습니다.

<script src="javascript.js"></script>

일반 자바스크립트 파일

<script defer src="javascript.js"></script>

Defer가 적용된 자바스크립트 파일

<script async src="javascript.js"></script>

Async가 적용된 자바스크립트 파일

HTML script 요소에 defer 또는 async 속성을 추가하면, 브라우저는 페이지를 파싱하는 동시에 해당 파일을 다운로드합니다. defer의 경우 페이지 파싱이 완료된 후에 파일이 실행됩니다.

반면 async 속성은 비동기 방식으로 동작하여 파일이 다운로드되는 즉시 실행됩니다. 따라서 브라우저가 파일을 실행하기 위해 잠시 HTML 파싱을 멈추기 때문에, async를 적용한 페이지의 전체 파싱 시간은 약간 더 길어질 수 있습니다.

참고로 defer와 async를 함께 지정하면 브라우저는 async를 우선 적용합니다.

반드시 이해해야 할 중요한 표준이 문서 객체 모델(DOM, Document Object Model)입니다. DOM은 XML 파일이나 HTML 페이지 같은 문서 전체를 하나의 객체로 표현하며, head, body, 헤더 같은 주요 요소들은 DOM의 가지(branch)라고 볼 수 있습니다.

자바스크립트 파일이 다른 파일이나 DOM 자체의 정보를 필요로 하지 않는다면, 페이지의 중요한 요소들이 더 빨리 표시되도록 async 방식을 사용하는 것이 좋습니다. 단, 아직 로딩되지 않은 정보를 요청하는 경우 웹사이트에 오류가 발생할 수 있으니 주의해야 합니다.

반대로 자바스크립트 파일이 다른 정보를 필요로 한다면, 파일이 실행되기 전에 모든 콘텐츠가 올바르게 로딩되는 것을 보장하는 defer가 더 안전한 선택입니다.

defer와 async의 궁극적인 목표는 페이지 렌더링 차단을 줄이는 것이며, 어느 방법을 선택하든 페이지 로딩 속도에서 상당한 개선을 경험하게 될 것입니다.

defer와 async를 언제 어떻게 사용해야 하는지 더 자세히 알고 싶다면 Zell Liew의 글 "How and when to use Async and Defer attributes"를 읽어보시길 권합니다.

워드프레스 플러그인으로 자바스크립트 파싱을 지연하는 방법

웹사이트의 대부분의 자바스크립트 호출은 워드프레스 테마와 활성화된 플러그인에서 발생합니다. 따라서 모든 script 요소에 일일이 defer와 async 속성을 수동으로 추가하는 것은 비현실적입니다.

성능 최적화 워드프레스 플러그인을 사용해 자바스크립트 파싱을 지연하고, 사이트 전체에 defer 또는 async를 적용하는 과정을 간소화하는 것이 현명한 방법입니다.

단, 잘못된 설정값을 선택하면 웹사이트 디자인에 문제가 생길 수 있음을 유의하세요. 예를 들어 올바른 설정을 고르지 않거나 문의 폼 관련 파일을 최적화 대상에서 제외하지 않으면, 문의 폼이 제대로 표시되지 않을 수 있습니다.

따라서 자신의 웹사이트에 맞는 최적의 설정과 성능을 찾으려면 시행착오가 필요합니다.

• 웹사이트 백업 – 최적화 플러그인을 활성화하기 전에 반드시 웹사이트를 백업하세요.
• 성능 테스트 – 웹사이트의 핵심 페이지 성능을 테스트하고, 최적화 설정을 변경할 때마다 다시 테스트하세요.
• 웹사이트 점검 – 설정 변경 후 웹사이트의 어떤 부분도 깨지지 않았는지 확인하세요.

자바스크립트 파싱을 지연하는 과정에서 심각한 문제가 발생하면 플러그인의 기본 설정으로 되돌리세요. 웹사이트와 잘 맞지 않는다면 플러그인을 삭제하는 것도 방법입니다.

1. Autoptimize

Autoptimize는 자바스크립트, CSS, HTML을 통합(aggregation)하고 압축(minify)할 수 있는 다재다능한 워드프레스 최적화 솔루션입니다. 최적화된 콘텐츠는 성능 향상을 위해 캐싱되는데, 이 캐시가 순식간에 커질 수 있으므로 Autoclear Autoptimize Cache 플러그인을 함께 사용해 캐시를 자동으로 비우는 것을 권장합니다.

Autoptimize는 파일 통합 기능으로 유명하지만, 자바스크립트 파일의 파싱을 지연시켜 렌더링 차단을 방지하는 데에도 활용할 수 있습니다. 자바스크립트와 CSS 코드를 인라인으로 표시할 수도 있으며, 이미지, Google Fonts, 이모지 등을 위한 추가 최적화 옵션도 제공합니다.

AUTOPTIMIZE 다운로드

2. Async JavaScript

Autoptimize 개발자가 만든 Async JavaScript는 웹사이트 전체의 자바스크립트 파일에 async와 defer를 적용할 수 있게 해줍니다. 모든 자바스크립트 파일을 세세하게 제어할 수 있으며, jQuery, 특정 자바스크립트 파일, 워드프레스 플러그인, 워드프레스 테마를 제외할 수도 있습니다. 원한다면 어떤 자바스크립트 파일에는 async를, 어떤 파일에는 defer를 적용할지 정확히 지정할 수 있습니다.

Async JavaScript의 가장 매력적인 기능 중 하나는 셋업 마법사입니다. GTmetrix에서 웹사이트에 가능한 모든 설정 조합에 대해 성능 테스트를 자동으로 진행해 줍니다. 각 설정별로 웹사이트가 얼마나 빨라지는지 정확히 보여주므로 시간을 크게 절약할 수 있지만, 매번 웹사이트를 직접 확인해서 어떤 기능도 깨지지 않았는지 검증하는 것을 잊지 마세요.

ASYNC JAVASCRIPT 다운로드

3. Perfmatters

Perfmatters는 수십 가지 독특한 성능 기능을 자랑하는 프리미엄 워드프레스 성능 툴박스입니다. 연 $24.95부터 시작하며, 웹사이트의 모든 자바스크립트 파일(전체 JS 파일)의 파싱을 지연할 수 있습니다. jQuery 파일도 지연 대상에 포함할 수 있고, 특정 자바스크립트 파일을 제외할 수도 있습니다. 또 하나 멋진 기능은 '자바스크립트 지연(Javascript Delay)'인데, 이를 사용하면 사용자 상호작용이 있을 때만 자바스크립트 파일을 로딩합니다.

Perfmatters는 보안과 성능 개선을 위해 워드프레스 코어 기능을 비활성화하는 데도 사용할 수 있습니다. 그뿐만 아니라 커스텀 로그인 URL 정의, 콘텐츠 프리로드(preload), 이미지 레이지 로딩(lazy load), Google Analytics 연동, Google Fonts 최적화 등 다양한 기능을 제공합니다.

개인적으로 가장 마음에 드는 기능은 스크립트 매니저입니다. 웹사이트의 모든 페이지별로 자바스크립트와 CSS 파일을 활성화하거나 비활성화할 수 있습니다. 워드프레스 개발자들은 실제로 몇 개 페이지에서만 필요함에도 불구하고 사이트 전체에서 자바스크립트와 CSS 파일을 로딩하는 나쁜 습관이 있는데, 이 기능을 활용하면 페이지 용량을 크게 줄일 수 있습니다.

공식 웹사이트 방문

4. Asset CleanUp

Asset CleanUp은 자바스크립트와 CSS 파일을 압축(minify), 결합(combine)하고 파싱을 지연할 수 있는 기능이 풍부한 워드프레스 최적화 플러그인입니다. CSS/JS 매니저는 Perfmatters의 스크립트 매니저와 비슷하게 작동하며, 특정 파일이 특정 페이지에서 로딩될지 지정할 수 있습니다. 또한 워드프레스 코어 설정 비활성화, HTML 코드 정리, Google Fonts 최적화 등의 기능도 갖추고 있습니다.

Asset CleanUp Pro 단일 라이선스는 연 €42.36입니다. Pro로 업그레이드하면 코드를 인라인으로 배치하고 페이지별로 자바스크립트 파일에 async와 defer를 지정할 수 있습니다. 플러그인 매니저도 잠금 해제되며, 사이트 전반에서 에셋이 로딩되는 방식을 더욱 세밀하게 제어할 수 있습니다.

ASSET CLEANUP 다운로드 / ASSET CLEANUP PRO

5. HTTP/2 Push Preload

HTTP/2 Push Preload는 enqueue 로딩 함수를 사용해 HTTP/2를 지원하는 서버에서 자바스크립트와 CSS 파일을 푸시(push)하고 프리로드(preload)할 수 있게 해줍니다. 모든 파일에 일괄 적용할 수도 있고, 각 리소스를 개별적으로 설정할 수도 있습니다. 리소스 유형에는 script, style, audio, embed, fetch, font, image, object, video가 포함됩니다.

자바스크립트 파일의 URL을 입력하면 async, defer 또는 제거(remove) 중 선택할 수 있습니다. HTTP/2 Push Preload에서는 이 설정이 언제 적용될지 규칙을 정의할 수도 있습니다. 모든 페이지, 모바일 또는 데스크톱, 특정 글과 페이지, 카테고리, 검색 페이지, WooCommerce 페이지 등 다양한 조건에 대한 자바스크립트 규칙을 설정할 수 있습니다.

HTTP/2 PUSH PRELOAD 다운로드

마치며

자바스크립트는 여전히 웹사이트에 동적 콘텐츠와 인터랙티브 요소를 추가하는 가장 선호되는 방법입니다. 많은 워드프레스 테마와 플러그인이 자바스크립트를 사용하기 때문에, 워드프레스에서 자바스크립트 파싱을 지연하고 defer와 async를 활용해 페이지가 빠르게 렌더링되도록 하고 렌더링 차단을 줄이는 것이 중요합니다.

많은 워드프레스 플러그인에서 defer와 async 적용 기능을 찾을 수 있지만, 이 글에서 소개한 솔루션들은 자바스크립트 파일을 더욱 세밀하게 제어할 수 있다는 장점이 있습니다.

필자의 웹사이트에서는 파일 통합에는 Autoptimize를, 자바스크립트 지연에는 Async JavaScript를 사용하고 있습니다. Async JavaScript에 만족하고 있지만, 최적화 설정이 적용되는 위치를 더 세밀하게 제어할 수 있어 많은 사이트 운영자에게는 HTTP/2 Push Preload가 더 나은 선택일 수 있습니다.

Asset CleanUp과 Perfmatters는 기능과 특성이 비슷하므로 함께 사용하는 것은 권장하지 않습니다. Asset CleanUp Pro가 확실히 더 나은 제어력과 고급 기능을 제공하지만, 필자는 사용 편의성 때문에 워드프레스 정리 작업에는 여전히 Perfmatters를 사용하고 있습니다. 두 솔루션 모두 자바스크립트 파싱 지연을 위해 다른 워드프레스 플러그인을 사용하더라도 어떤 워드프레스 최적화 환경에도 큰 도움이 됩니다.

이 글에서 소개한 워드프레스 플러그인들을 직접 테스트해 자바스크립트 파싱을 지연해 보시고, 여러 차례 테스트를 거쳐 최적의 설정을 찾아내시길 바랍니다.

행운을 빕니다.

Kevin 드림