WordPress에서 렌더링 차단 JavaScript 및 CSS를 수정하는 방법

WordPress에서 렌더 차단 JavaScript 및 CSS를 제거 하시겠습니까? Google PageSpeed ​​통계에서 웹 사이트를 테스트하는 경우 렌더 차단 스크립 및 CSS를 제거하라는 제안이 표시 될 수 있습니다. 이 기사에서는 WordPress에서 렌더링 차단 JavaScript 및 CSS를 쉽게 수정하여 Google PageSpeed ​​점수를 향상시키는 방법을 보여줍니다..


WordPress에서 렌더링 차단 JavaScript 및 CSS를 수정하는 방법

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

모든 WordPress 사이트에는 웹 사이트의 프런트 엔드에 JavaScript 및 CSS 파일을 추가하는 테마 및 플러그인이 있습니다. 이 스크립트는 사이트의 페이지로드 시간을 늘리고 페이지 렌더링을 차단할 수도 있습니다.

사용자 브라우저는 나머지 HTML을 페이지에로드하기 전에 해당 스크립트와 CSS를로드해야합니다. 즉, 연결 속도가 느린 사용자는 페이지를 보려면 몇 밀리 초 더 기다려야합니다..

이러한 스크립트와 스타일 시트는 렌더링 차단 JavaScript 및 CSS라고합니다..

Google PageSpeed ​​점수 100을 달성하려는 웹 사이트 소유자는이 문제를 해결하여 완벽한 점수를 획득해야합니다..

Google PageSpeed ​​점수 란 무엇입니까?

Google PageSpeed ​​Insights는 웹 사이트 소유자가 웹 사이트를 최적화하고 테스트 할 수 있도록 Google에서 만든 온라인 도구입니다. 이 도구는 속도에 대한 Google 가이드 라인을 기준으로 웹 사이트를 테스트하고 사이트의 페이지로드 시간을 개선하기위한 제안을 제공합니다..

사이트가 통과 한 규칙 수에 따른 점수를 표시합니다. 대부분의 웹 사이트는 50-70 사이에 있습니다. 그러나 일부 웹 사이트 소유자는 100 점을 달성하도록 강요받습니다 (페이지가 가장 높은 점수를 얻음).

완벽한 “100”Google PageSpeed ​​점수가 정말로 필요하십니까??

Google PageSpeed ​​통계의 목적은 웹 사이트의 속도와 성능을 개선하기위한 지침을 제공하는 것입니다. 이 규칙을 엄격하게 따를 필요는 없습니다..

속도는 Google이 웹 사이트 순위를 매기는 방법을 결정하는 데 도움이되는 많은 SEO 통계 중 하나 일뿐입니다. 속도가 중요한 이유는 사이트에서 사용자 경험을 향상시키기 때문입니다.

더 나은 사용자 경험은 단순한 속도 이상의 것을 요구합니다. 또한 유용한 정보, 더 나은 사용자 인터페이스 및 텍스트, 이미지 및 비디오로 매력적인 컨텐츠를 제공해야합니다..

훌륭한 사용자 경험을 제공하는 빠른 웹 사이트를 만드는 것이 목표입니다..

우리는 최근에 WPBeginner를 재 설계했으며 속도에 중점을두고 사용자 경험을 향상 시켰습니다..

Google Pagespeed 규칙을 제안으로 사용하는 것이 좋으며 사용자 경험을 망치지 않고 쉽게 구현할 수 있다면 좋습니다. 그렇지 않으면 할 수있는 한 많이 노력하고 나머지는 걱정하지 않아도됩니다.

이미 말했듯이 WordPress에서 JavaScript 및 CSS를 차단하는 렌더를 수정하기 위해 할 수있는 작업을 살펴 ​​보겠습니다..

WordPress에서 렌더링 차단 JavaScript 및 CSS를 수정하는 두 가지 방법을 다룰 것입니다. 귀하의 웹 사이트에 가장 적합한 것을 선택할 수 있습니다.

1. Autoptimize로 렌더 차단 스크립트 및 CSS 수정

이 방법은 더 간단하고 대부분의 사용자에게 권장됩니다.

가장 먼저해야 할 일은 자동 최적화 플러그인을 설치하고 활성화하는 것입니다. 자세한 내용은 워드 프레스 플러그인 설치 방법에 대한 단계별 가이드를 참조하십시오..

활성화되면 다음을 방문해야합니다. 설정»자동 최적화 플러그인 설정을 구성하는 페이지.

자동 최적화 설정

JavaScript 옵션 및 CSS 옵션 옆의 확인란을 선택한 다음 변경 사항 저장 버튼을 클릭하여 시작할 수 있습니다.

PageSpeed ​​도구를 사용하여 웹 사이트를 테스트 할 수 있습니다. 여전히 렌더 차단 스크립트가있는 경우 플러그인 설정 페이지로 돌아와 상단의 ‘고급 설정 표시’버튼을 클릭해야합니다.

고급 JavaScript 옵션

여기에서 플러그인이 인라인 JS를 포함하고 seal.js 또는 jquery.js와 같이 기본적으로 제외 된 스크립트를 제거 할 수 있습니다..

