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

게시 됨: 2021-07-22

WordPress에서 JavaScript 구문 분석 연기

사이트를 로드하는 데 너무 많은 시간이 걸리나요? WordPress 사이트 또는 기타 사이트를 사용 중이든 상관없이 높은 로딩 시간은 곧 수정해야 하는 중요한 문제입니다.

그래서, 당신은 같은 방황하고 있습니까? 글쎄요, 사이트를 직접 확인하면 'WordPress에서 JavaScript 구문 분석 연기'라는 메시지를 받을 수 있습니다. 이것은 기술에 정통하지 않기 때문에 복잡하고 때로는 이해할 수 없는 것처럼 보입니다.

메시지를 따르면 페이지 로딩 속도가 향상되고 사이트의 전환과 수익을 높이는 데 중요한 역할을 합니다.

이제 질문은 WordPress에서 Defer Parsing of JavaScript가 무엇을 의미합니까?

따라서 여기에 빠르고 짧은 답변이 있습니다. WordPress에서 Defer Parsing of JavaScript를 사용하면 브라우저에서 스크립트를 읽지 않고 먼저 웹 사이트 콘텐츠를 로드하여 다운로드를 완료하고 로드 시간을 향상시킬 수 있습니다.

이 쉬운 프로세스는 브라우저가 웹사이트 콘텐츠를 로드하기 전에 서버에서 JavaScript를 렌더링하고 다운로드하기 때문에 중요합니다. 이것은 자연스럽게 웹 사이트의 속도를 방해하고 로딩 시간을 방해합니다.

그러나 WordPress의 Defer Parsing of JavaScript는 문제를 해결하는 열쇠이며 몇 분 동안 기다리지 않고도 웹사이트 성능을 즐길 수 있습니다.

이 게시물에서는 JavaScript를 연기하는 5가지 입증된 기술을 공유합니다. 그러나 솔루션에 뛰어들기 전에 이 팝업 메시지의 실제 의미를 이해해야 합니다.

자, 더 이상 고민하지 않고 시작하겠습니다!

WordPress에서 Defer Parsing of JavaScript는 무엇을 의미합니까?

브라우저가 웹 페이지를 렌더링하는 방법을 알고 있습니까? 그렇지 않다면 먼저 이것을 이해해야 합니다.

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

그러나 브라우저는 리소스를 순서대로 다운로드합니다. 그러나 페이지를 렌더링하면 모든 프로세스가 다시 시작되고 로딩 시간에 부정적인 영향을 미칩니다. 이마저도 때때로 프로세스를 방해하고 메시지를 표시합니다. 페이지를 다운로드할 수 없거나 서버 오류가 표시됩니다.

브라우저는 웹사이트 또는 페이지를 렌더링하기 위해 코드를 통과할 때마다 JavaScript가 발견되면 렌더링을 중지합니다. 이 프로세스는 스크립트를 가져오고 구문 분석할 수 없을 때까지 중지됩니다. 또한 웹 사이트 속도에 부정적인 영향을 미칩니다.

그러나 WordPress에서 Defer Parsing of JavaScript의 도움으로 브라우저에 사이트의 페이지 또는 주요 콘텐츠를 다운로드하도록 알리고 빠른 로딩을 제공합니다. 이 때 사용자는 웹사이트를 찾을 수 있습니다.

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

웹사이트가 로딩에 너무 많은 시간이 걸린다면 후크와 크룩으로 성능을 높여야 합니다. 웹사이트 성능에 대해 잘 모르는 경우 GT Metrix, Google Pagespeed Insights 또는 WPEngine과 같은 최고의 도구를 사용하여 사이트에서 테스트를 실행하십시오.

이들은 사이트를 분석할 때 JavaScript 구문 분석을 연기하도록 제안하고 제안하는 속도 도구 테스트입니다. 예를 들어 GT Metrix를 사용해 보겠습니다.

GTMetrix에서는 각 페이지의 사이트 등급과 가능한 한 빨리 개선해야 하는 특정 스크립트를 찾을 수 있습니다. 이 도구를 사용하려면 웹사이트의 URL을 입력하고 몇 분 동안 기다리면 전체 데이터를 가져올 수 있습니다.

완료되면 페이지 속도 탭으로 이동하여 로드 속도를 개선하고 Defer Parsing of JavaScript 섹션을 확장합니다.

여기에서 렌더링 프로세스 동안 로드되는 로드 스크립트 목록을 찾을 수 있습니다. 그러니 모두 주의 깊게 읽으십시오.

