WordPress에서 JavaScript 실행 시간을 줄이는 6 가지 쉬운 방법

느린로드 페이지보다 웹 사이트 방문자를 좌절시키는 것은 없습니다. 이에 대한 여러 가지 이유가 있으며 그 중 하나는 과도한 JavaScript 실행 시간입니다.

JavaScript가 처리하는 데 너무 오래 걸리면 느린 페이지로드, 사용자 경험이 좋지 않으며 SEO 순위를 상하게하는 모든 것을 지연시킵니다.

그러나 걱정하지 마십시오. JavaScript 최적화가 복잡 할 필요는 없습니다.

이 안내서에서는 WordPress에서 JavaScript 실행 시간을 줄이는 쉽고 효과적인 방법을 안내합니다.

초보자이든 고급 WordPress 사용자이든, 이러한 쉬운 방법은 사이트 속도를 높이고 핵심 웹 생명을 개선하며 SEO 성능을 향상시키는 데 도움이됩니다.

다이빙하자!

JavaScript 실행 시간이란 무엇입니까?

JavaScript 실행 시간은 웹 브라우저가 웹 페이지에서 JavaScript 코드를 처리하고 실행하는 데 걸리는 시간을 나타냅니다.

사용자가 사이트를로드 할 때마다 브라우저는 JavaScript 스크립트를 구문 분석, 컴파일 및 실행해야합니다. 이러한 스크립트가 너무 복잡하거나 최적화되지 않거나 렌더 블로킹되면 페이지 성능을 늦추어로드 시간이 높아지고 사용자 경험이 불량화 될 수 있습니다.

JavaScript 실행 시간이 성능에 미치는 영향은 무엇입니까?

JavaScript 실행 시간이 성능에 미치는 영향에 대한 분석은 다음과 같습니다.

1. 메인 스레드 차단

한 번에 한 대의 차만 지나갈 수있는 좁은 터널을 생각해보십시오. 차량이 너무 오래 안에 남아있는 한 트래픽이 원활하게 움직입니다.

브라우저는 같은 방식으로 작동합니다. 단일 기본 스레드에 의존하여 콘텐츠로드, 페이지 렌더링 및 사용자 상호 작용 처리와 같은 작업을 관리합니다.

JavaScript가 실행되면이 스레드에서 우선 순위가 있습니다. 실행하는 데 너무 오래 걸리면 터널에서 트럭이 실속되어 다른 모든 자동차를 들고 있습니다. 이 지연으로 인해 브라우저가 다른 작업을 처리하지 못하면 페이지로드가 느리고 응답하지 않는 상호 작용이 발생합니다.

2. 렌더링 지연

웹 사이트를 방문하면 화면에 컨텐츠가 빠르게 나타날 것으로 예상됩니다. 콘텐츠를 "그림"으로 알려진이 프로세스는 원활한 사용자 경험을 보장합니다.

그러나 JavaScript 실행이 너무 오래 걸리면이 초기 렌더링이 지연되어 사용자가 빈 화면을 응시하여 사용자 경험이 좋지 않습니다.

3. 첫 입력 지연 (FID)

웹 사이트가 버튼을 클릭하는 것과 같은 사용자의 첫 번째 상호 작용에 응답하는 데 걸리는 시간을 추적합니다. FID가 지연되면 사용자에게 느린 경험이있어 실망 스럽습니다.

JavaScript 실행 시간 증가는 첫 번째 입력 지연 (FID)에 직접적인 영향을 미칩니다. JavaScript가 오버로드되면 웹 사이트는 즉시 사용자 입력에 응답 할 수 없으므로 응답하지 않고 사용자 경험이 좋지 않습니다.

4. 메모리 소비

JavaScript 코드는 다른 프로그램과 마찬가지로 메모리를 실행해야합니다. 복잡하거나 최적화되지 않은 코드는 상당한 양의 메모리를 먹을 수 있습니다.

결과적으로, 이로 인해 브라우저가 느려지고 특히 메모리가 거의없는 모바일 장치에서는 충돌이 발생할 수 있습니다.

5. SEO에 부정적인 영향을 미칩니다

검색 결과 순위를 매길 때 Google 페이지 속도와 같은 검색 엔진.

JavaScript 실행이 느리면 페이지 성능이 줄어들고 검색 결과에서 사이트 순위에 영향을 줄 수 있습니다.

요컨대, 지연된 JavaScript 실행은 렌더링 속도가 느려지고 FIF가 증가하며 브라우저에 과부하가 걸릴 수도 있습니다. 이 모든 것이 끔찍한 사용자 경험을 추가하여 방문자가 웹 사이트를 포기하게 할 수 있습니다.

