사이트 속도 개선: 렌더링 차단 JS 및 CSS 제거

WordPress를 사용하면 플러그인과 테마를 선택하여 맞춤형 웹사이트를 구축할 수 있습니다. 그러나 이는 사이트에 로딩 시간과 성능을 저하시키는 스크립트가 많다는 것을 의미할 수 있습니다. 이러한 모든 스크립트를 즉시 로드할 필요는 없으며 일부는 실제로 방문자가 콘텐츠를 최대한 빨리 보지 못하도록 차단할 수 있습니다.

이러한 외부 파일을 렌더링 차단 JavaScript 및 CSS라고 합니다. 이 기사에서는 이러한 렌더링 차단 리소스가 무엇인지 설명하고 WordPress 사이트에서 렌더링 차단 리소스를 제거하는 방법을 보여줍니다. 시작하자!

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

웹사이트가 브라우저에 로드되면 대기열에 있는 각 스크립트에 대한 호출을 보냅니다. 일반적으로 웹 사이트가 브라우저에 표시되기 전에 해당 대기열이 비어 있어야 합니다. 웹사이트가 완전히 로드되는 것을 막을 수 있는 스크립트 대기열은 렌더링을 차단하는 JavaScript 및 CSS 파일입니다.

스크립트 대기열이 매우 길면 방문자가 사이트에 액세스할 수 있을 때까지 시간이 걸릴 수 있습니다. 종종 이러한 스크립트 중 다수는 웹 사이트를 바로 보는 데 필요하지 않으며 사이트 자체가 완전히 로드될 때까지 쉽게 실행될 때까지 기다릴 수 있습니다.

즉, 이러한 종류의 스크립트는 뷰어의 즉각적인 요구에 실제로 기여하지 않고 웹 페이지 속도를 저하시킵니다. 뷰어가 바로 볼 수 있는 내용(종종 'above the fold' 요소라고 함)을 포함하지 않는 스크립트는 페이지의 나머지 부분이 로드될 때까지 연기되어야 합니다.

렌더링 차단 JavaScript 및 CSS가 웹 페이지에 좋지 않은 이유는 무엇입니까?

렌더링 차단 JavaScript 및 CSS 스크립트는 웹 페이지 속도를 저하시키며 이는 여러 가지 이유로 좋지 않습니다. 사이트 속도는 일반적인 사용성 및 검색 엔진 최적화(SEO)를 포함하여 WordPress 웹사이트의 많은 중요한 측면에서 중요한 역할을 합니다. 사이트가 느리게 로드되면 방문자를 잃을 가능성이 높아지고 검색 엔진 결과에서 높은 순위를 차지할 가능성이 줄어듭니다.

물론 사이트 속도와 성능은 렌더링 차단 리소스 이상의 영향을 받습니다. 즉, 이것은 로딩 시간에 상당한 차이를 만들 수 있는 요소입니다. 웹 페이지의 모든 리소스는 바이트를 차지하므로 다운로드 시간이 길어질 수 있습니다. 사이트에 있는 스크립트가 적고 가벼울수록 좋습니다. 결국, 느린 사이트가 비즈니스에 부정적인 영향을 미치게 하고 싶지는 않을 것입니다.

일반적으로 전체 속도를 개선하려면 웹사이트의 코드를 가능한 한 깨끗하고 최소화하는 것이 가장 좋습니다. 그러나 항상 일부 남은 코드가 있습니다. 기본적으로 브라우저는 렌더링 차단 스크립트를 포함하여 모든 것을 한 번에 로드하려고 시도합니다.

사용자가 페이지를 처음 방문했을 때 사이트가 올바로 보이고 사용 가능하도록 하는 데 필요한 스크립트를 먼저 로드하는지 확인하는 것은 귀하에게 달려 있습니다. 그런 다음 나머지 스크립트를 로드해야 합니다.

렌더링 차단 JavaScript 및 CSS를 제거하는 방법

