WordPress에서 렌더링 차단 리소스를 제거하는 방법(매우 쉬움)
렌더링 차단 리소스는 블로거에게 큰 골칫거리가 될 수 있습니다. Google은 이를 제거하라고 계속 경고합니다. 이를 제거하는 방법은 많지만 코딩이 필요 없는 매우 간단한 방법이 있습니다.
빠른 블로그나 웹사이트를 갖는 것은 매우 중요합니다. 검색 엔진에서 높은 순위를 차지하려면 중요합니다. 웹사이트가 매우 느리면 SEO에 확실히 해가 됩니다.
또한, 느린 웹사이트는 이탈률을 높일 수 있으며, 이는 기술적으로 여러 면에서 브랜드에 피해를 줄 것입니다. 느린 웹사이트는 수입과 전환에 영향을 미칠 수 있습니다.
대부분의 사용자는 참을성이 없습니다. 사이트가 로드되는 데 너무 오래 걸리면 사이트를 포기하고 더 빠른 대안으로 옮길 것입니다. 그러면 잠재 고객이나 수익 창출자가 사라집니다.
웹사이트 속도를 높이려고 노력하고 Google과 같은 테스트 도구를 사용하는 경우 PageSpeed 인사이트여러분이 받을 수 있는 경고 중 하나는 렌더링을 차단하는 리소스를 제거하라는 것입니다.
이 글에서는 렌더링을 차단하는 리소스를 쉽게 제거하는 방법을 알아보겠습니다.
렌더링 차단 리소스란 무엇입니까?
렌더링 차단 리소스는 CSS와 JavaScript로, 페이지 콘텐츠가 렌더링되기 전에 웹 브라우저가 해당 리소스를 다운로드해야 하므로 웹사이트 로드 시간을 늦춥니다.
방문자가 웹사이트에 접속하려고 하면 브라우저는 즉시 웹사이트를 위에서 아래로 읽기 시작합니다. CSS나 JavaScript가 있으면 브라우저는 파일을 다운로드하고 처리할 때까지 읽기를 멈춥니다. 브라우저가 위의 폴드 콘텐츠를 렌더링하기 전에 CSS나 JavaScript 파일을 다운로드해야 합니다.
설치하는 플러그인이나 테마는 CSS와 JS를 추가할 수 있습니다. 일부는 먼저 로드할 필요가 없고 나중에 로드할 수 있습니다. 하지만 맨 위에 있기 때문에 웹사이트 속도가 느려집니다.
따라서 Google에서 "렌더링을 차단하는 리소스 제거"라는 말은 웹사이트 콘텐츠 로딩 속도를 늦추기 위해 웹사이트 상단에서 불필요한 리소스를 제거한다는 의미입니다.
렌더링 차단 리소스를 찾는 방법
렌더링 차단 문제를 해결하기 전에 문제가 어디에서 발생하는지 알아야 합니다. 테스트를 실행하여 어떤 리소스가 렌더링 차단인지 알아낼 수 있습니다. Google PageSpeed Insight or 웹.측정.
렌더링 차단 리소스를 찾으려면 다음 단계를 따르세요.
1. 방문 Google PageSpeed Insight
2. 귀하의 웹사이트 주소를 입력하고 분석을 클릭하세요.
3. 아래로 스크롤하여 렌더링 차단 리소스 제거 경고를 찾아보세요.
모바일과 데스크톱 탭에서 모두 확인하세요.
럭셔리 블로깅 도구, 데스크톱에서는 렌더링 차단 문제가 없지만 모바일에서는 그렇습니다. 따라서 이를 위해 아래에서 볼 수 있듯이 모바일을 사용하겠습니다.
위에서 볼 수 있듯이 모바일의 경우 렌더 차단 문제가 2개 있습니다. 점수는 93점입니다. 점수는 더 높았지만 이 게시물을 위해 Autoptimize 플러그인을 비활성화해야 했습니다.
BloggingTools.org는 최적화 없이도 이 점수를 달성할 수 있었습니다. 그 이유는 매우 빠르고 가벼운 테마를 사용했기 때문입니다. GeneratePress. 우리는 또한 ~로 알려진 매우 빠른 웹 호스트에서 호스팅하고 있습니다. 구름.
주의 사항: PageSpeed 인사이트 점수에서 100점을 받는 데 집착해서는 안 됩니다. 그것은 단지 가이드일 뿐입니다. 보통 대부분의 사람들에게는 평균 65~80점이면 충분합니다. 비즈니스에 필수적인 파일은 제거하지 마세요.
WordPress의 장점은 모든 것을 수동으로 할 필요가 없다는 것입니다. 도움이 되는 잘 코딩된 플러그인이 있습니다.
WordPress에서 렌더링 차단 리소스 문제를 제거하는 방법
렌더링 차단 리소스 문제를 해결하려면 다음 단계를 따르세요.
1. Autoptimize 설치 및 활성화
W3 Total Cache와 같이 이를 수행할 수 있는 WordPress 플러그인이 많이 있습니다. WP Rocket 등등. 하지만 제가 여러 웹사이트를 경험해 본 결과, Autoptimize는 항상 다른 어떤 웹사이트보다 훨씬 더 잘 처리합니다. 놀라운 점은 Autoptimize가 거의 모든 WordPress 캐싱 플러그인과 호환되고 무료라는 것입니다.
WordPress 플러그인 디렉토리로 이동하세요. Autooptimize 설치 및 활성화
2. Autooptimize 설정 방문
Autoptimize 설정을 찾아야 하는 경우 WordPress 대시보드에서 설정을 클릭한 다음 Autoptimize를 클릭하세요.
3. 자바스크립트 최적화
JavaScript 옵션에서 Optimize Script 코드를 선택하고 또한 집계 JS 파일을 선택합니다. 아래에서 BloggingTools에 사용하는 설정을 찾을 수 있습니다.
4. CSS 최적화
Optimize CSS 옵션에서 Optimize CSS code를 선택합니다. 또한 CSS 파일 집계와 "Also aggregate inline CSS"를 선택합니다. 아래에서 BloggingTools에 사용하는 옵션을 참조하세요.
5. HTML 최적화
더 나은 성능을 원하시면 Autoptimize를 사용하여 HTML을 최적화할 수도 있습니다. HTML 옵션에서 최적화 HTML 코드를 선택합니다. 아래에서 BloggingTools에 사용하는 설정을 볼 수 있습니다.
6. 기타 옵션 확인
Misc Options를 확인하고 일부 설정을 조정하여 원하는 대로 사용할 수 있습니다. 아래에서 BloggingTools 설정을 찾을 수 있습니다.
7. 캐시를 저장하고 비웁니다.
다음으로, 저장을 클릭하고 캐시를 비우세요. 그게 전부입니다!
이 모든 작업을 마친 후 Google PageSpeed Insight에서 사이트를 다시 확인할 수 있습니다. BloggingTools의 경우, 이 작업을 한 직후 점수가 95점으로 상승했고 모든 렌더링 차단 리소스 제거 경고가 완전히 사라졌습니다. 아래를 참조하세요.
렌더링 차단 리소스의 수와 사이트에 얼마나 중요한지에 따라, 몇몇은 남을 수 있습니다. 제거하려고 하지 마세요.
추가로 제거하고 싶다면 다음을 사용할 수 있습니다. Async JavaScript, Autoptimize와 같은 저자가 만든 플러그인입니다. 함께 작동합니다. 사이트를 망가뜨릴 수 있으므로 권장하지 않습니다. Autoptimize만 사용해도 괜찮습니다!
결론
속도는 중요하며 렌더링 차단 리소스를 제거하면 웹사이트가 더 빨리 로드되고 사이트가 속도 테스트 도구에서 더 나은 점수를 받을 수 있습니다. 하지만 이러한 점수에 집착해서는 안 됩니다. 이러한 점수는 안내를 위한 것일 뿐이기 때문입니다.
이후에도 웹사이트가 여전히 매우 느리다면. 가장 가능성 있는 세 가지 문제는 테마나 웹 호스트가 나쁘거나, 잘못된 플러그인이 설치되어 있다는 것입니다. 추천합니다. 쿠드웨이 최고의 웹 호스트로서 GeneratePress 최고의 테마로. 초보자라면, Bluehost 처리할 수 있지만 여유가 된다면 Cloudways가 최고입니다. 무료로 시작할 수 있습니다. TargetTrend에는 GeneratePress와 Coudways를 사용합니다.
또한 읽기 :
관련 기사