JavaScript 실행 시간을 측정하는 방법은 무엇입니까?

JavaScript 실행 시간을 최적화하려면 먼저 정확하게 측정해야합니다. 다행히 JavaScript 성능을 모니터링하고 WordPress 사이트의 속도에 영향을 미치는 문제를 식별하는 데 사용할 수있는 몇 가지 도구와 기술이 있습니다.

Pagespeed Insights로 JS 실행 시간 측정

Google Pagespeed Insights는 웹 페이지 속도를 측정하고 최적화 아이디어를 제공하는 Google의 무료 도구입니다.

JavaScript 실행 시간을 측정하는 데 사용하는 방법은 다음과 같습니다.

Pagespeed Insights 웹 사이트를 방문하거나 Pagespeed Insights Chrome 확장자를 사용하십시오.

여기에서 분석하려는 웹 사이트 URL을 입력하고 "분석"버튼을 클릭하십시오.

PagesPeed Insights는 JavaScript 실행 시간을 포함한 여러 성능 지표가 포함 된 보고서를 제공합니다.

JavaScript 실행 시간 감소에 대한 경고를 받으면 제안을 따르십시오.

gtmetrix로 JS 실행 시간 측정

GTMetrix는 JavaScript 실행 시간을 포함하여 웹 페이지 성능을 측정하는 또 다른 일반적인 도구입니다.

gtmetrix 웹 사이트로 이동하여 웹 페이지의 URL을 입력 한 다음 지금 테스트 옵션을 클릭하십시오.

로드 후 잠시 후 GTMetrix는 JavaScript 실행 시간을 포함한 성능 메트릭으로 완전한 보고서를 생성합니다.

gtmetrix의 이러한 통찰력을 사용하여 JavaScript 코드를 최적화하고 전반적인 웹 페이지 성능을 향상시킬 수 있습니다.

JavaScript 실행 시간을 줄이는 방법

다음은 JavaScript 실행 시간을 줄이고 웹 사이트를 더 빠르게 만들고 사용자 경험을 향상시키는 몇 가지 쉬운 방법입니다.

1. 부풀어 오른 테마/플러그인을 피하십시오

WordPress에서 느린 JavaScript 실행의 가장 일반적인 이유 중 하나는 부풀어 오른 테마 및 과도한 플러그인 때문입니다.

기능이 풍부한 테마와 플러그인은 매력적으로 보일 수 있지만 종종 성능 비용으로옵니다.

모든 추가 스크립트, 애니메이션 또는 기능은 웹 사이트의로드 시간에 추가되어 실행 속도가 느리고 CPU 사용량이 높고 사용자 경험이 나빠집니다.

부풀어 오른 테마 및 플러그인이 문제가되는 이유는 무엇입니까?

• 과도한 코드 실행 : 무거운 테마와 제대로 코딩 된 플러그인에는 더 많은 리소스가 필요하므로 JavaScript 실행 시간이 증가합니다.
• 추가 HTTP 요청 : 일부 테마 및 플러그인은 추가 CS, JavaScript 및 글꼴을 사용하지 않으면 추가로로드합니다.
• 서버로드 증가 : 너무 많은 활성 플러그인으로 인해 서버 응답 시간이 느려져 SEO 및 사용자 경험에 영향을 줄 수 있습니다.

가벼운 대안을 선택하는 방법?

• 성능 최적화 테마 사용 : 속도를 우선시하는 GeneratePress, Astra 또는 Kadence와 같은 빠른 최소 테마를 고수하십시오.
• 플러그인 감사 : 정기적으로 플러그인을 검토하고 더 이상 필요하지 않은 것을 비활성화하십시오. 플러그인에 자바 스크립트가 많으면 가벼운 대안을 사용해보십시오.
• 필요한 것만 사용하십시오 : 유사한 기능을 위해 여러 플러그인을 설치하지 마십시오. 대신 스크립트 과부하를 최소화하는 올인원 솔루션을 선택하십시오.
• 외부 스크립트 제한 : 불필요한 타사 스크립트, 글꼴 또는 추적 코드가 포함 된 테마 및 플러그인을 사용하지 마십시오.

WordPress 설정을 최적화하면 JavaScript 실행 시간을 줄이고 WordPress 사이트 속도를 높이며 SEO 순위 및 사용자 경험을 모두 향상시킵니다.

2. JS를 지연시키고 사용하지 않은 JS를 제거하십시오

