WordPress의 렌더링 차단 JavaScript 및 CSS: 문제를 해결하는 5가지 플러그인

Google이 로드하는 데 XNUMX초 이상 걸리는 웹사이트는 SEO 친화적이지 않다고 발표한 것은 그리 오래되지 않았습니다.

인터넷과 디지털 마케팅의 시대에 전 세계 수천 명의 경쟁자와 효과적으로 경쟁하려면 가장 빠른 웹사이트가 필요합니다. 더 빠른 웹사이트가 방문자를 유치하고 콘텐츠에 대한 참여도를 높일 가능성이 더 높다는 데는 의심의 여지가 없습니다.

WordPress 웹사이트를 운영한다는 것은 사이트에 액세스할 수 있도록 동시에 실행되는 상당한 수의 스크립트를 의미합니다.

그러나 이러한 모든 항목이 항상 로드하는 데 필수적인 것은 아닙니다. 웹 사이트 성능을 확인한 적이 있다면 Google PageSpeed​​ Insights, 속도에 영향을 미치는 렌더링 차단 JavaScript 및 CSS 옵션을 접했을 것입니다.

오늘 우리는 이러한 외부 파일에 대해 이야기하고 사이트를 개선하기 위해 제거할 수 있는 방법에 대해 설명할 것입니다.

 

렌더링 차단 JavaScript 및 CSS란 무엇입니까?

요컨대, 렌더링 차단 JavaScript 및 CSS는 사이트가 로드되고 표시되기 전에 완전히 실행하는 데 필요한 일련의 스타일 시트 및 스크립트입니다.

WordPress 웹사이트에 설치하는 테마 및 플러그인은 웹사이트의 프런트 엔드 섹션에 이러한 파일을 많이 추가합니다. 짐작하셨겠지만 일부는 페이지 로드 시간을 늦추고 페이지 렌더링을 방해합니다.

웹사이트 방문자가 웹사이트를 열면 인터넷 브라우저는 HTML보다 먼저 필요한 JavaScript 및 CSS 파일을 로드합니다.

이러한 필수 요소가 없는 페이지는 사용할 수 없기 때문에 이는 일반적인 절차입니다. 문제는 이러한 파일이 완전히 로드되기 전에는 웹 브라우저가 페이지를 렌더링할 수 없다는 것입니다.

여기서 트릭은 방문자가 귀하의 페이지를 열 때 보는 것에 대해 문제를 일으키지 않고 일부 스크립트의 로드를 연기할 수 있다는 것입니다.

웹사이트 소유자는 웹 브라우저가 사용자가 즉시 보는 페이지 상단에 필요한 것 이외의 코드를 로드하지 못하도록 사이트를 수정할 수 있습니다.

즉, 브라우저는 사용자가 페이지를 아래로 스크롤하기 전에 해당 섹션의 필수 파일만 로드합니다. 웹 페이지의 이 영역을 ATF라고 하며, Above the Fold를 의미합니다. 사용자가 아래로 스크롤해야 볼 수 있는 다른 부분은 비 ATF 섹션입니다.

따라서 웹사이트에서 비 ATF 섹션과 관련된 JavaScript 및 CSS 코드를 로드하는 경우 페이지를 로드하는 데 시간이 더 오래 걸립니다. 이것이 바로 Google이 웹사이트 코드에서 불필요한 리소스 실행을 중지하라고 지시하는 이유입니다.

 

렌더링 차단 JavaScript 및 CSS 찾기

이 문제를 찾는 가장 쉬운 방법은 Google PageSpeed ​​Insights를 사용하여 속도 테스트를 실행하는 것입니다. 페이지를 방문하면 필수 필드에 URL 주소를 입력한 다음 '분석' 버튼을 클릭하기만 하면 됩니다.

페이지에서 이 문제가 실행 중인 경우 스크롤 없이 볼 수 있는 콘텐츠에서 렌더링 차단 JavaScript 및 CSS를 제거하라는 제안이 표시됩니다.

그 점을 가장 잊지 않았으면 좋겠어. 웹사이트 점수 70에서 90 사이 어딘가에 있고, 최고 성능을 가진 사이트도 100에 가까운 숫자를 거의 달성하지 못합니다. 따라서 사이트가 100에 도달하도록 강요해서는 안 됩니다. 사용자 경험에 영향을 미치지 않으면서 최고 점수를 달성할 수 있도록 최대한 노력하세요. 부정적으로.

사이트에서 사용하는 테마와 도구에 따라 일부 스크립트는 완벽한 UX를 위한 필수 요소 청중에게 제안해야합니다. 따라서 이 Google 도구의 결과 페이지에서 조금 더 높은 점수를 얻기 위해 해당 항목을 제거하는 것은 현명하지 않습니다.

 

렌더링 차단 JavaScript 및 CSS 수정

렌더링 차단 JavaScript를 제거하기 위한 많은 전략이 있습니다. 주요 방법은 Async 및 Defer입니다. 첫 번째 방법은 사용자의 브라우저가 다른 HTML 부분을 구문 분석하면서 JavaScript를 다운로드할 수 있도록 합니다.