비동기 대 속성 연기

이는 스크립트 다운로드가 웹 페이지 렌더링과 상호 작용하지 않도록 하는 데 중요합니다. 따라서 이를 수행하는 두 가지 방법은 Async와 defer입니다.

Async로 시작하려면 다음 스크립트 태그를 추가해야 합니다.

이를 통해 브라우저는 스크립트를 비동기식으로 로드해야 한다는 업데이트를 수신합니다. 정확하게 말하면 브라우저는 코드와 충돌하는 즉시 리소스를 다운로드하지만 리소스가 다운로드되는 동안 HTML을 구문 분석합니다.
반면에 두 번째 방법 Defer 속성을 선택할 수 있습니다. 따라서 주어진 스크립트를 추가하십시오.

이 태그를 사용하면 웹 페이지의 구문 분석이 완료될 때까지 리소스를 다운로드하지 않도록 브라우저에 지시할 수 있습니다. 프로세스가 완료되면 이전에 발견한 지연된 스크립트를 다운로드합니다.

두 리소스가 모두 다운로드될 때 확인하려는 주요 차이점입니다. 둘 중 하나를 더 잘 사용하려면 웹 응용 프로그램을 확인해야 합니다.

웹 애플리케이션이 컴팩트한 경우 지연을 선택해야 하고 스크립트가 거의 없는 경우 비동기가 가장 좋습니다. 글쎄, 당신은 둘 다에서 어떤 차이도 발견하지 못할 것이지만 진실은 defer는 큰 파일을 위한 것이고 Async는 작은 파일을 위한 것입니다.

Async와 defer의 차이점을 더 잘 알기 위해 예제를 공유했습니다. 읽어.

두 개의 자바 스크립트 JS1과 JS2가 있다고 가정합니다. 그리고 JS1 이후의 코드에서 JS2가 나타나는 조건이 있는데, 이는 JS2가 JS1에 의존하지만 JS2보다 큽니다.

Async를 사용하는 경우 JS2가 JS1보다 먼저 다운로드를 완료할 수 있습니다. JS1이 없을 때 JS2가 실행될 때 오류가 발생할 수 있습니다.

그리고 defer JS1 및 JS2 스크립트를 모두 사용하는 경우 성공적으로 다운로드되고 오류가 발생하지 않습니다.

따라서 defer는 스크립트를 로드하고 웹사이트 속도나 로딩 시간을 개선하는 데 가장 좋습니다.

JavaScript의 구문 분석을 연기해야 하는 이유

앞서 말했듯이 Google의 첫 번째 페이지에 순위를 지정하려면 웹 페이지를 로드하는 속도가 빨라야 합니다. 대략적으로, 페이지는 2-3초 안에 로드되어야 합니다. 불행히도 JavaScript는 페이지의 품질을 렌더링하므로 많은 트래픽을 잃게 됩니다.

페이지 로드를 지연하면 웹사이트에 여러 가지 영향을 줄 수 있습니다. 다행히 JavaScript의 구문 분석을 연기하면 이 문제를 해결하는 데 도움이 될 수 있습니다. 도움이 될 수 있는 이유를 살펴보고 확인하세요.

검색 순위 높이기

Google이 검색 순위에 대해 웹사이트의 성능을 평가할 때마다 Google이 가장 많이 확인하는 요소는 사이트의 로딩 시간입니다. 웹사이트가 더 빨리 로드되면 검색 결과의 첫 페이지에 자연스럽게 나타납니다.

연구에 따르면 2명 중 1명이 웹사이트가 로드될 때까지 기다리지 않으면 두 번째 소스로 이동한다는 사실을 발견했습니다. 또한 Google은 독자를 괴롭히지 않고 최고의 사용자 경험을 제공하는 웹사이트만 선호합니다.

웹사이트가 로드되는 데 4초 이상 걸리면 웹사이트 성능에 부정적인 영향을 미칩니다. 따라서 JavaScript에서 작업하는 것이 중요합니다. 지연은 사이트 속도를 정상에서 최고로 높이는 현명한 방법일 뿐입니다.

최상의 결과를 얻으려면 SEO 기술을 따라 콘텐츠를 향상하고 페이지 속도를 최적화해야 합니다.

전환율 향상

전환율을 높이려면 웹사이트가 연기해야 하는 또 다른 가장 큰 이유입니다. 웹사이트가 느리게 로드되면 고객이 다른 소스로 이탈하여 트래픽과 판매를 잃게 될 가능성이 있습니다.

