WordPress 웹사이트에서 렌더링 차단 리소스를 제거하는 방법

워드프레스 웹사이트 제작을 마치고 웹사이트에 대한 모든 것이 마음에 들었지만 로드하는 데 시간이 오래 걸린다는 사실을 깨닫고 즉시 싫어하기 시작한 적이 있습니까? 렌더링 차단 리소스 제거를 마스터하면 이 문제를 진단하는 데 도움이 됩니다. 하지만 어떻게?

느린 로딩 속도는 귀하와 귀하의 방문자에게 골칫거리일 뿐만 아니라 SEO와 관련하여 상당한 비용이 들 수 있습니다. 2010년부터 Google 알고리즘은 순위 결정 시 로딩 속도를 고려하여 결과 페이지에서 느린 페이지가 더 낮게 나타납니다.

과도한 콘텐츠, 압축되지 않은 이미지 파일, 불충분한 호스팅, 캐싱 부족 등 페이지 성능 저하의 일반적인 원인에 대해 잘 알고 계실 것입니다. 그러나 종종 간과되는 또 다른 가해자가 있습니다. 바로 렌더링 차단 리소스입니다.

오해하지 마세요. CSS와 JavaScript는 훌륭합니다. CSS가 없다면 웹사이트는 일반 텍스트의 벽이 될 것입니다. Ja=ooovaScript가 없으면 우리 웹사이트에 동적이고 상호작용적이며 매력적인 요소를 추가할 수 없습니다. 그러나 잘못된 시간에 실행되면 CSS와 JavaScript 모두 웹 사이트 성능에 흠집을 낼 수 있습니다.

이유는 다음과 같습니다. 웹 브라우저가 웹 페이지를 처음 로드할 때 방문자에게 화면에 표시하기 전에 페이지의 모든 HTML을 구문 분석합니다. 브라우저가 CSS 파일, JavaScript 파일 또는 인라인 스크립트(예: HTML 문서 자체의 JavaScript 코드)에 대한 링크를 만나면 HTML 구문 분석을 일시 중지하여 코드를 가져와서 실행하므로 속도가 느려집니다.

WordPress에서 페이지 성능을 최적화했지만 여전히 문제가 발생하는 경우 렌더링 차단 리소스가 원인일 수 있습니다. 때때로 이 코드는 첫 번째 로드에서 실행하는 것이 중요하지만 대부분의 경우 대기열이 끝날 때까지 제거하거나 푸시할 수 있습니다.

이 게시물에서는 WordPress 웹 사이트에서 성가신 코드를 제거하고 성능을 향상시키는 방법을 보여줍니다.

비디오를 따라 하려면 WP Casts에서 만든 이 연습을 확인하십시오.

1. 렌더링 차단 리소스를 식별합니다.

변경하기 전에 먼저 렌더링 차단 리소스를 찾아야 합니다. 이를 수행하는 가장 좋은 방법은 Google의 PageSpeed ​​Insights 도구와 같은 무료 온라인 속도 테스트를 사용하는 것입니다. 사이트의 URL을 붙여넣고 분석 을 클릭합니다.

스캔이 완료되면 Google은 웹사이트에 0(가장 느림)에서 100(가장 빠름)까지의 총 속도 점수를 할당합니다. 50에서 80 범위의 점수는 평균이므로 이 범위의 상단 또는 그 이상에 도달하는 것이 좋습니다.

페이지 속도를 늦추는 렌더링 차단 파일을 식별하려면 기회 까지 아래로 스크롤한 다음 렌더링 차단 리소스 제거 아코디언을 엽니다.

이미지 출처

페이지의 "첫 번째 페인트"를 느리게 하는 파일 목록이 표시됩니다. 이러한 파일은 초기 페이지 로드 시 브라우저 창에 나타나는 모든 콘텐츠의 로드 시간에 영향을 미칩니다. 이를 "above-the-fold" 콘텐츠라고도 합니다.

.css 및 .js 확장자로 끝나는 모든 파일을 기록해 두십시오. 이러한 파일에 집중해야 합니다.

2. 렌더링 차단 리소스를 수동으로 또는 플러그인으로 제거합니다.

이제 문제를 식별했으므로 WordPress에서 수동으로 또는 플러그인을 사용하여 문제를 해결할 수 있는 두 가지 방법이 있습니다. 먼저 플러그인 솔루션을 다룰 것입니다.

여러 WordPress 플러그인은 WordPress 웹사이트에서 렌더링 차단 리소스의 영향을 줄일 수 있습니다. Autooptimize와 W3 Total Cache라는 두 가지 인기 있는 솔루션을 다룰 것입니다.