사용자 상호 작용을 할 때까지로드 할 수 없도록 JS 파일을 지연시켜야합니다. 이는 사용자가 버튼을 클릭하거나 페이지의 내용을 스크롤하지 않는 한 브라우저가 JS 스크립트를 실행하지 않음을 의미합니다.

FlyingPress, WP Rocket, Perfmatters, Flying Scripts 등과 같은 대부분의 최적화 플러그인이이를 수행합니다. 그러나 각각은 다르게 수행하므로 파일을 추가하는 방법 (파일 이름, 키워드 또는 자동 WP Rocket)에 대한 플러그인 문서를 읽으십시오.

예를 들어 WP Rocket 플러그인을 사용하는 경우 지연 JavaScript 실행 기능을 활용할 수 있습니다.

파일 최적화 탭으로 이동하여 지연 JavaScript 실행 옵션을 확인하십시오. 플러그인은 사용자 상호 작용까지 JS 파일로드를 자동으로 지연시킵니다.

또는 PerfMatters를 사용하는 경우 PerfMatters 플러그인 설정으로 이동하십시오. JavaScript 메뉴를 클릭 한 다음 지연 섹션에서 지연 JavaScript를 토글합니다.

또한 사용하지 않은 JS 파일을 삭제해야합니다. 다시 말해, 페이지가 표시되지 않은 모든 JS 스크립트는 페이지가 표시된 후에 만로드되어야합니다.

이를 통해 브라우저는 불필요한 JS 파일에 의해 쇠약 해지지 않고 필요한 자료 만 렌더링 할 수 있습니다.

3. JS를 연기합니다

JS 실행 시간을 줄이는 또 다른 효과적인 방법은 JS 파일을 지연시키는 것입니다.

WordPress 웹 사이트에서 JavaScript를 연기하면 브라우저가 페이지를 렌더링 할 때만로드합니다.

플러그인의 도움으로 JS 파일을 수동으로 연기 할 수 있습니다.

연기 속성을 수동으로 사용하려면 먼저 연기 속성을 추가하기 전에 연기 할 JS 스크립트를 식별해야합니다.

다음은 연기 속성의 예입니다.

플러그인을 사용하려면 WP 로켓, 자동 최적화, FlyingPress, 자산 정리 등에서 선택할 수 있습니다.

예를 들어, Delay JS와 마찬가지로 WP Rocket은 부하 JavaScript Deferred 기능도 제공합니다.

파일 최적화 탭에서 JavaScript 연기를로드 하고 특정 JS 파일이 연기되지 않도록 제한 할 수 있습니다. 몇 번의 클릭만으로 중요한 웹 성능 최적화 기술을 구현할 수 있습니다!

4. JS를 미치십시오

WordPress에서 JavaScript 실행 시간을 줄이는 가장 쉽지만 가장 효과적인 방법 중 하나는 Minification입니다.

JavaScript를 조정한다는 것은 기능에 영향을 미치지 않고 공백, 라인 브레이크 및 댓글과 같은 불필요한 문자를 제거하는 것을 의미합니다. 결과? 더 작은 파일 크기, 더 빠른 다운로드 및 개선 된 페이지 속도.

작업을 완료하는 데 도움이되는 몇 가지 JavaScript 미니 화 도구가 있습니다.

번거롭지 않은 접근 방식은 AutoPtimize, WP Rocket, Fast Velocity Minific, FlyingPress 등과 같은 플러그인을 사용하십시오.

선호하는 플러그인을 설치하고 JavaScript Minification을 활성화하고 도구가 작업을 수행하도록하십시오.

5. 특정 페이지에서 JavaScript를 언로드하십시오

모든 스크립트가 WordPress 사이트의 모든 페이지에서 실행될 필요는 없습니다. 그렇다면 실행 시간을 늘리고 성능을 늦추고 사용자 경험에 부정적인 영향을 줄 수 있습니다.

예를 들어:

• 양식이없는 경우에도 모든 페이지에 스크립트로드에 연락하십시오.
• WooCommerce 스크립트가 필요하지 않은 블로그 게시물에서 실행됩니다.
• 슬라이더 스크립트는 슬라이더가없는 텍스트가 많은 페이지에 나타납니다.

불필요한 스크립트 각 스크립트는 JavaScript 실행 워크로드를 증가시켜 페이지 렌더링 속도가 느려집니다.

이 문제에 대한 가장 쉬운 해결책 중 하나는 필요하지 않은 페이지에서 불필요한 스크립트를 비활성화하는 것입니다.

