WordPress에서 JavaScript 구문 분석을 연기하는 방법

WordPress 웹사이트를 운영하든 다른 웹사이트를 운영하든 웹사이트 성능의 중요한 척도는 페이지 속도라는 것을 알아야 합니다.

GTmetrix 또는 Google PageSpeed ​​Insights와 같은 사이트 성능 테스트 도구를 사용하는 경우 JavaScript의 구문 분석을 연기하도록 제안할 수 있습니다.

이제 이 문구가 혼란스러울 수 있지만 웹사이트의 로드 시간을 높이는 데 중요한 역할을 합니다.

그렇다면 JavaScript의 구문 분석을 연기한다는 것은 무엇을 의미합니까?

글쎄, 우리는 이것에 대해 나중에 자세히 이야기 할 것입니다. 간단히 말해서, JavaScript의 구문 분석을 연기하면 브라우저에서 스크립트 다운로드가 완료될 때까지 기다리지 않고 웹 사이트 콘텐츠를 먼저 로드할 수 있습니다.

이 프로세스는 브라우저가 다른 웹사이트 콘텐츠를 로드하기 전에 서버에서 JavaScript를 렌더링하고 다운로드하기 때문에 필수적입니다. 이는 웹사이트의 속도를 저하시키고 페이지 로드 시간을 방해합니다.

고맙게도 JavaScript의 구문 분석을 연기하는 것이 문제를 완화하는 가장 좋은 방법입니다.

이 기사에서는 WordPress에서 JavaScript의 구문 분석을 연기하는 5가지 입증된 방법을 설명했습니다. 그러나 그 전에 구문이 의미하는 바에 대해 더 많은 통찰력을 얻고 Javascript의 구문 분석을 연기해야 ​​하는지 여부를 알아보겠습니다.

진행하자!

WordPress에서 JavaScript의 구문 분석을 연기한다는 것은 무엇을 의미합니까?

JavaScript 구문 분석을 연기하는 기술을 이해하기 전에 웹 브라우저가 웹 페이지를 렌더링하는 방법을 알아야 합니다.

우선 브라우저가 웹 서버에 요청을 보내면 HTML 문서 형식으로 다운로드되는 페이지를 수신합니다. 이 HTML 문서에는 텍스트, 다양한 DOM 요소를 렌더링하는 코드, 이미지, 스타일시트 및 스크립트와 같은 다양한 리소스가 포함되어 있습니다.

기본적으로 브라우저는 이러한 리소스를 순서대로 다운로드합니다. 모든 리소스가 다운로드된 후에만 웹 페이지 렌더링이 다시 시작됩니다. 게다가, 큰 리소스는 웹 페이지의 로드 시간에 부정적인 영향을 미칩니다.

브라우저가 코드를 통해 웹사이트를 렌더링할 때마다 JavaScript가 발견되면 렌더링을 중지합니다. JavaScript 파일을 가져와 구문 분석할 수 있을 때까지 프로세스가 중지됩니다. 이는 웹사이트 속도에 부정적인 영향을 미칩니다.

고맙게도 JavaScript의 구문 분석을 연기하는 프로세스는 웹 사이트의 주요 콘텐츠 로드가 완료될 때까지 JavaScript 파일을 다운로드하고 구문 분석할 때까지 브라우저에 알립니다. 이 시점까지 방문자는 웹 사이트와 상호 작용할 수 있으므로 JavaScript를 다운로드하고 구문 분석하는 데 필요한 시간이 더 이상 사이트의 로드 시간을 위태롭게 하지 않습니다.

JavaScript의 구문 분석을 연기해야 ​​하는지 어떻게 알 수 있습니까?

앞서 말했듯이 GTmetrix, Google PageSpeed ​​Insights 또는 WP Engine Speed ​​Tool과 같은 사이트 성능 테스트 도구는 웹사이트를 분석할 때 JavaScript 구문 분석을 연기하도록 제안하는 경우가 많습니다.