사용자는 서두르며 종종 빠른 정보를 보여주는 사이트를 따라가기를 좋아합니다. 사이트가 느리게 실행되는 경우 사용자에게 실망감을 주고 귀하의 페이지를 다시 방문하지 않을 수도 있습니다. 작업 중인 사이트나 블로그는 중요하지 않습니다.

귀하의 임무는 사용자에게 최상의 서비스를 제공하는 것입니다. Hubspot에 대한 연구에 따르면 웹 사이트 로딩 시간은 종종 7%의 전환율을 떨어뜨립니다. WordPress의 Defer Parsing of JavaScript 기술을 사용하면 사이트 속도를 더 빠르게 향상시켜 전환율을 더욱 높일 수 있습니다.

최고의 사용자 경험 제공

우리는 당신이 이 이유에 대한 설명이 필요하다고 생각하지 않습니다. 사이트 속도가 좋고 사용자가 사이트의 콘텐츠를 즐기는 것은 매우 자연스러운 일이며 방문자가 사이트에 만족할 것으로 기대할 수 있습니다.

또한 사이트가 평소보다 로드하는 데 더 많은 시간이 걸리면 사용자가 사이트를 중단하고 이탈률이 높아집니다.

WordPress에서 Defer Parsing of JavaScript를 사용하면 주요 웹사이트 콘텐츠를 빠르게 로드하는 데 도움이 되는 Java 파일을 쉽게 업데이트할 수 있습니다. 이 빠른 로딩 방식은 사용자 경험을 향상시키는 웹사이트의 속도를 높이는 데 도움이 됩니다.

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

이제 기사의 주요 섹션에 도달했습니다. 여기에서 사이트 속도를 높이고, 최고의 사용자 경험을 제공하고, 첫 번째 순위를 매길 수 있는 경로를 제공하는 데 도움이 되는 5가지 뛰어난 기술을 배우게 됩니다.

그럼 방법을 알아봅시다.

JavaScript의 구문 분석을 연기하기 위해 선택할 수 있는 세 가지 중요한 경로는 플러그인, varvy 메서드 및 functions.php 파일입니다. 이 경로를 사용하면 주어진 다섯 가지 방법을 적용할 수 있습니다.

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

WordPress에서 Async JavaScript는 콘텐츠 로드 시 렌더링 차단 JavaScript를 근절하는 데 도움이 되는 무료 플러그인입니다.

이 플러그인을 사용하면 Java Scripts 및 Async를 완전히 제어하거나 지연을 통해 사이트 속도를 높이고 검색 페이지의 성능을 향상시키는 데 쉽게 기여할 수 있습니다. 그러나 Async and defer를 선택하는 동안 따라야 할 몇 가지 제안 사항이 있습니다.

Async는 HTML 파일을 구문 분석하는 동안 JavaScript를 다운로드할 수 있지만 JavaScript 파일을 수행하기 위해 HTML 구문 분석을 일시 중지합니다.
Defer는 HTML 파일을 파싱하는 동안 JavaScript 파일을 다운로드할 수 있지만 HTML 파싱이 완료된 후 파일을 수행하기 위해 대기합니다.

이제 Async 플러그인을 사용하여 WordPress에서 JavaScript 구문 분석 연기에 대한 단계별 가이드로 이동하겠습니다.

WordPress 대시보드를 열고 플러그인 탭으로 이동합니다.
플러그인 탭에서 새 버튼 추가를 클릭하고 Async JavaScript 플러그인을 검색합니다.
플러그인을 찾으면 설치 버튼을 클릭하고 활성화하십시오.
따라서 설치가 완료되면 설정으로 이동하여 필요한 변경을 수행합니다.
Async JavaScript 활성화 옵션을 선택하고 Defer as Async JavaScript를 선택합니다.
고급 기능의 경우 Async 및 defer 태그를 적용할 스크립트를 선택하고 선택합니다.
여기에서 포함하거나 제외할 스크립트를 선택할 수 있습니다. 또한 Async JavaScript Plugin에 의해 수행된 모든 변경 사항에서 제외할 플러그인 및 테마를 선택할 수도 있습니다.
변경이 완료되면 변경 사항을 저장하십시오

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

전에 WP 로켓 플러그인에 대해 들어 본 적이 없다면 지금 이것을 잡으십시오. WP Rocket은 웹사이트가 몇 초 만에 빠르게 로드되도록 도와주는 가장 트렌디한 플러그인 중 하나입니다.