자산 정리 또는 PerfMatters와 같은 플러그인을 사용하면 코드를 수정하지 않고 페이지 당 JavaScript, 게시물 유형 또는 범주를 비활성화 할 수 있습니다.

또는 코드에 익숙한 경우 functions.php 파일에서 wp_dequeue_script ()를 사용하여 불필요한 스크립트가로드되는 것을 방지하십시오.

function remove_unnecessary_js() { if (!is_page('contact')) { wp_dequeue_script('contact-form-script'); } } add_action('wp_enqueue_scripts', 'remove_unnecessary_js');

6. 호스트 타사 JavaScript 로컬

글꼴, 분석 스크립트 및 추적 코드는 외부 소스에서 종종로드되는 타사 JavaScript 파일 중 일부입니다. 이러한 스크립트는 유용한 기능을 제공하지만 외부 요청, 네트워크 대기 시간 및 서버 응답 시간이 지연되어 JavaScript 실행 시간을 상당히 늘릴 수 있습니다.

타사 JavaScript 파일을 로컬로 호스팅하면로드 시간을 개선하고 외부 서버에 대한 의존성을 줄이며 전체 사이트 성능을 향상시킬 수 있습니다.

제 3 자 JavaScript를 로컬로 주최하려면 타사 제공 업체의 사이트를 방문하여 필요한 JavaScript 파일 (예 : Google Fonts, Recaptcha 또는 Analytics Scripts)을 다운로드하십시오.

이제 FTP를 사용하여 파일을 /wp-content/uploads/ 또는 /wp-includes/js/ directory에 저장하십시오.

다음으로 테마의 functions.php를 수정하거나 wp_enqueue_script () 의 스크립트를 외부 URL 대신 로컬 버전을 가리 키도록하십시오.

function load_local_script() { wp_enqueue_script('local-js', get_template_directory_uri() . '/js/script-name.js', array(), null, true); } add_action('wp_enqueue_scripts', 'load_local_script');

WP Rocket과 같은 플러그인을 사용하거나 자동 최적화하여 로컬로 호스팅되는 JavaScript 파일을 미리 채우고 캐시하여 더 빠른 실행을 위해 캐시합니다.

오늘 JS 실행 시간을 줄이기 시작하십시오

느린 WordPress 사이트는 방문자를 좌절시키고 SEO 순위를 상하게 할 수 있습니다. 주요 범인 중 하나? 과도한 JavaScript 실행 시간. JavaScript가 처리하는 데 너무 오래 걸리면 기본 스레드를 차단하고 렌더링을 지연 시키며 첫 입력 지연 (FID)을 증가 시키며 성능에 부정적인 영향을 미칩니다.

이 안내서는 WordPress에서 JavaScript 실행 시간을 쉽게 줄일 수있는 쉬운 방법을 보여 주므로 현장 속도 및 사용자 경험을 향상시킬 수 있습니다. 주요 전략에는 다음이 포함됩니다.

• 불필요한 코드 실행을 방지하기 위해 부풀어 오른 테마 및 플러그인을 피하십시오.
• 필수 불필요한 JavaScript를 지연시키고 제거하여 필수 스크립트가 페이지 속도를 늦추지 않도록합니다.
• 브라우저가 중요한 컨텐츠를 먼저 우선 순위를 정할 수 있도록 JavaScript 실행을 연기하십시오.
• 파일 크기를 줄이고 실행 속도를 높이기 위해 JavaScript 파일을 조정합니다.
• 불필요한 스크립트를 제거하기 위해 특정 페이지에서 사용되지 않는 JavaScript를 언로드합니다.
• 외부 서버 요청으로 인한 지연을 제거하기 위해 제 3 자 JavaScript를 로컬로 호스트합니다.

이러한 JavaScript 최적화 기술을 구현하면 방문자를위한 개선 된 핵심 웹 생명, 높은 페이지 속도 및 원활한 사용자 경험을 달성 할 수 있습니다.

자세한 내용은 다른 유용한 리소스를 확인하십시오.

• 10 개의 최고의 WordPress 캐시 플러그인 (무료 및 프리미엄 옵션)
• WordPress에서 레버리지 브라우저 캐싱을 쉽게 수정하는 방법
• WP Rocket Review : 정말로 지불 할 가치가 있습니까?
• Perfmatters는 그만한 가치가 있습니까? 심층적 인 검토
• Nitropack Review : 최고의 속도 도구 또는 검은 모자 SEO?

마지막으로 Facebook 및 X (이전의 Twitter)에서 우리를 팔로우하여 최신 WordPress 및 블로그 관련 기사에 대한 업데이트를 유지하십시오.