특히 GTmetrix는 등급을 제공하고 페이지 로드 속도를 개선하기 위해 연기해야 ​​하는 특정 스크립트를 나열합니다.

웹사이트의 URL을 입력하고 도구에서 평가할 때까지 기다리기만 하면 됩니다. 평가가 완료되면 PageSpeed ​​탭으로 이동하여 Defer parsing of JavaScript 섹션을 확장합니다.

이 섹션에서는 아래 예와 같이 렌더링 프로세스 중에 로드되는 비필수 스크립트 목록을 제공합니다.

비동기 대 지연 속성

스크립트 다운로드가 웹 페이지의 렌더링을 방해하지 않는지 확인하는 것이 중요합니다. 두 가지 방법이 있습니다.

• 비동기
• 연기하다

다음과 같이 스크립트 태그에 async 속성을 포함할 수 있습니다.

 <script src= “path/to/script” async> </script>

이것은 스크립트를 비동기적으로 로드하도록 브라우저에 지시합니다. 정확히 말하면 브라우저는 코드에서 리소스를 발견하는 즉시 리소스를 다운로드하지만 리소스가 여전히 다운로드되는 동안 HTML 구문 분석을 진행합니다.

반면에 다음과 같이 스크립트 태그에 defer 속성을 추가할 수 있습니다.

 <script src= “path/to/script” defer> </script>

이것은 브라우저가 웹 페이지의 구문 분석을 완료할 때까지 리소스를 다운로드하지 않도록 지시합니다. 구문 분석 및 렌더링이 완료되면 이전에 발생한 지연된 스크립트 목록을 다운로드합니다.

async 및 defer 속성의 주요 차이점은 리소스가 다운로드되는 시점입니다.

컴팩트 웹 애플리케이션이 있는 경우 defer를 사용하여 상호 종속성이 충족되도록 하는 것이 좋습니다. 게다가, 렌더링 경로에 몇 개의 스크립트만 있는 경우 이 두 속성을 모두 사용하는 데 아무런 차이가 없습니다.

다음은 비동기 및 지연 속성을 이해하는 예입니다.

두 개의 스크립트 JS1과 JS2가 있다고 가정해 보겠습니다.

조건은 JS2가 JS1 이후에 코드에 나타나며 JS2는 JS1에 종속되지만 JS1은 JS2보다 큽니다.

이제 async 를 사용하면 JS1이 완전히 다운로드되기 전에 JS2가 다운로드를 완료할 수 있습니다. JS1이 없을 때 JS2가 실행될 때 오류가 발생합니다.

반면 defer 를 사용하면 JS1과 JS2가 순차적으로 다운로드되어 오류가 없는지 확인합니다.

JavaScript의 구문 분석을 연기해야 ​​하는 이유는 무엇입니까?

이전에 페이지 속도가 웹사이트의 성능을 좌우하는 가장 중요한 요소라고 언급했습니다. JavaScript 파일은 상당히 크고 로드하는 데 시간이 오래 걸리므로 실행을 잠시 지연하면 웹사이트 속도를 높이는 데 편리합니다.

다음은 WordPress에서 JavaScript 구문 분석을 연기해야 ​​하는 몇 가지 이유입니다.

1. 검색 순위를 높이려면:

Google 또는 기타 검색 엔진이 검색 엔진 순위를 위해 귀하의 웹사이트를 평가할 때 페이지 속도를 중요한 측정 기준으로 삼습니다. 웹사이트가 더 빨리 로드되면 검색 엔진 결과의 첫 번째 페이지에 표시될 수밖에 없습니다.

연구에 따르면 2명 중 1명은 페이지가 2초 이내에 로드될 것으로 예상합니다. 귀하의 웹사이트가 2초 이내에 적절하게 로드되지 않으면 Google은 귀하 대신 귀하의 경쟁업체를 선호할 것입니다. 따라서 검색 순위에 부정적인 영향을 미칠 수 있습니다.

