WordPress에서 렌더링 차단 리소스를 제거하는 방법(매우 쉬움)

빠른 블로그나 웹사이트를 갖는 것은 매우 중요합니다. 검색 엔진에서 높은 순위를 얻으려면 중요합니다. 귀하의 웹사이트가 매우 느리다면, 그것은 확실히 귀하의 SEO에 해를 끼칠 것입니다.

또한 느린 웹 사이트는 이탈률을 높여 기술적으로 여러 면에서 브랜드에 피해를 줄 수 있습니다. 느린 웹사이트는 수입과 전환에 영향을 줄 수 있습니다.

대부분의 사용자는 참을성이 없습니다. 사이트를 로드하는 데 너무 오래 걸리면 사이트를 포기하고 더 빠른 대안으로 이동할 것입니다. 그것은 잠재적인 고객 또는 수익 부스터가 사라집니다.

웹사이트 속도를 높이려고 노력 중이고 Google PageSpeed ​​Insight와 같은 테스트 도구를 사용하는 경우 렌더링 차단 리소스를 제거하라는 경고를 받을 수 있습니다.

이 기사에서는 렌더링 차단 리소스를 쉽게 제거하는 방법을 배웁니다.

렌더링 차단 리소스란 무엇입니까?

렌더링 차단 리소스는 페이지 콘텐츠가 렌더링되기 전에 웹 브라우저에서 다운로드해야 하기 때문에 웹 사이트의 로드 시간을 늦추는 CSS 및 JavaScript입니다.

방문자가 웹사이트에 액세스하려고 하면 브라우저는 즉시 웹사이트를 위에서 아래로 읽기 시작합니다. CSS 또는 JavaScript가 있는 경우 브라우저는 파일을 다운로드하고 처리할 때까지 읽기를 중지합니다. 브라우저가 스크롤 없이 볼 수 있는 콘텐츠를 렌더링하려면 먼저 CSS 또는 JavaScript 파일을 다운로드해야 합니다.

설치하는 플러그인이나 테마는 이러한 CSS 및 JS 중 일부를 추가할 수 있습니다. 일부는 먼저 로드할 필요가 없으며 나중에 로드할 수 있습니다. 그러나 상단에 있기 때문에 웹 사이트 속도가 느려집니다.

따라서 Google에서 "렌더링 차단 리소스 제거"가 의미하는 것은 웹사이트 콘텐츠 로드 속도를 늦추기 때문에 웹사이트 상단에서 불필요한 리소스를 제거한다는 것입니다.

렌더링 차단 리소스를 찾는 방법

렌더링 차단 문제를 해결하기 전에 문제가 어디에서 오는지 알아야 합니다. Google PageSpeed ​​Insight 또는 Web.Measure에서 테스트를 실행하여 렌더링을 차단하는 리소스를 확인할 수 있습니다.

아래 단계에 따라 렌더링 차단 리소스를 찾을 수 있습니다.

1. Google PageSpeed ​​Insight 방문

2. 웹사이트 주소를 입력하고 분석을 클릭합니다.

3. 아래로 스크롤하여 렌더링 차단 리소스 제거 경고를 찾습니다.

모바일과 데스크톱 탭 모두에서 확인하세요.

BloggingTools의 경우 데스크톱에는 렌더링 차단 문제가 없지만 모바일에는 있습니다. 이를 위해 아래와 같이 Mobile을 사용하겠습니다.

위에서 볼 수 있듯이 모바일의 경우 2개의 렌더링 차단 문제가 있습니다. 점수는 93점입니다. 점수가 더 높았지만 이 게시물을 위해 Autooptimize 플러그인을 비활성화해야 했습니다.

BloggingTools.org는 GeneratePress라는 매우 빠르고 가벼운 테마를 사용하고 있기 때문에 최적화 없이 이 점수를 얻었습니다. 우리는 또한 Cloudways로 알려진 매우 빠른 웹 호스트에서 호스팅합니다.

참고 : PageSpeed ​​인사이트 점수에서 100점을 받는 데 집착해서는 안 됩니다. 가이드일 뿐입니다. 일반적으로 대부분의 사람들에게 평균 65~80점이면 충분합니다. 비즈니스에 필수적인 파일을 제거하지 마십시오.