파일이 다운로드되는 동안 구문 분석이 완전히 중지되지는 않지만 HTML 파서 다운로드할 때 스크립트를 실행하기 위해 일시 ​​중지합니다. 반면에 Defer 접근 방식은 다른 HTML 부분을 구문 분석하는 동안 브라우저가 JavaScript를 다운로드할 수 있도록 하며 HTML 구문 분석이 완료되지 않는 한 스크립트를 실행하지 않습니다.

ATF 콘텐츠를 로드하는 데 필요한 코드를 지연시킬 수 있으므로 렌더링 차단 CSS를 제거하는 것이 더 어렵습니다. 절차는 약간 복잡하며 웹 개발에 대한 충분한 이해가 필요합니다.

그럼에도 불구하고 우리는 스스로 웹사이트를 운영하는 일반 사용자를 다루고 있습니다.

우리 모두는 WordPress가 일반 사용자가 한 줄의 코드를 작성하지 않고도 모든 것을 조정할 수 있는 모듈식 시스템이라는 것을 알고 있습니다. 이 문제를 수정하는 것도 동일하며 적절한 플러그인을 설치하면 문제를 빠르게 해결할 수 있습니다.

 

렌더링 차단 JavaScript 및 CSS를 수정하는 최고의 WordPress 플러그인

다음 단락에서는 다섯 가지를 소개합니다. 최고 성능의 WordPress 플러그인 이 문제를 가장 근본적으로 해결하는 데 도움이 됩니다.

주의: 다음 도구를 사용하기 전에 웹 사이트를 백업하여 데이터 손실을 방지하십시오.

 

Autoptimize

XNUMXD덴탈의 Autoptimize 플러그인은 Google PageSpeed ​​Insights와 같은 웹사이트 분석 도구에서 제안한 문제를 해결하기 위해 명시적으로 만들어졌습니다. 웹 사이트 성능의 다른 측면에 크게 초점을 맞추지 않고 JavaScript 및 CSS 파일의 전달을 향상시킵니다.

기본 최적화 기능을 찾고 있다면 이 플러그인이 필요한 것을 제공할 것입니다. 이 도구의 좋은 점은 웹사이트의 이미지를 최적화된 WebP 형식으로 변환한다는 것입니다.

자동 최적화를 설치하고 활성화하면 플러그인 설정에 있는 'JavaScript 코드 최적화' 및 'CSS 코드 최적화' 옵션 상자를 선택해야 합니다. CSS 및 스크립트 파일을 집계하는 이 두 옵션 아래의 상자를 선택하지 않도록 주의하십시오.

이 플러그인은 무료로 사용할 수 있지만 웹 사이트 구성에 도움이 되는 프리미엄 패키지를 구입할 수도 있습니다.

 

WP Rocket

WP Rocket JavaScript 및 CSS 수정, 지연 로딩 설정과 같은 다양한 측면을 지원하는 WordPress 최적화 도구 중에서 잘 알려진 이름입니다. WP Rocket의 설정 프로세스는 매우 간단하지만 처음에는 인터페이스에서 작업이 수행되는 방식을 이해하기 어려울 수 있습니다.

즉시 사용 가능하며 설치 직후 웹 사이트에 최적의 설정을 적용합니다. 스크립트 변경으로 인한 웹 사이트 오작동의 불가피성을 고려하여 플러그인은 기본적으로 렌더링 차단 JavaScript 및 CSS 설정을 활성화하지 않습니다.

그러나 플러그인 설정으로 이동하여 'CSS 파일' 및 'JavaScript 파일' 섹션에서 관련 옵션을 찾아 이 기능을 쉽게 켤 수 있습니다.

기본 플러그인은 49년 지원과 함께 제공되는 연간 $XNUMX입니다. 또한, 여러 개를 찾을 수 있습니다. 무료 엑스트라 WordPress의 핵심 플러그인도 마찬가지입니다.

 

래빗로더

래빗로더 웹사이트를 더 빠르고, 더 매끄럽고, 더 효율적으로 운영할 수 있도록 설계된 최첨단 WordPress 성능 최적화 플러그인입니다.

널리 호평을 받고 있는 WP Rocket과 유사하게 RabbitLoader는 사이트 성능을 새로운 수준으로 끌어올릴 뿐만 아니라 게임의 다른 플레이어와 차별화되는 몇 가지 혁신적인 기능을 도입합니다.

캐싱 매직: RabbitLoader는 사이트 변경 사항에 실시간으로 적응하는 동적 캐싱 시스템을 제공하여 방문자가 속도 저하 없이 항상 최신 콘텐츠를 볼 수 있도록 함으로써 한 단계 더 발전했습니다.

이미지 최적화: 이미지는 웹 사이트의 속도를 크게 저하시킬 수 있지만 RabbitLoader의 이미지 최적화 기능은 게임 체인저입니다. 품질 저하 없이 이미지를 최적의 크기로 자동으로 압축하고 크기를 조정하므로 시각적 매력을 희생하지 않고도 사이트가 빠르게 로드됩니다.

