WordPress에서 jQuery defer 처리하기

추가적인 페이지 속도 향상을 위해 WordPress에서 jQuery를 defer 처리하는 방법을 알아보세요

Arjen Karel Core Web Vitals Consultant
Arjen Karel - linkedin
Last update: 2026-03-06

왜 jQuery를 defer 처리해야 할까요?

jQuery는 여전히 모든 WordPress 설치에 포함되어 제공되며, 대부분의 테마는 이를 defer 처리하지 않고 로드합니다. 이는 모든 단일 페이지 로드에서 HTML 파싱을 차단한다는 의미입니다. 이 문제를 해결하는 방법은 다음과 같습니다.

최종 검토자: Arjen Karel (2026년 3월)

2024 Web Almanac에 따르면 jQuery는 전체 웹 페이지의 74%에 나타나며, 이는 주로 WordPress로 인해 발생합니다. 하지만 모바일 페이지의 47%만이 스크립트에 defer 속성을 사용합니다. 즉, 대다수의 WordPress 사이트는 여전히 jQuery를 동기식으로 로드하여 HTML 파싱을 차단하고 페이지의 모든 페인트 지표, 특히 Largest Contentful Paint를 지연시키고 있습니다.

아래 이미지를 살펴보세요. 정상적인(normal) 스크립트, defer 스크립트, async 스크립트 간의 HTML 파싱 차이를 보여줍니다. jQuery가 defer 처리되지 않으면 브라우저는 스크립트가 실행될 때까지 HTML 파싱을 차단합니다. jQuery가 defer 처리되면 브라우저는 파서를 차단할 필요가 없습니다. 이는 많은 시간을 절약해 줍니다. 전체 비교를 보려면 async vs defer 및 Core Web Vitals에 미치는 영향을 참조하세요.

테마 빌더가 기본적으로 jQuery를 defer 처리하지 않는 이유는 레거시 때문입니다. 일부 플러그인은 jQuery에 의존하는 (인라인) 스크립트를 추가합니다. jQuery가 defer 상태로 로드되었지만 jQuery를 필요로 하는 스크립트가 defer 처리되지 않으면 충돌(및 오류)이 발생합니다.

방법 1: 수동으로 jQuery defer 처리하기

수동으로 jQuery를 defer 처리하려면 jQuery를 큐(queue)에 추가하는 데 사용된 'handle'을 찾아야 합니다. 다음으로 해당 항목을 큐에서 제거하고, 테마 파일의 업그레이드 기능을 손상시키지 않으면서 동일한 파일의 defer 버전을 추가합니다.

1단계: jQuery가 큐에 추가된 위치 찾기

먼저, WordPress 테마에서 jQuery가 포함된 위치를 찾습니다. 일반적으로 테마의 functions.php 파일에 있거나 header.php 파일에 직접 위치합니다. 다음과 같은 줄을 찾으세요.

wp_enqueue_script('jquery');

이제 jQuery의 핸들이 'jquery'라는 것을 알게 되었습니다.

2단계: 하위 테마(child theme) 사용하기

상위 테마(parent theme)를 수정하는 경우 먼저 하위 테마를 생성하세요. 그렇지 않으면 다음 테마 업데이트 시 변경 사항이 덮어씌워집니다.

3단계: 'defer' 속성과 함께 jQuery를 큐에 추가하기

하위 테마의 functions.php 파일에 다음 코드를 추가하고 jQuery 파일 위치 및 핸들과 일치하도록 수정합니다. 우리는 WordPress 6.3 defer 전략을 사용합니다.

function defer_jquery() {
  if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
    wp_enqueue_script('jquery');
  }
}
add_action('wp_enqueue_scripts', 'defer_jquery',100);

자세히 살펴보겠습니다.

  • wp_deregister_script('jquery'): 기본 jQuery 스크립트 등록을 해제합니다.
  • wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy' => 'defer']);: 'defer' 전략으로 jQuery를 등록합니다.
  • wp_enqueue_script('jquery'): 수정된 jQuery 스크립트를 큐에 추가합니다.