WordPress의 좋은 점은 모든 작업을 수동으로 수행할 필요가 없다는 것입니다. 도움이 될 잘 코딩된 플러그인이 있습니다.

WordPress에서 렌더링 차단 리소스 문제를 해결하는 방법

렌더링 차단 리소스 문제를 해결하려면 다음 단계를 따르세요.

1. 자동 최적화 설치 및 활성화

W3 총 캐시, WP Rocket 등과 같이 이를 수행할 수 있는 WordPress 플러그인이 많이 있습니다. 그러나 많은 웹 사이트에 대한 내 경험에 따르면 Autooptimize는 항상 그 어떤 웹 사이트보다 훨씬 더 잘 처리합니다. 놀라운 점은 Autooptimize가 거의 모든 WordPress 캐싱 플러그인과 호환되며 무료라는 것입니다.

WordPress 플러그인 디렉토리로 이동하여 Autooptimize를 설치하고 활성화합니다.

2. 자동 최적화 설정 방문

자동 최적화 설정을 찾을 위치가 필요한 경우 WordPress 대시보드에서 설정을 클릭한 다음 자동 최적화를 클릭합니다.

3. 자바스크립트 최적화

JavaScript 옵션에서 스크립트 코드 최적화를 선택하고 집계 JS 파일도 선택합니다. 아래에서 BloggingTools에 사용 중인 설정을 찾을 수 있습니다.

4. CSS 최적화

CSS 최적화 옵션에서 CSS 코드 최적화를 선택합니다. 또한 집계 CSS 파일 및 "인라인 CSS도 집계"를 선택합니다. 아래에서 BloggingTools에 사용 중인 옵션을 참조하세요.

5. HTML 최적화

더 나은 성능을 원하면 자동 최적화를 사용하여 HTML을 최적화할 수도 있습니다. HTML 옵션에서 HTML 코드 최적화를 선택합니다. 아래에서 BloggingTools에 사용 중인 설정을 볼 수 있습니다.

6. 기타 옵션 확인

기타 옵션을 확인하고 원하는 대로 일부 설정을 조정할 수 있습니다. 아래에서 BloggingTools에 대한 설정을 찾을 수 있습니다.

7. 캐시를 저장하고 비우십시오.

다음으로 저장을 클릭하고 캐시를 비우십시오. 그게 다야!

이 모든 작업이 끝나면 Google PageSpeed ​​Insight에서 사이트를 다시 확인할 수 있습니다. BloggingTools의 경우 이 작업을 수행한 직후 점수가 95까지 올라가고 모든 렌더링 차단 리소스 제거 경고가 완전히 사라졌습니다. 아래를 참조하십시오.

보유하고 있는 렌더링 차단 리소스의 수와 사이트에서 얼마나 중요한지에 따라 일부는 남을 수 있습니다. 제거하려고 하지 마십시오.

더 제거하고 싶다면 Autooptimize와 같은 작성자의 플러그인인 Async JavaScript를 사용할 수 있습니다. 그들은 함께 일합니다. 사이트가 손상될 수 있으므로 권장하지 않습니다. 자동 최적화만 해도 괜찮습니다!

결론

속도는 중요하며 렌더링 차단 리소스를 제거하면 웹사이트가 더 빨리 로드되고 속도 테스트 도구에서 사이트 점수를 높일 수 있습니다. 그러나 이 점수는 단지 안내하기 위한 것이므로 절대 집착해서는 안 됩니다.

이 후에도 웹 사이트가 여전히 매우 느린 경우. 가장 가능성이 높은 세 가지 문제는 테마 또는 웹 호스트가 잘못되었거나 잘못된 플러그인이 설치되어 있다는 것입니다. 나는 Coudways 를 최고의 웹 호스트로, GeneratePress 를 최고의 테마로 추천합니다. 초보자라면 Bluehost 가 감당할 수 있지만 여유가 있다면 Cloudways가 최고입니다. 무료로 시작할 수 있습니다. TargetTrend에 GeneratePress 및 Coudways를 사용합니다.

또한 읽어보십시오:

WordPress를 매우 빠르게 만드는 방법

블로그로 트래픽을 유도하는 방법

블로그로 돈 버는 방법

블로그를 시작하는 방법