따라서 웹 사이트의 로드 시간이 크게 향상되도록 JavaScript 구문 분석을 연기해야 ​​합니다.

WordPress 웹사이트의 속도를 높일 수 있는 더 많은 옵션을 찾고 있다면 검색 트래픽을 두 배로 늘려줄 7가지 온페이지 SEO 기술을 확인하십시오.

2. 전환율을 높이려면:

웹사이트가 느리게 로드되면 방문자는 웹사이트를 떠나 다른 더 나은 옵션을 찾을 수밖에 없습니다. 사용자는 웹사이트에서 빠르고 안정적인 정보를 찾는 경우가 많기 때문에 로딩 속도가 느린 페이지는 기분을 상하게 할 수 있습니다.

마찬가지로, 제휴 사이트를 운영하고 웹사이트를 통해 제품을 판매하는 경우 사용자가 더 많은 조치를 취하기를 기대합니다. 그러나 느린 웹 페이지는 방문자가 어떤 조치도 취하지 못하게 할 수 있습니다.

HubSpot에 발표된 연구 에 따르면 웹사이트 로딩 시간이 1초만 지연되어도 전환율이 7% 감소 합니다. 웹사이트의 로드 시간을 늘리고 전환율을 높이는 것이 얼마나 중요한지 알 수 있습니다.

JavaScript의 구문 분석을 연기하는 기술은 웹사이트의 속도를 높이고 전환율을 높이는 데 도움이 됩니다.

3. 더 나은 사용자 경험을 제공하기 위해:

아무 생각이 없습니다! 느린 웹 사이트는 끔찍한 사용자 경험을 만듭니다. 웹사이트를 로드하는 데 평소보다 시간이 더 오래 걸리면 방문자가 웹사이트를 떠날 것으로 예상할 수 있으므로 이탈률이 높아집니다.

웹 페이지의 콘텐츠가 로드된 후에만 JS 파일이 실행되도록 JavaScript 구문 분석을 연기하는 것을 고려해야 합니다. 이 기술은 WordPress 웹 사이트의 속도를 높이고 사용자에게 최상의 경험을 제공하는 데 도움이 됩니다.

WordPress에서 JavaScript 구문 분석을 연기하는 5가지 다른 방법

JavaScript의 구문 분석을 연기하려면 다음을 포함한 세 가지 주요 경로 중 하나를 선택할 수 있습니다.

• 플러그인
• Varvy 방법
• Functions.php 파일

이러한 경로를 사용하여 WordPress에서 JavaScript 구문 분석을 연기하는 다섯 가지 방법을 만들었습니다.

방법 1: 무료 비동기 JavaScript 플러그인 사용

Async JavaScript는 스크롤 없이 볼 수 있는 콘텐츠에서 렌더링 차단 JavaScript를 제거하는 데 도움이 되는 무료 WordPress 플러그인입니다.

플러그인은 WordPress 웹사이트의 성능을 높이기 위해 비동기 또는 지연 속성을 추가하거나 제외할 스크립트를 완전히 제어할 수 있습니다. 비동기와 지연 중에서 선택하기 전에 기억해야 할 사항은 다음과 같습니다.

• 비동기 는 HTML 파일을 계속 구문 분석하는 동안 JavaScript를 다운로드하지만 JavaScript 파일을 실행하기 위해 HTML 구문 분석을 일시 중지합니다.
• Defer 는 HTML 파일을 구문 분석하는 동안 JavaScript를 다운로드하고 HTML 구문 분석이 완료된 후 실행을 기다립니다.

Async JavaScript 플러그인을 사용하여 WordPress에서 JavaScript 구문 분석을 연기하는 각 단계는 다음과 같습니다.

먼저 WordPress 대시보드에서 플러그인 -> 새로 추가 로 리디렉션합니다.

이제 검색 표시줄에서 Async JavaScript 플러그인을 찾은 다음 설치 및 활성화 합니다.