또한 이 플러그인을 사용하면 페이지 캐싱, 캐시 사전 로드, 압축 및 기타 여러 멋진 기능을 받을 수 있습니다.

반면에 플러그인은 파일 최적화 탭에서 JavaScript의 구문 분석을 연기하는 데 도움이 됩니다.

플러그인을 설치하고 사용하는 방법은 다음과 같습니다.

WordPress 대시보드를 열고 플러그인 탭으로 리디렉션
이제 새 버튼 추가를 클릭하고 WP 로켓 플러그인을 검색합니다.
설치를 누르고 플러그인을 활성화하십시오.
그런 다음 설정으로 이동하고 메뉴에서 파일 최적화를 열어 시작하십시오.
이제 JavaScript 파일을 아래로 스크롤하고 JavaScript 로드 지연 옵션을 선택하고 쿼리에 대한 안전 모드를 활성화합니다.
전체 프로세스가 완료되면 페이지 끝으로 이동하여 변경 사항 저장 옵션을 클릭합니다.

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

W3 Total Cache는 WordPress에서 JavaScript의 구문 분석을 연기하는 데 사용할 수 있는 또 다른 최고의 플러그인입니다. 이 WordPress 플러그인은 웹사이트의 사용자 경험과 SEO를 향상시키는 데 유용합니다. 또한 CDN(콘텐츠 전달 통합)을 활용하여 웹 사이트의 성능을 향상하고 로드 시간을 줄입니다.

W3 토탈 캐시는 매우 효과적이고 안전하게 사용할 수 있습니다. 또한이 플러그인을 사용하여 WordPress에서 JavaScript의 구문 분석을 연기할 수 있습니다. 이 플러그인을 사용하는 방법은 다음과 같습니다.

먼저 WordPress 대시보드를 방문하여 플러그인 페이지로 이동합니다.
그런 다음 새 버튼을 추가하고 플러그인 W3 전체 캐시 플러그인을 검색합니다.
플러그인을 찾으면 설치 및 활성화 버튼을 클릭하십시오.
이제 플러그인이 설치되었습니다. WordPress에서 성능 및 일반 설정으로 이동합니다.
그런 다음 대시보드를 아래로 스크롤하여 축소 섹션으로 이동하고 활성화 옵션을 체크 표시합니다.
또한 축소 모드에서 수동 옵션을 확인하고 저장 옵션을 클릭하여 계속할 수 있습니다.

코드 축소
성능 탭으로 이동하여 왼쪽 사이드바에서 축소 탭을 선택하고 JS 머리글까지 아래로 스크롤하면 두 개의 HTML 태그가 있는 작업 및 영역 섹션을 검색할 수 있습니다.

설정 옵션 축소
defer 옵션을 사용하여 non-blocking을 선택하고 이전에 코드 유형을 포함합니다. 꼬리표.

JS 축소 설정

설정에서 WordPress 테마를 선택해야 하는 JS 파일 관리를 볼 수 있습니다.
그런 다음 구문 분석하려는 JavaScript의 URL을 포함하도록 스크립트 추가 옵션을 클릭합니다.
스크립트 추가 버튼을 눌러 원하는 만큼 URL을 추가할 수 있습니다.
변경이 완료되면 설정 저장 버튼과 순수 캐시 버튼을 클릭하여 계속하십시오.
완료되면 CSS 섹션을 아래로 스크롤합니다.
이제 스타일 시트 추가 버튼을 클릭합니다.
그런 다음 CSS 파일 관리에서 스타일시트 URL을 삽입합니다.
모니터링 도구에서 제공한 제안에 따라 둘 이상을 추가할 수 있습니다.
이제 변경을 완료했으므로 설정 및 순수 캐시 버튼을 저장합니다.

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

WordPress에서 Defer Parsing of JavaScript를 선택할 수 있는 또 다른 가장 좋은 방법은 Vary를 선택하는 것입니다. 이 방법은 초기 페이지가 로드되면 스크립트를 사용하여 외부 JavaScript 파일을 호출합니다.

즉, 브라우저는 웹 페이지가 로드되지 않을 때까지 JavaScript를 다운로드하거나 수행하지 않습니다. 그러나 이 방법은 Patrick Sexton이 제안했습니다.

이 방법을 사용하려면 varvy가 제공하는 코드 조각을 조정한 다음 본문 섹션 아래의 테마 편집기에 추가할 수 있습니다.

따라서 다음은 WordPress에서 Defer Parsing of JavaScript에 테마의 본문 부분에 추가할 수 있는 코드입니다.

