WordPress에서 페이지로드를 차단하는 파일 (CSS 및 JS)을 제거 하시겠습니까? Google Insights PageSpeed에서 사이트를 테스트하는 경우 페이지로드를 차단하는 스크립트를 제거하라는 제안이 표시 될 것입니다. 이 튜토리얼에서는 Google PageSpeed 점수를 향상시키기 위해 페이지로드를 차단하는 이러한 파일을 수정하는 방법을 보여줍니다.
페이지로드를 차단하는 것은 무엇입니까?
각 WordPress 사이트에는 페이지가 브라우저에 표시되기 전에 JavaScript 및 CSS 파일을 추가하는 테마 및 플러그인이 있습니다. 이러한 스크립트는 사이트 페이지의 로딩 시간을 늘리고 페이지 렌더링을 차단할 수도 있습니다.
사용자의 브라우저는 페이지 콘텐츠가로드되기 전에 스크립트와 CSS를로드해야합니다. 이는 연결 속도가 느린 사용자가 페이지를 보려면 몇 밀리 초를 더 기다려야 함을 의미합니다.
좋은 Google PageSpeed 점수를 얻으려는 사이트 소유자는이 문제를 해결해야합니다.
1-자동 최적화를 사용하여 페이지 렌더링을 수정하는 방법
이 방법은 더 단순하며 대부분의 사용자에게 권장됩니다.
가장 먼저 할 일은 플러그인을 설치하고 활성화하는 것입니다. " Autoptimize ". 자세한 내용은 WordPress 플러그인 설치 방법에 대한 단계별 가이드.
플러그인을 활성화 한 후 " 설정> 자동 최적화 플러그인 설정을 구성합니다.
JavaScript 및 CSS 옵션 상자를 선택한 다음 "변경 사항 저장"버튼을 클릭하여 시작할 수 있습니다.
이제 테스트할 수 있습니다. 사이트 웹 PageSpeed 도구를 사용합니다. 여전히 페이지 렌더링을 차단하는 스크립트가 있는 경우 플러그인 설정 페이지로 돌아가 상단의 "고급 설정 표시" 버튼을 클릭해야 합니다.
여기에서 플러그인이 JS 인라인을 포함하도록 허용하고 "seal.js"또는 "jquery.js"와 같이 기본적으로 제외되는 스크립트를 제거 할 수 있습니다.
그런 다음 CSS 옵션까지 아래로 스크롤하여 플러그인이 모든 CSS 파일을 결합하도록합니다.
"변경 사항 저장 및 캐시 비우기" 버튼을 클릭하여 변경 사항을 저장하고 캐시 비우기 플러그인.
완료되면 계속 진행하여 귀하의 사이트 웹 PageSpeed 도구로 다시.
사이트를 철저히 테스트하여 JavaScript 또는 CSS 파일을 최적화 한 후 모든 것이 제대로 작동하는지 확인하십시오.
2-W3 Total Cache로 파일 렌더링 수정
이 방법은 약간의 작업이 필요하며 이미 W3 Total Cache를 갖고 있는 사용자에게 권장됩니다. 웹 사이트.
먼저 W3 Total Cache 플러그인을 설치하고 활성화해야합니다. 도움이 필요하면 우리의 완전한 가이드 W3 전체 캐시를 참조하십시오.
그런 다음 "성능> 일반 설정"을 방문하여 "최소화"섹션으로 스크롤해야합니다.
먼저“사용”에 체크 한 후 축소 모드 옵션을“수동”으로 선택해야합니다.
버튼을 클릭하십시오 모든 설정 저장 설정을 저장합니다.
그럼 당신은 당신이 축소하려는 스크립트와 CSS를 추가해야합니다.
Google PageSpeed Insights에 따라 결합해야하는 모든 스크립트 및 스타일 시트의 URL을 얻을 수 있습니다.
'제안 된 제안에서 제거 자바 스크립트와 CSS 렌더링 차단 ", 클릭"해결 방법보기 ". 스크립트 및 스타일 시트 목록이 표시됩니다.
스크립트 위로 마우스를 이동하면 전체 URL이 표시됩니다. 이 URL을 선택한 다음 키보드에서 CTRL + C (Mac의 경우 Command + C)를 사용하여 URL을 복사 할 수 있습니다.
이제 WordPress 관리 보드로 이동하여 " 성능 > 미니 파이어 ".
먼저 압축하려는 JavaScript 파일을 추가해야합니다. JS 섹션까지 아래로 스크롤 한 다음 embed 유형의 "operations in zones"에서 섹션에 대해 " 'async'를 사용하여 차단하지 않음"으로 스크롤합니다. .
그런 다음 버튼을 클릭해야합니다 스크립트 추가 그런 다음 Google PageSpeed 도구에서 복사 한 스크립트 URL을 추가하십시오.
완료되면 CSS 섹션으로 스크롤하여 "스타일 시트 추가"버튼을 클릭합니다. 이제 Google PageSpeed 도구로 복사 한 스타일 시트 URL을 추가하세요.
이제 버튼을 클릭하십시오 설정 저장 및 캐시 제거 설정을 저장합니다.
Google PageSpeed 도구를 방문하여 웹 사이트를 다시 테스트하세요.
웹 사이트를주의 깊게 테스트하여 모든 것이 제대로 작동하는지 확인하십시오.
이것이 이 튜토리얼의 전부입니다. 이 튜토리얼을 통해 워드 프레스 블로그.