플러그인 설치 및 활성화를 완료하면 설정 페이지로 이동하여 필요한 변경을 수행합니다.

이제 Enable Async JavaScript 옵션을 선택하고 아래 이미지와 같이 Defer as Async JavaScript Method를 선택합니다.

고급 옵션을 보려면 페이지까지 아래로 스크롤할 수 있습니다. 여기에서 async 및 defer 태그를 적용할 스크립트를 포함하고 제외할 스크립트 목록을 추가할 수도 있습니다.

Async JavaScript 플러그인이 수행하는 모든 변경 사항에서 제외할 수 있는 플러그인 및 테마를 나열할 수도 있습니다.

필요한 사항을 변경했으면 페이지 하단으로 스크롤하여 설정 저장 버튼을 누르십시오.

방법 2: WP 로켓 플러그인 사용

WP Rocket은 클릭 몇 번으로 웹사이트를 빠르게 로드할 수 있는 가장 강력한 WordPress 캐싱 플러그인 중 하나로 알려져 있습니다. 플러그인은 페이지 캐싱, 캐시 사전 로드, 정적 파일 압축 및 기타 여러 멋진 기능을 제공합니다.

그 외에도 WP Rocket은 WP Rocket 대시보드의 파일 최적화 탭에서 JavaScript 구문 분석을 연기하는 데 도움이 됩니다.

WP Rocket 플러그인을 구매, 설치 및 활성화한 후 설정 옵션으로 리디렉션하고 메뉴에서 파일 최적화 탭을 클릭하여 시작하십시오.

그런 다음 JavaScript 파일 섹션까지 아래로 스크롤하고 지연된 JavaScript 로드 옵션을 선택하고 jQuery의 안전 모드를 활성화합니다.

전체 프로세스를 완료하면 페이지 끝까지 아래로 스크롤하고 변경 사항 저장 버튼을 클릭합니다.

방법 3: W3 Total Cache 플러그인 사용

W3 Total Cache는 웹사이트의 SEO 및 사용자 경험을 향상시키는 또 다른 필수 WordPress 플러그인입니다. CDN(콘텐츠 전송 네트워크) 통합을 활용하여 웹 사이트의 성능을 높이고 로드 시간을 줄입니다.

W3 Total Cache는 무료이며 매우 효과적입니다. 이 플러그인을 사용하여 WordPress 웹사이트에서 JavaScript의 구문 분석을 연기할 수 있습니다.

다음은 W3 ​​Total Cache 플러그인을 사용하여 WordPress에서 JavaScript 구문 분석을 연기하는 모든 단계입니다.

먼저 WordPress 대시보드에서 플러그인 -> 새로 추가 로 리디렉션합니다.

이제 검색 표시줄에서 W3 Total Cache 플러그인을 찾은 다음 설치 및 활성화 합니다.

플러그인 설치 및 활성화를 완료하면 WordPress 왼쪽 사이드바에서 성능 -> 일반 설정 으로 이동하여 필요한 사항을 변경합니다.

그런 다음 축소 섹션으로 스크롤하여 활성화 옵션을 선택합니다. 또한 축소 모드 에서 수동 옵션을 선택하고 모든 설정 저장 버튼을 클릭하여 계속합니다.

이제 왼쪽 사이드바에서 성능 -> 축소 탭으로 리디렉션하고 JS 머리글까지 아래로 스크롤합니다. 여기에서 두 개의 HTML 태그가 있는 영역 섹션에서 작업을 볼 수 있습니다.

Before </head> 태그의 Embed 유형에서 "지연" 옵션을 사용하여 비차단을 선택합니다.

같은 섹션에서 활성 WordPress 테마를 선택하고 구문 분석하려는 JavaScript의 URI를 포함하기 위해 스크립트 추가 버튼을 클릭해야 하는 JS 파일 관리 제목을 볼 수 있습니다.

스크립트 추가 버튼을 클릭하여 원하는 만큼 URI를 추가할 수 있습니다.