<스크립트 유형= “텍스트/자바스크립트”>
함수 다운로드SAtOnload() {
var 요소 = document.createElement("스크립트");
element.src = ".js 연기" ; document.body.appendChild(요소);
}
만약에
(window.addEventListener) window.addEventListener("로드',
다운로드JSAtOnload, 거짓);
그렇지 않으면
(window.attachEvent)
Window.attachEvent("온로드", downlaodJSAtonlaod;
</스크립트>

이 작업을 수행하는 동안 defer.Js를 외부 JavaScript 파일의 이름으로 변경했는지 확인하십시오. 그런 다음 Wp_footer를 사용하여 하위 테마 functions.php 파일을 통해 코드를 삽입합니다.

다음은 사용해야 하는 코드입니다.

/**
Varvy의 코드 조각으로 JavaScript 구문 분석 연기
*/
Add_action('wp_footer', 'my_footer_scripts');
기능
My_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

이제 우리는 명확한 의미를 위한 단계별 가이드로 이동합니다.

WordPress 대시보드로 이동하여 모양과 테마 편집기로 이동합니다.
header.php 파일을 탐색한 다음 위에서 언급한 코드를 본문 섹션 앞뒤에 붙여넣습니다.
그런 다음 업데이트 파일 옵션을 클릭합니다.

방법 5- functions.php 파일 사용

잊어버린 경우 HTML을 통해 WordPress에 직접 스크립트를 추가할 수 없음을 알려드립니다. 대신 내장된 WordPress 기능을 사용하여 리소스를 요청하고 사이트를 백업해야 합니다.

functions.php 파일에 코드 조각을 추가하여 JavaScript 파일에 defer 속성을 사용해야 합니다.

프로세스를 완료하려면 테마 편집기를 열고 functions.php 파일로 이동하여 주어진 코드를 추가하십시오.

기능
Defer_parsing_of_js ( $url ) {
만약에 (
사용자_ is_ 로그인한() )
반환 $url; // WP 관리자를 중단하지 마십시오.
만약 ( 거짓 ===
스트롭( $url, '.js' ) )
반환 $url;
If ( strps ($url, 'jquery.js' ) ) return $url;
반환 str_replace( ' src', ' src 연기', $url);
}

추가_필터(
'script_loader_tag',
'defer_parsing_of_js' , 10
);

이 코드는 WordPress가 JQuery를 제외한 JavaScript 파일에 defer 속성을 추가하는 데 도움이 됩니다.

다음은 functions.php 파일을 통해 JavaScript 파일과 지연 속성을 동기화하는 데 사용할 수 있는 코드입니다.

Add_filter('스크립트 _loader_tag',
'add_defer_tags_to_scripts');
 
기능
add_defer_tags_to_scripts($tyag) {
$scripts_to_defer = array('script_a', script_b')에 속성을 추가할 #list 스크립트;
$scripts_to_async = 배열('스크립트 _c', '스크립트_d');
#scripts_to_defer 배열에 defer 태그 추가
Foreach( $scripts_to_defer as $current_script) {
If (true == strps($tag,
$current_script) )
레툰
Str_replace('src,'defer="지연" src','$tag);
}
#scripts_to_async 배열에 async 태그 추가
Foreach( $current_script로 $scripts_to_async) {
If (true == strps($tag,
$current_script) )
반품
Str_replace('src,'defer='
Async="비동기" src', $tag);

}
반환 $ 태그;
)

다음 코드를 추가해야 하므로 각 코드를 대기열에 넣어야 한다는 것을 잊지 마십시오.

Add_action('wp_enqueue_scripts',
'enqueue_custom_js');
기능
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_ds',
Get_stylesheet_directory_uri(), '/script_d.js') ;
}

functions.php 파일의 모든 코드를 업데이트했으면 파일을 업데이트하고 변경 사항을 확인하십시오. 다음은 파일을 업데이트하는 단계별 가이드입니다.

WordPress 대시보드를 열고 모양을 만든 다음 테마 편집기로 이동합니다.
functions.php 파일을 탐색한 다음 위에서 언급한 코드를 붙여넣습니다.
그런 다음 업데이트 파일 옵션을 클릭합니다.

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

비동기 및 지연 외에도 WordPress에는 두 가지 플러그인 옵션 Defer Parsing of JavaScript가 있습니다.

스피드 부스터 팩

이것은 웹 사이트의 속도를 쉽게 향상시키고 사용자를 위해 최적화하는 데 사용할 수 있는 또 다른 최고의 WordPress 플러그인입니다. 장점과 단점을 알려주세요.

장점:

인터랙티브한 사용자 인터페이스로 누구나 쉽고 간단하게 사용할 수 있습니다.
이는 JavaScript 최적화, 로드 불량 및 CDN 통합에 도움이 됩니다.
이것은 정기적으로 업데이트되고 버그 위협을 제거합니다.

단점:

이것은 다른 플러그인을 사용하는 데 문제를 일으킬 수 있습니다.

비동기 자바스크립트

이 플러그인을 사용하면 LABJS를 사용하여 wp_enqueue_script()로 추가된 모든 자바 스크립트를 쉽게 로드할 수 있습니다. 장점과 단점을 알려주세요.

장점:

플러그인을 사용하는 것은 매우 쉽습니다
플러그인 시장에서 가장 인기가 있습니다.
WordPress에서 JavaScript의 구문 분석을 연기하도록 설계됨

단점:

비정기 업데이트
최신 버전의 WordPress와 호환되지 않을 수 있습니다.
다른 플러그인에 문제를 일으킬 수 있음

자주 묻는 질문

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

구문 분석 연기는 브라우저에서 웹 사이트 콘텐츠가 로드된 후 JavaScript 파일이 로드되는 상태입니다. 이는 지연이 로드 및 렌더링에 참여하지 않음을 의미합니다.

따라서 사용자가 브라우저에서 웹사이트를 요청할 때 JavaScript 구문 분석은 브라우저에서 JavaScript를 로드할 때까지 기다리지 않고 즉시 콘텐츠를 표시합니다. 간단히 말해서 콘텐츠가 먼저 표시된 다음 로드됩니다.

WordPress 웹 사이트에서 렌더링 차단을 제거하는 방법은 무엇입니까?

웹 사이트에서 렌더링 차단을 제거하는 성공적인 방법 중 하나는 다른 웹 사이트 요소보다 먼저 구문 분석을 연기하는 것입니다. 렌더링을 최소화하는 또 다른 방법은 JS와 CSS를 함께 연결하는 것입니다.

내 사이트에서 중요하지 않은 JS를 식별하는 데 사용할 수 있는 도구는 무엇입니까?

JavaScript가 웹사이트에 중요한지 여부를 식별하기 위해 다음 도구에 액세스할 수 있습니다.

Google PageSpeed 인사이트: 웹사이트 속도 및 성능의 핵심 부족 지점을 식별하는 데 도움이 됩니다. 또한 이 도구는 사이트 성능과 로드 시간을 개선하기 위한 몇 가지 제안도 제공합니다.
이를 통해 귀하의 사이트는 빨간색, 주황색 및 녹색과 같은 다양한 색상의 점수를 받게 됩니다. 빨간색은 낮은 성능을 나타내며 주황색은 평균을 나타내고 녹색은 좋은 상태를 나타냅니다.
Pingdom 웹사이트 속도 테스트: 성능을 추적하고 모니터링하는 또 다른 인기 있는 도구입니다. 이 도구를 사용하면 7개의 다른 위치에서 웹사이트 성능을 테스트할 수 있습니다.
또한 이 도구는 페이지 속도를 개선하여 웹 사이트의 더 나은 속도와 성능을 즐길 수 있는 제안도 제공합니다.

Auto Optimize 플러그인을 통해 WordPress에서 JavaScript의 구문 분석을 연기할 수 있습니까?

자동 최적화 도구를 사용하면 JavaScript의 구문 분석을 쉽게 연기할 수 있습니다. 프로세스를 확인하려면 평소와 같이 플러그인을 설치하고 활성화해야 합니다. 플러그인이 설치되고 활성화되면 설정을 방문하여 JS, CSS 및 HTML 옵션을 선택하십시오.

이제 JavaScript 코드 옵션을 최적화하면 옵션이 잠금 해제됩니다. 이제 Aggregate JS 파일을 선택하고 다른 파일은 그대로 둡니다.

또한 플러그인을 사용하면 렌더링하고 싶지 않은 JavaScript를 제외할 수 있습니다. 변경이 완료되면 저장 버튼을 클릭합니다.

마무리
웹 사이트를 최적화하고 로딩 시간을 줄이려면 WordPress에서 JavaScript의 구문 분석을 연기하는 것이 중요합니다.

이 기사를 통해 사슴 구문 분석의 의미와 웹사이트가 검색 페이지의 상위에 오르는 데 어떻게 도움이 되는지 이해하셨기를 바랍니다. 행운을 빕니다!