자동 최적화 플러그인으로 렌더링 차단 리소스를 제거하는 방법

자동 최적화는 더 빠른 페이지를 제공하기 위해 웹사이트 파일을 수정하는 무료 플러그인입니다. 자동 최적화는 파일을 집계하고, 코드를 축소하고(즉, 중복되거나 불필요한 문자를 삭제하여 파일 크기를 줄임) 렌더링 차단 리소스의 로드를 지연시키는 방식으로 작동합니다.

사이트의 백엔드를 수정하고 있으므로 이 플러그인 또는 유사한 플러그인에 주의해야 합니다. 자동 최적화로 렌더링 차단 리소스를 제거하려면:

1. Autooptimize 플러그인을 설치하고 활성화합니다.

2. WordPress 대시보드에서 설정 > 자동 최적화 를 선택합니다.

3. JavaScript 옵션 에서 JavaScript 코드를 최적화하시겠습니까? 옆의 확인란을 선택합니다. .

4. JS 파일을 집계하시겠습니까? 옆의 상자가 선택되어 있으면 선택을 취소하십시오.

5. CSS 옵션 에서 CSS 코드를 최적화하시겠습니까? 옆의 확인란을 선택합니다. .

6. CSS 파일을 집계하시겠습니까? 옆의 상자가 선택되어 있으면 선택을 취소하십시오.

7. 페이지 하단에서 변경 사항 저장 및 캐시 비우기 를 클릭합니다.

8. PageSpeed ​​Insights로 웹사이트를 스캔하고 개선 사항을 확인합니다.

9. PageSpeed ​​Insights에서 여전히 렌더링 차단 JavaScript 파일을 보고하는 경우 설정 > 자동 최적화 로 돌아가서 JS 파일을 집계하시겠습니까? 옆의 확인란을 선택합니다. 및 CSS 파일 집계? . 그런 다음 변경 사항 저장 및 캐시 비우기 를 클릭하고 다시 스캔하십시오.

W3 Total Cache 플러그인으로 렌더링 차단 리소스를 제거하는 방법

W3 Total Cache는 지연 코드를 해결하는 데 도움이 되는 널리 사용되는 캐싱 플러그인입니다. W3 Total Cache로 렌더링 차단 JavaScript를 제거하려면:

1. W3 Total Cache 플러그인을 설치하고 활성화합니다.

2. WordPress 대시보드 메뉴에 새로운 성능 옵션이 추가됩니다. 성능 > 일반 설정을 선택합니다.

3. 축소 섹션에서 축소 옆의 확인란 을 선택한 다음 축소 모드 를 수동 으로 설정합니다.

4. 축소 섹션 하단의 모든 설정 저장 을 클릭합니다.

5. 대시보드 메뉴에서 성능 > 축소를 선택합니다.

6. JS 축소 설정 옆의 JS 섹션에서 사용 상자가 선택되어 있는지 확인합니다. 그런 다음 Operations in areas 아래에서 첫 번째 Embed type 드롭다운을 열고 "defer"를 사용하여 Non-blocking을 선택합니다.

7. JS 파일 관리 아래 테마 드롭다운에서 활성 테마를 선택합니다.

8. 이전 스캔에서 PageSpeed ​​Insights 결과를 다시 참조하십시오. .js로 끝나는 렌더링 차단 리소스 제거 아래의 각 항목에 대해 스크립트 추가 를 클릭합니다. 그런 다음 PageSpeed ​​Insights에서 자바스크립트 리소스의 전체 URL을 복사하여 파일 URI 입력란에 붙여넣습니다.

9. PageSpeed ​​Insights에서 보고한 모든 렌더링 차단 자바스크립트 리소스를 붙여넣은 후 JS 섹션 하단에 있는 설정 저장 및 캐시 제거 를 클릭합니다.

10. CSS 축소 설정 옆의 CSS 섹션에서 CSS 축소 설정 옆의 상자를 선택하고 축소 방법 이 결합 및 축소 로 설정되어 있는지 확인합니다.

11. CSS 파일 관리 아래 테마 드롭다운에서 활성 테마를 선택합니다.

12. PageSpeed ​​Insights 스캔 결과에서 .css로 끝나는 렌더링 차단 리소스 제거 아래의 각 항목에 대해 스타일시트 추가 를 클릭합니다. 그런 다음 PageSpeed ​​Insights에서 CSS 리소스의 전체 URL을 복사하여 파일 URI 입력란에 붙여넣습니다.