지연 로딩: WP Rocket과 RabbitLoader는 모두 이미지와 iframe에 대한 지연 로딩을 제공하지만 RabbitLoader는 지연된 JavaScript 로딩을 제공하여 더 나아갑니다.

호환성 : RabbitLoader는 WP Rocket과 마찬가지로 다양한 WordPress 테마 및 플러그인과 완벽하게 작동하도록 설계되었습니다. 간단한 블로그이든 복잡한 전자상거래 웹사이트이든 RabbitLoader는 충돌 없이 사이트 성능을 향상시키도록 설계되었습니다.

 

W3 총 캐시

W3 총 캐시 캐싱 문제뿐만 아니라 스크립트 및 스타일 시트로 인해 발생하는 문제도 처리하는 강력한 성능 향상 프로그램입니다.

먼저 플러그인 설정에서 최소화 옵션을 활성화하고 수동 모드로 설정하여 렌더링 차단 JavaScript 및 CSS를 쉽게 제거할 수 있습니다.

다음으로 '렌더링 차단 리소스 제거' 탭을 클릭하고 차단 스크립트 및 스타일 시트에 필요한 파일의 전체 링크 주소를 복사해야 합니다. 이제 이 링크를 사용하여 'JS 섹션'에 입력할 수 있습니다. 성능>축소 탭.

W3 Total Cache는 XNUMX만 개 이상의 활성 설치를 보유하고 있으며 WordPress.org 웹사이트에서 무료로 사이트에 다운로드할 수 있습니다.

 

스피드 부스터 팩

스피드 부스터 팩 스타일 시트, JavaScripts, 지연 로딩 및 클러터 제거를 최적화하는 신뢰할 수 있는 도구입니다. 개발자 팀은 이 플러그인을 최신 업데이트 및 보안 조치로 최신 상태로 유지하기 위해 지속적으로 업데이트하고 있습니다.

제품 및 서비스를 온라인으로 판매하는 경우, WooCommerce 관련 최적화 Speed ​​Booster Pack의 기능은 인터넷에서 매장의 가시성을 높이는 데 많은 도움이 됩니다.

관리자 패널의 Speed ​​Booster Pack 메뉴에서 '고급' 탭을 클릭하여 WordPress 웹사이트에서 렌더링 차단 JavaScript 및 CSS를 빠르게 수정할 수 있습니다.

JavaScript의 경우 '스크립트를 바닥글로 이동' 및 'JavaScript 파일 구문 분석 연기' 옵션을 활성화합니다. 그런 다음 'CSS 최적화' 메뉴로 이동하여 사용 가능한 옵션 중에서 선택하여 사이트 성능을 향상시키십시오.

Speed ​​Booster Pack은 WordPress.org 웹사이트에서 제공되는 무료 솔루션입니다.

 

JCH 최적화

JCH 최적화 유용한 도구와 함께 제공되는 추천 플러그인 목록의 마지막 항목입니다. 페이지 로딩 속도 향상. 예를 들어 페이지를 로드하는 데 필요한 HTTP 요청 수를 줄이는 동시에 해당 페이지의 크기를 줄이는 데 도움이 됩니다.

스프라이트 생성기 배경 이미지를 로드하기 위한 HTTP 요청 수를 줄이는 이 플러그인에서 사용할 수 있는 또 다른 흥미로운 기능입니다.

JCH Optimize를 사용하면 프리미엄 요금제로 업그레이드하면 렌더링 차단 JavaScript 및 CSS를 제거할 수 있습니다. '자동 설정' 섹션에서 '프리미엄' 또는 '최적' 옵션을 활성화하기만 하면 됩니다. CSS 제공 설정도 마찬가지로 Pro 버전에서만 사용할 수 있습니다.

이 플러그인은 WordPress.org에서 무료로 설치할 수 있지만 잠재력을 최대한 활용하려면 프리미엄 플랜을 구매해야 합니다. 가격 계획은 29개월 동안 $99부터 시작하여 평생 이용 시 $XNUMX에 이릅니다.

 

요약

웹사이트 로딩 속도는 청중을 끌어들이고, 참여시키고, 유지하는 데 가장 중요한 요소 중 하나입니다. 웹사이트를 검색 엔진에 맞게 최적화할 때 높은 우선 순위를 부여하고 Google PageSpeed ​​Insights 도구를 사용하여 이 분야에서 얼마나 잘 수행하는지 측정해야 합니다.

렌더링 차단 JavaScript 및 CSS 항목은 Google의 강력한 도구를 사용할 때 볼 수 있는 가장 일반적인 제안 중 하나입니다. 이 기사에서 소개한 다섯 가지 플러그인 중 하나를 설치하고 페이지 로딩 속도 향상 크게.

이 튜토리얼이 도움이 되기를 바라며 가능한 최상의 결과를 위해 빠른 로딩 웹사이트를 즐기시기 바랍니다.