짜잔! 이제 WordPress 사이트에서 성공적으로 jQuery를 defer 처리했습니다. 덧붙여 말하자면, 프로세스가 완전히 동일하기 때문에 다른 스크립트도 어떻게 defer 처리하는지 알게 되었습니다! WordPress를 넘어 더 많은 defer 기법에 대해서는 JavaScript를 defer하는 16가지 방법을 확인하세요.

인라인 스크립트에 주의하세요. wp_add_inline_script()를 통해 스크립트의 after 위치에 인라인 스크립트가 첨부된 경우, WordPress 6.3은 조용히 defer 전략을 제거합니다. jQuery를 defer 처리했지만 여전히 동기식으로 로드되는 경우, 플러그인이 jQuery 핸들에 인라인 스크립트를 추가하고 있는지 확인하세요.

방법 2: 플러그인 사용하기

WP Core Web Vitals와 같은 플러그인을 사용하면 매우 쉽게 jQuery를 defer 처리할 수 있으며, 많은 플러그인은 종속성(dependencies) 또한 defer 처리하고 jQuery가 실행될 때까지 jQuery 이벤트를 캐싱하는 등 몇 가지 유용한 기법을 수행함으로써 발생할 수 있는 복잡한 문제들을 처리해 줄 수 있습니다.

방법 3: CloudFlare

jQuery를 defer 처리하는 또 다른 아주 간단한 방법은 CloudFlare의 Rocket Loader를 사용하는 것입니다. Rocket Loader는 페이지 로드 중에 모든 스크립트를 비활성화한 다음 빠르게 다시 활성화하는 방식으로 작동합니다. 이 기법은 스크립트를 defer 처리하는 것과 유사한 효과를 내지만 몇 가지 단점이 있습니다.

  • CloudFlare Rocket Loader는 프리로드 스캐너(preload scanner)라는 브라우저 기능을 손상시킵니다. Rocket Loader를 사용하면 스크립트가 프리로드되지 않아 스크립트를 다운로드하고 실행하는 데 시간이 조금 더 오래 걸릴 수 있습니다.
  • CloudFlare Rocket Loader는 상당히 융통성 없는 도구입니다. 중요한 스크립트, 덜 중요한 스크립트, 있으면 좋은 스크립트를 구분하지 않습니다. 스크립트 타이밍에 대한 제어 권한을 주지 않은 채 어떠한 고려 없이 모든 것을 defer 처리합니다.

2025 Web Almanac에 따르면 모바일 환경의 WordPress 사이트는 45%의 Core Web Vitals 통과율을 보이며, LCP는 53%에 불과한 가장 취약한 지표입니다. 렌더링 차단(Render-blocking) jQuery가 가장 흔한 원인 중 하나입니다. 이를 defer 처리한다고 해서 모든 것이 해결되지는 않지만, 통과 기준의 LCP 점수에 도달하는 데 있어 사이트를 가로막는 가장 큰 장애물 중 하나를 제거해 줍니다.

변경 사항 테스트하기

jQuery를 defer 처리한 후 사이트를 확인하세요. 브라우저 콘솔을 열고 오류가 있는지 살펴봅니다. 메뉴, 슬라이더, 폼(form) 및 JavaScript를 사용하는 모든 요소를 클릭해 보세요. 문제가 발생했다면 아래의 문제 해결(Troubleshooting) 섹션이 해결하는 데 도움이 될 것입니다.

문제 해결 (Troubleshooting)

문제에 직면했다면 해당 문제는 다음 3가지 범주 중 하나에 속할 가능성이 높습니다. 대부분의 문제는 검사기(inspector)를 열고 콘솔 탭으로 이동하여 확인할 수 있습니다. 문제가 있는 경우, 대개 다음과 같이 표시되고 'Uncaught ReferenceError: jQuery is not defined'라고 적혀 있는 경고를 찾을 수 있습니다.