13. PageSpeed ​​Insights에서 보고한 모든 렌더링 차단 CSS 리소스를 붙여넣은 후 CSS 섹션 하단에 있는 설정 저장 및 캐시 제거 를 클릭합니다.

14. PageSpeed ​​Insights로 웹사이트를 스캔하고 개선 사항을 확인합니다.

렌더링 차단 JavaScript를 수동으로 제거하는 방법

플러그인은 백엔드 작업을 처리할 수 있습니다. 그런 다음 플러그인 자체는 웹 서버에 추가된 더 많은 파일일 뿐입니다. 이러한 추가 파일을 제한하거나 직접 프로그래밍을 처리하려는 경우 렌더링 차단 JavaScript를 수동으로 처리할 수 있습니다.

이렇게 하려면 PageSpeed ​​Insights 스캔에서 식별된 리소스에 대한 웹사이트 파일에서 <script> 태그를 찾습니다. 다음과 같이 표시됩니다.

 
<script src="https://blog.hubspot.com/marketing/resource.js">

<script> 태그는 src (소스) 속성으로 식별되는 스크립트를 로드하고 실행하도록 브라우저에 지시합니다. 이 프로세스의 문제는 이 로드 및 실행이 브라우저의 웹 페이지 구문 분석을 지연시켜 전체 로드 시간에 영향을 미친다는 것입니다.

이미지 출처

이 문제를 해결하려면 렌더링 차단 리소스에 대한 스크립트 태그에 async (비동기) 또는 defer 속성을 추가할 수 있습니다. async 및 defer 는 다음과 같이 배치됩니다.

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

로드 시간에 유사한 효과가 있지만 이러한 속성은 브라우저에 다른 작업을 수행하도록 지시합니다.

async 속성은 페이지의 나머지 부분을 구문 분석하는 동안 JavaScript 리소스를 로드하도록 브라우저에 신호를 보내고 로드된 직후 이 스크립트를 실행합니다. 스크립트를 실행하면 HTML 구문 분석이 일시 중지됩니다.

이미지 출처

defer 속성이 있는 스크립트도 페이지가 구문 분석되는 동안 로드되지만 이러한 스크립트는 첫 번째 렌더링 후 또는 더 중요한 부분이 로드될 때까지 로드에서 지연됩니다.

이미지 출처

defer 및 async 특성은 동일한 리소스에서 함께 사용하면 안 되지만 특정 리소스에 대해 다른 것보다 하나가 더 적합할 수 있습니다. 일반적으로 필수적이지 않은 스크립트가 그 전에 실행할 스크립트에 의존하는 경우 defer 를 사용하십시오. defer 속성은 이전에 필요한 스크립트 다음에 스크립트가 실행되도록 합니다. 그렇지 않으면 async 를 사용하십시오.

3. 사이트 스캔을 다시 실행하십시오.

변경 후 PageSpeed ​​Insights를 통해 웹사이트를 마지막으로 한 번 스캔하고 변경 사항이 점수에 어떤 영향을 미쳤는지 확인하세요.

눈에 띄는 개선이 있기를 바라지만 그렇지 않더라도 걱정하지 마십시오. 많은 요인이 페이지 성능을 저해할 수 있으며 성능 저하의 원인을 찾기 위해 좀 더 조사해야 할 수도 있습니다.

4. 웹사이트에 버그가 있는지 확인하십시오.

다시 스캔하는 것 외에도 페이지를 확인하여 사이트가 작동하는지 확인하십시오. 페이지가 올바르게 로드됩니까? 모든 요소가 표시됩니까? 무언가가 손상되었거나 제대로 로드되지 않으면 변경 사항을 실행 취소하고 문제를 해결하십시오.

최소한의 속도 향상으로 다양한 조치를 반복적으로 시도한 지점에 도달한 경우 사이트를 손상시키는 위험을 감수하기보다는 페이지 속도를 높이는 다른 방법을 고려하는 것이 가장 좋습니다.

성능을 위해 WordPress 사이트 최적화

많은 요소가 웹 사이트에서 사용자 경험에 기여하지만 로드 시간보다 더 중요한 요소는 거의 없습니다. WordPress 사이트의 콘텐츠나 모양을 크게 변경할 때마다 그러한 변경이 성능에 미치는 영향을 항상 고려해야 합니다.

이제 렌더링 차단 리소스를 제거했으므로 성능을 저하시키는 것으로 알려진 다른 기능을 분석하여 웹 사이트 속도를 계속 최적화해야 합니다. 정기적인 속도 테스트를 사이트 유지 관리 일정에 포함시키십시오. 잠재적인 문제를 미리 파악하는 것이 성공에 매우 중요합니다.