렌더링 차단 스크립트를 제거하기 전에 문제를 일으키는 스크립트를 식별해야 합니다. 이렇게 하려면 Google의 PageSpeed ​​Insights를 사용하는 것이 좋습니다. URL을 입력하기만 하면 Google에서 페이지 성능을 저하시키는 스크립트를 정확히 알려줍니다.

렌더링 차단 JavaScript 및 CSS 제거 아래의 결과에 나타나는 스크립트 목록을 만드십시오. 수동으로 해결하려고 하든 플러그인을 사용하든 다음 수정 사항을 적용할 때 특별히 주의를 기울여야 하는 스크립트입니다.

사이트에서 렌더링 차단 스크립트의 수를 줄이려면 몇 가지 모범 사례를 따라야 합니다.

• JavaScript 및 CSS를 '축소'합니다. 이는 코드에서 불필요한 공백과 불필요한 주석을 모두 제거하는 것을 의미합니다.
• JavaScript와 CSS를 연결합니다. 이렇게 하려면 여러 가지 .js 및 .css 파일을 가져와 결합해야 합니다. 이상적으로는 그러한 파일이 몇 개만 있을 것입니다.
• 자바스크립트 로딩을 연기하세요. 페이지의 다른 모든 항목이 준비될 때까지 JavaScript 파일이 로드되기를 기다리도록 하는 것이 유용할 수 있습니다. JavaScript를 연기하는 신뢰할 수 있는 방법은 비동기 로딩을 사용하는 것입니다.

많은 전면 플러그인이 자체 JavaScript 및 CSS 파일과 함께 제공되기 때문에 이러한 팁은 WordPress에서 손으로 수행하기 까다로울 수 있습니다. 하나의 플러그인으로 5개 또는 6개 이상의 스크립트를 사이트의 프런트 엔드에 쉽게 연결할 수 있습니다. 이러한 파일은 매우 빠르게 추가될 수 있습니다!

고맙게도 WordPress는 하나의 결합된 필터를 사용하여 모든 프런트 엔드 대면 스크립트를 등록합니다. 즉, 무엇을 찾아야 할지 정확히 알지 못하는 경우에도 들어오는 모든 JavaScript 또는 CSS 파일을 식별하고 처리할 수 있는 기회가 있음을 의미합니다. 물론 이것은 처음부터 시작하는 것보다 플러그인으로 수행하는 것이 훨씬 쉽습니다.

렌더링 차단 JavaScript 및 CSS를 줄이기 위한 플러그인

렌더링을 차단하는 JavaScript 및 CSS를 제거하여 사이트를 최적화하는 데 도움이 되는 몇 가지 WordPress 플러그인이 있습니다. 이 섹션에서는 인기 있는 네 가지 옵션을 살펴보겠습니다.

1. WP 로켓

WP Rocket은 CSS 및 JavaScript 축소, 지연 로딩 이미지, 원격 JavaScript 요청 연기 등과 같은 작업을 통해 사이트 최적화를 돕습니다. 최적화 플러그인의 'Swiss Army Knife'입니다.

이 플러그인을 사용하는 가장 큰 이점 중 하나는 쉬운 설정 프로세스입니다. 그러나 한 가지 잠재적인 단점은 사용자 인터페이스입니다. 플러그인은 WordPress 대시보드에서 다른 경험을 생성하며 익숙할 수 있습니다. 일부 오랜 사용자는 이러한 인터페이스 변경을 인정하지 않을 수 있습니다. 그래도 플러그인의 실제 기능은 여전히 ​​최고 수준입니다.

WordPress Plugin Directory에서 WP Rocket에 대해 얻을 수 있는 몇 가지 무료 추가 기능이 있습니다. 그러나 기본 플러그인 자체는 하나의 웹 사이트와 1년 지원에 대해 연간 $49로 가격이 책정되며 추가 계층은 더 많은 옵션을 제공합니다.

2. 자동 최적화

자동 최적화는 PageSpeed ​​Insights와 같은 추천 도구에서 발생하는 문제를 해결하기 위해 특별히 제작되었습니다. 웹사이트용 플러그인을 구성할 수 있는 모든 설정은 WordPress 대시보드의 새 메뉴에 포함됩니다.