변경을 완료했으면 설정 저장 및 캐시 제거 버튼을 클릭하여 계속하십시오.

그런 다음 CSS 섹션으로 스크롤하십시오. 그런 다음 CSS 파일 관리 헤더 아래에 있는 스타일 시트 추가 버튼을 클릭하여 CSS 스타일시트 URI를 삽입할 수 있습니다. 온라인 속도 모니터링 도구에서 제공하는 제안에 따라 둘 이상을 추가할 수 있습니다.

변경을 완료했으면 설정 저장 및 캐시 제거 버튼을 클릭하여 계속하십시오.

방법 4: Varvy의 권장 방법 사용

Varvy의 Patrick Sexton이 권장하는 또 다른 방법은 초기 페이지 로드가 완료되면 스크립트를 사용하여 외부 JavaScript 파일을 호출하는 것입니다. 즉, 웹 페이지 로드가 완료될 때까지 브라우저는 JavaScript를 다운로드하거나 실행하지 않습니다.

Varvy가 제공하는 코드 조각을 조정한 다음 닫는 </body> 태그 직전에 테마 파일에 스크립트를 추가하여 이 방법을 사용할 수 있습니다.

WordPress에서 JavaScript 구문 분석을 연기하기 위해 테마의 본문 부분에 추가하는 코드는 다음과 같습니다.

 <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>

참고: defer.js 를 외부 JavaScript 파일의 이름으로 변경해야 합니다. 그런 다음 wp_footer 후크를 사용하여 하위 테마의 functions.php 파일을 통해 코드를 삽입할 수 있습니다.

이 접근 방식을 사용하면 Varvy의 코드를 다음과 같이 래핑할 수 있습니다.

 /** Defer parsing of JavaScript with code snippet from Varvy */ add_action( 'wp_footer', 'my_footer_scripts' ); function my_footer_scripts(){ ?> REPLACE_WITH_VARVY_SCRIPT <?php }

다음은 이 방법의 모든 단계를 선명한 이미지로 설명합니다.

WordPress 대시보드에 로그인하고 모양 -> 테마 편집기 로 이동합니다.

이제 화면 오른쪽에서 header.php 파일을 클릭한 다음 위에서 언급한 코드를 붙여넣고 </body 태그>를 닫습니다.

그런 다음 파일 업데이트 버튼을 클릭합니다.

방법 5: functions.php 파일 사용

워드프레스 개발에 대한 아이디어가 있다면 HTML 마크업을 통해 직접 스크립트를 추가하면 안 된다는 사실을 알고 있을 것입니다. 대신 내장된 WordPress 기능을 사용하여 리소스를 요청하고 필요한 경우 웹사이트를 백업해야 합니다.

functions.php 파일에 코드 스니펫을 추가하여 Javascript 파일에 defer 속성을 사용할 수 있습니다.
이를 위해서는 WordPress 대시보드에서 테마 편집기 로 이동해야 합니다. 그런 다음 functions.php 를 클릭하고 다음 코드를 추가하십시오.

 function defer_parsing_of_js( $url ) { if ( is_user_logged_in() ) return $url; //don't break WP Admin if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return str_replace( ' src', ' defer src', $url ); } add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

이 스니펫은 WordPress에 JQuery를 제외한 모든 JavaScript 파일에 defer 속성을 추가하도록 지시합니다.
또한 functions.php 파일을 통해 JavaScript 파일에 async 또는 defer 속성을 사용하도록 다음 코드를 쉽게 추가할 수 있습니다.

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts'); function add_defer_tags_to_scripts($tag){ # List scripts to add attributes to $scripts_to_defer = array('script_a', 'script_b'); $scripts_to_async = array('script_c', 'script_d'); # add the defer tags to scripts_to_defer array foreach($scripts_to_defer as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' defer="defer" src', $tag); } # add the async tags to scripts_to_async array foreach($scripts_to_async as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' async="async" src', $tag); } return $tag; }

글쎄요, 스크립트 태그에 async 및 defer 속성을 추가하기 전에 WordPress가 액세스할 수 있도록 각 스크립트를 대기열에 넣어야 한다는 것을 잊지 마십시오. 다음은 이에 대한 코드입니다.

 add_action('wp_enqueue_scripts', 'enqueue_custom_js'); function enqueue_custom_js() { wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js'); wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js'); wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js'); wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js'); }