그런 다음 CSS 옵션으로 스크롤하여 플러그인이 인라인 CSS를 집계하도록 허용.

‘변경 사항 저장 및 캐시 비우기’버튼을 클릭하여 변경 사항을 저장하고 플러그인 캐시를 비 웁니다..

완료되면 PageSpeed ​​도구를 사용하여 웹 사이트를 다시 확인하십시오..

JavaScript 또는 CSS를 최적화하여 웹 사이트를 철저히 테스트하여 문제가 없는지 확인하십시오.

작동 원리?

자동 최적화는 모든 대기열에 포함 된 JavaScript 및 CSS를 집계합니다. 그런 다음 축소 된 CSS 및 JavaScript 파일을 생성하고 캐시 된 사본을 비동기 또는 지연으로 웹 사이트에 제공합니다..

이를 통해 렌더 차단 스크립트 및 스타일 문제를 해결할 수 있습니다. 그러나 웹 사이트의 성능이나 모양에 영향을 줄 수 있음을 명심하십시오..

2. W3 Total Cache를 사용하여 렌더 차단 JavaScript 수정

이 방법은 약간의 작업이 더 필요하며 이미 웹 사이트에서 W3 Total Cache 플러그인을 사용하는 사용자에게 권장됩니다.

먼저 W3 Total Cache 플러그인을 설치하고 활성화해야합니다. 도움이 필요하면 초보자를위한 W3 Total Cache 설치 및 설정 방법에 대한 안내서를 참조하십시오..

다음으로 방문해야합니다 성능»일반 설정 페이지를 아래로 스크롤하여 축소 섹션으로.

W3 총 캐시 활성화 축소

먼저 최소화 옵션 옆의 ‘사용’을 확인한 다음 최소화 모드 옵션으로 ‘수동’을 선택해야합니다..

모든 설정 저장 버튼을 클릭하여 설정을 저장하십시오.

다음으로 축소하려는 스크립트와 CSS를 추가해야합니다..

Google PageSpeed ​​Insights 도구에서 렌더링 차단되는 모든 스크립트 및 스타일 시트의 URL을 얻을 수 있습니다..

‘폴더 이상의 콘텐츠에서 렌더 차단 JavaScript 및 CSS 제거’라는 제안에서‘수정 방법 표시’를 클릭하십시오. 스크립트 및 스타일 시트 목록이 표시됩니다..

Google PageSpeed ​​도구에서 JavaScript 및 스타일 시트 URL 가져 오기

마우스를 스크립트로 가져 가면 전체 URL이 표시됩니다. 이 URL을 선택한 다음 키보드의 CTRL + C (Mac의 경우 Command + C) 키를 사용하여 URL을 복사 할 수 있습니다.

이제 WordPress 관리 영역으로 이동하여 성능»축소 페이지.

먼저 축소하려는 JavaScript 파일을 추가해야합니다. JS 섹션으로 아래로 스크롤 한 다음 ‘영역의 작업’아래에서 섹션에 대해 퍼가기 유형을 ‘비 차단 비동기’로 설정합니다..

축소 할 스크립트 추가

그런 다음 ‘스크립트 추가’버튼을 클릭 한 다음 Google PageSpeed ​​도구에서 복사 한 스크립트 URL을 추가하십시오..

완료되면 CSS 섹션으로 아래로 스크롤 한 다음 ‘스타일 시트 추가’버튼을 클릭하십시오. 이제 Google PageSpeed ​​도구에서 복사 한 스타일 시트 URL을 추가하십시오..

스타일 시트를 추가하여 축소

이제 ‘설정 저장 및 캐시 삭제’버튼을 클릭하여 설정을 저장하십시오..

Google PageSpeed ​​도구를 방문하여 웹 사이트를 다시 테스트하십시오..

웹 사이트를 철저히 테스트하여 모든 것이 제대로 작동하는지 확인하십시오.

문제 해결

플러그인 및 WordPress 테마가 JavaScript 및 CSS를 사용하는 방법에 따라 모든 렌더링 차단 JavaScript 및 CSS 문제를 완전히 수정하는 것은 상당히 어려울 수 있습니다.

위의 도구가 도움이 될 수 있지만 플러그인이 제대로 작동하려면 우선 순위가 다른 특정 스크립트가 필요할 수 있습니다. 이 경우 위의 솔루션으로 플러그인이 손상되거나 예기치 않게 작동 할 수 있습니다.

Google은 여전히 ​​폴드 콘텐츠 이상의 CSS 게재 최적화와 같은 특정 문제를 보여줄 수 있습니다. 자동 최적화를 사용하면 테마의 위의 접는 영역을 표시하는 데 필요한 인라인 CSS를 수동으로 추가하여 문제를 해결할 수 있습니다.

그러나 폴드 컨텐츠 위에 어떤 CSS 코드를 표시해야하는지 찾기가 매우 어려울 수 있습니다..

이 기사가 WordPress에서 JavaScript 및 CSS를 렌더 차단하는 방법을 수정하는 방법을 배우는 데 도움이 되었기를 바랍니다. 초보자를위한 궁극적 인 가이드 향상 WordPress 속도 및 성능을보고 싶을 수도 있습니다..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me