자동 최적화는 스크립트 축소 및 캐싱과 같은 모든 기본 최적화 작업을 다룹니다. 고유한 기능 중 하나는 이미지를 최적화하고 WebP 형식으로 변환할 수도 있다는 것입니다. 이 도구는 구성하기가 다소 복잡할 수 있다는 점을 염두에 두어야 하지만 전반적으로 훌륭한 평가를 받았습니다.

플러그인 자체는 무료이지만 구성을 지원하기 위해 개발자로부터 두 가지 패키지 중 하나를 구입할 수 있습니다. 약 165달러(€149)의 맞춤형 구성 계획이 있습니다. 또한 약 $667(€599)에 웹 사이트 및 전문가 플러그인 구성에 대한 완전한 실습 전문 검토를 받을 수 있습니다.

3. JCH 최적화

JCH Optimize는 또한 페이지 로드 시간을 개선하는 데 도움이 되는 몇 가지 고유한 도구를 제공합니다. 예를 들어 페이지를 로드하는 데 필요한 HTTP 요청 수를 줄이고 해당 페이지의 크기도 줄일 수 있습니다. 그 결과 서버 부하가 감소하고 대역폭 요구 사항이 낮아집니다.

JCH Optimize의 또 다른 독특한 기능은 Sprite Generator입니다. 이는 배경 이미지를 '스프라이트'로 결합하므로 브라우저에 로드하는 데 더 적은 HTTP 요청이 필요합니다. 그러나이 플러그인의 단점 중 하나는 가파른 학습 곡선 일 수 있습니다. 대부분의 사용자는 오류를 방지하기 위해 플러그인을 올바르게 구성했는지 확인하기 위해 지원 문서에 의존해야 합니다.

즉, 플러그인에는 많은 별점 5개 리뷰와 10,000개 이상의 활성 설치가 있습니다. 가격면에서 사용 가능한 무료 버전의 플러그인이 있습니다. 그러나 Optimize Image API와 같은 지원 및 고급 기능에 액세스하려면 구독을 구매해야 합니다. 6개월 지원 및 API 액세스에 $29부터 시작합니다.

4. 스피드 부스터 팩

Speed ​​Booster Pack은 CSS 및 JavaScript 최적화, 지연 로딩 및 클러터 제거 기능을 제공합니다. Optimocha의 개발자는 지속적으로 발전하는 코드 기반으로 플러그인을 최신 상태로 유지하므로 항상 최신 방법을 사용할 수 있습니다. 병목 현상을 해결하는 기본 제공 WooCommerce 최적화 기능도 있습니다.

Speed ​​Booster Pack 사용의 이점 중 하나는 CDN(Content Delivery Network) 통합 기능이 있다는 것입니다. 이렇게 하면 WordPress에서 선택한 CDN을 쉽게 사용하는 동시에 플러그인으로 최적화할 수 있습니다. 이 플러그인의 단점은 올바르게 구성하기 위해 따라야 하는 시행착오 프로세스에 있습니다.

무료 플러그인과 함께 사용할 수 있는 서비스 옵션이 있다는 점도 주목할 가치가 있습니다. Autooptimize와 마찬가지로 개발자는 고유한 웹 사이트에 맞게 플러그인을 구성하는 전문적이고 실습적인 접근 방식을 제공하기 위한 몇 가지 옵션을 제공합니다.

WP 엔진으로 사이트 속도 향상

사이트 속도를 개선하기 위한 접근 방식이 무엇이든 저희가 도와드리겠습니다. 귀하의 웹사이트를 테스트하기 위한 Speed ​​Tool과 최적화된 경험을 제공하는 데 도움이 되는 최고의 개발자 리소스가 있습니다.
실제로 DXP(디지털 경험 플랫폼)는 더 나은 WordPress 웹 사이트 구축을 시작할 수 있는 좋은 장소입니다. 지금 요금제를 확인하세요!