functions.php 파일에 코드 추가를 마쳤으면 파일 업데이트 버튼을 클릭합니다.

다음은 이 방법의 모든 단계를 선명한 이미지로 설명합니다.

WordPress 대시보드에 로그인하고 모양 -> 테마 편집기 로 이동합니다.

이제 화면 오른쪽에 있는 functions.php 파일을 클릭합니다. 그런 다음 위에서 언급한 코드를 붙여넣고 파일 업데이트 버튼을 클릭하여 필요한 변경 사항을 저장할 수 있습니다.

WordPress에서 JavaScript 구문 분석을 연기하는 대체 플러그인

WordPress에서 JavaScript 구문 분석을 연기하기 위해 Async JavaScript 및 WP Rocket 플러그인 이외의 다른 옵션을 검색하는 경우 많은 옵션이 있습니다. 그 중 일부는 다음과 같습니다.

1. 스피드 부스터 팩:

JavaScript 최적화 및 기타 다양한 속도 최적화 기술을 지원하는 사용하기 쉬운 인터페이스가 있는 무료 WordPress 플러그인입니다.

스피드 부스터 팩의 장점:

• 매우 간단하고 사용하기 쉬우며 대화형 사용자 인터페이스가 제공됩니다.
• JavaScript 최적화, CSS 최적화, 지연 로딩 및 CDN(Content Delivery Network) 통합 지원
• 탁월한 성능 및 버그 개선을 위해 정기적으로 업데이트됨

스피드 부스터 팩의 단점:

• 이 플러그인 또는 해당 기능을 활성화하면 웹사이트의 다른 플러그인과 충돌할 위험이 있습니다.

2. WP 지연 자바스크립트:

이 WordPress 플러그인은 LABJS를 사용하여 wp_enqueue_script()를 통해 추가된 모든 JavaScript의 로드를 연기합니다. 그 결과 로딩 시간이 적절하게 최적화됩니다.

WP 지연 JavaScript의 장점:

• 사용이 매우 간편하며 시장에서 가장 인기 있는 솔루션 중 하나입니다.
• 추가 기능이 아니라 WordPress에서 JavaScript의 구문 분석을 연기하도록 명시적으로 설계되었습니다.

WP 지연 JavaScript의 단점:

• 업데이트 빈도가 낮고 최신 버전의 WordPress와 호환되지 않을 수 있음
• 웹사이트의 다른 플러그인이 중단될 수 있음

FAQ(자주 묻는 질문)

결론

웹사이트의 속도와 성능을 향상시키려면 WordPress에서 JavaScript의 구문 분석을 연기하는 것이 매우 중요합니다. 플러그인을 사용하고 테마 파일에 코드를 직접 추가하는 것과 같은 이 기술을 수행하는 다양한 방법을 제시했기 때문에 이 기사가 통찰력이 있기를 바랍니다.

테마 파일에 코드를 추가하기 어렵다면 위에서 언급한 플러그인을 사용하여 JavaScript의 구문 분석을 연기하는 것이 좋습니다. 플러그인은 사용하기 쉽고 몇 번의 클릭으로 전체 프로세스를 완료할 수 있습니다.

프로세스를 완료한 후 GTmetrix와 같은 사이트 성능 테스트 도구를 통해 웹사이트를 실행하여 웹사이트가 가능한 한 많은 스크립트를 연기하는지 확인하십시오.

WordPress에서 JavaScript의 구문 분석을 연기하는 방법에 대한 우려 사항과 쿼리가 있습니까? 아래 코멘트 섹션에서 그들을 쏴라!