이를 고치는 것은 그리 어렵지 않습니다. 오류 옆에는 오류 발생지에 대한 참조(reference)가 있습니다. 만약 (index)라면 십중팔구 인라인 스크립트에서 비롯된 것입니다. 만약 다른 파일이라면 타이밍 문제이거나 해당 파일 또한 defer 처리하는 것을 잊었기 때문입니다.

종속 스크립트 (Dependent scripts)

jQuery를 사용하고 있다면 jQuery에 의존하는 스크립트가 있을 것입니다. 해당 스크립트들도 마찬가지로 defer 처리되어야 합니다(jQuery에 의존하는 스크립트가 defer 처리되지 않으면 jQuery보다 먼저 실행됩니다!). jQuery를 defer 처리하기 위해 밟았던 단계들을 똑같이 반복하면 됩니다. 다행히 이미 기초 작업을 마쳤으므로 아주 쉽게 해결할 수 있습니다!

인라인 스크립트 (Inline Scripts)

인라인 스크립트가 jQuery에 의존한다면 문제가 될 수 있습니다! 일반적인 인라인 스크립트는 defer 처리될 수 없습니다. defer 속성을 추가하더라도 브라우저는 이를 무시할 것입니다. 인라인 스크립트로 인한 문제를 해결하는 2가지 방법이 있습니다.
$(function(){
 // do something
})
  • type="module" 요령을 사용하세요. 더 새로운 <script type="module">은 인라인 JavaScript 또한 defer 처리합니다.
  • 인라인 스크립트를 외부 파일에 배치하세요. 변수가 필요한 경우 해당 변수들을 페이지에 인라인 스크립트로 직접 추가할 수 있지만, 메인이 되는 jQuery 의존 함수들은 똑같이 defer 처리된 외부 파일에 있어야 합니다.

타이밍 문제 (Timing issues)

덜 흔한 또 다른 문제는 타이밍에서 비롯됩니다. jQuery가 defer 처리되지 않으면 DOMContentLoaded 및 load 이벤트 전에 실행됩니다. 이에 의존할 수 있습니다. 반면, defer 처리되면 스크립트가 DOMContentLoaded 이벤트 이후에 실행될 수 있습니다. 즉, DOMContentLoaded 이벤트에 이벤트 핸들러를 연결한 경우 안정적으로 실행되지 않을 수 있음을 의미합니다. 이와 같은 문제가 발생하면 트리거를 변경하거나 함수를 jQuery()로 래핑해 보세요.

CoreDash에서 모니터링하는 WordPress 사이트들을 살펴보면, jQuery를 포함한 모든 스크립트를 defer 처리하는 사이트의 p75 LCP는 2.1초로, jQuery를 동기식으로 로드하는 사이트의 3.4초와 비교됩니다. 이는 단일 설정 변경만으로 38%가 향상된 결과입니다. 변경 사항을 배포한 후 Real User Monitoring을 사용하여 개선 사항을 확인하세요. Lighthouse 점수는 defer 속성이 작동하는지 알려주지만, 실제 방문자의 필드 데이터는 LCP가 실제로 개선되었는지 알려줍니다. 스크립트 배치가 Core Web Vitals에 미치는 영향에 대한 자세한 내용은 Core Web Vitals WordPress 가이드를 참조하세요. 막히는 부분이 있다면 언제든지 연락해 주세요!

About the author

Arjen Karel is a web performance consultant and the creator of CoreDash, a Real User Monitoring platform that tracks Core Web Vitals data across hundreds of sites. He also built the Core Web Vitals Visualizer Chrome extension. He has helped clients achieve passing Core Web Vitals scores on over 925,000 mobile URLs.

사이트를 Core Web Vitals 통과까지.

유럽 주요 퍼블리셔와 이커머스 플랫폼 50만 페이지 이상. 수정은 제가 직접 짜고, 필드 데이터로 검증합니다.

진행 방식
WordPress에서 jQuery defer 처리하기Core Web Vitals WordPress에서 jQuery defer 처리하기