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

누군가가 사이트의 페이지를 방문하려고 하면 브라우저에 URL을 입력하면 즉시 작동합니다. 페이지를 로드하려면 해당 페이지를 구성하는 모든 요소를 ​​"렌더링"해야 합니다.

그러나 때때로 이 프로세스를 일시 중지하여 콘텐츠 렌더링을 방지하는 CSS 또는 JavaScript 파일이 있습니다. 이러한 파일을 렌더링 차단 리소스 라고 합니다. 즉, 방문자는 대기 시간이 길어 사람들이 조직을 인식하는 방식과 원하는 조치를 취하는지 여부에 부정적인 영향을 미칠 수 있습니다.

이 게시물에서는 렌더링 차단 리소스가 무엇인지 설명하고 사이트에서 리소스를 제거할 때의 이점에 대해 설명합니다. 그런 다음 5가지 방법으로 제거하는 방법을 보여 드리겠습니다.

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

렌더링 차단 리소스를 자세히 살펴보기 전에 웹사이트의 일반적인 로딩 프로세스를 이해하는 것이 중요합니다. 방문자가 사이트 링크를 클릭하면 브라우저에서 모든 콘텐츠를 렌더링(또는 다운로드)해야 합니다. 모든 HTML, CSS 및 JavaScript를 포함하여 사이트의 코드를 위에서 아래로 읽습니다.

방문자는 브라우저가 이 스크립트 대기열을 완전히 읽을 때까지 웹사이트를 볼 수 없습니다. 렌더링 차단 리소스가 있는 경우 오랜 시간을 기다려야 할 수 있습니다.

기본적으로 렌더링 차단 리소스는 처리될 때까지 브라우저가 다른 콘텐츠의 로드를 중지하도록 하는 CSS 또는 JavaScript 파일입니다. 이렇게 하면 렌더링 프로세스가 일시 중지되어 페이지가 비어 있거나 불완전하게 표시될 수 있습니다.

사이트에 렌더링 차단 리소스가 있을 때마다 코드 맨 위에 불필요한 파일이 로드됩니다. 방문자는 페이지를 보기 전에 이러한 파일이 처리될 때까지 기다려야 합니다.

다음은 렌더링 차단 리소스의 영향을 받을 수 있는 몇 가지 웹사이트 성능 측정항목입니다.

• 가장 큰 콘텐츠가 포함된 페인트 : 페이지의 주요 콘텐츠를 로드하는 데 걸리는 시간을 측정합니다.
• First Contentful Paint : 브라우저가 사이트에서 DOM(Document Object Model) 콘텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간입니다.
• 총 차단 시간 : 첫 번째 콘텐츠가 포함된 페인트와 대화형 시간 사이의 지연(페이지가 완전히 대화형이 되는 데 걸리는 시간)을 측정합니다.

렌더링 차단 리소스는 로드에 중요하지 않지만 렌더링 프로세스를 지연시킬 수 있습니다. 이는 사이트의 사용자 경험(UX)에 부정적인 영향을 미칠 수 있습니다. 따라서 방문자가 페이지를 떠나는 것을 방지하려면 이를 제거하는 것이 중요합니다.

렌더링 차단 리소스 제거의 이점

일반적으로 인터넷 사용자는 페이지가 로드되기를 기다리는 것을 좋아하지 않습니다. 빠른 사이트는 방문자가 귀하의 콘텐츠를 탐색하도록 장려하고 경쟁자로 전환하는 것을 방지할 수 있습니다.

기본적으로 웹사이트의 코드를 가능한 한 가볍게 만들기 때문에 렌더링 차단 리소스를 제거하는 것이 페이지 속도 향상의 핵심이 될 수 있습니다.

사이트 성능과 사용자 참여는 Google과 같은 회사가 사이트를 평가할 때 사용하는 지표 중 일부이기 때문에 렌더링 차단 파일을 제거하면 검색 엔진 순위를 높일 수도 있습니다.

렌더링 차단 리소스에 대해 웹사이트를 테스트하는 방법

사이트에서 파일 제거를 시작하기 전에 렌더링 차단 리소스가 있는지 확인해야 합니다. 느린 로딩 시간은 최적화되지 않은 이미지, 낮은 품질의 호스팅 또는 너무 많은 플러그인과 같은 다른 요인으로도 인해 발생할 수 있습니다.

웹사이트에서 렌더링 차단 리소스를 테스트하려면 Google의 PageSpeed ​​Insights와 같은 도구를 사용할 수 있습니다. 이렇게 하면 페이지 성능에 대한 자세한 보고서를 제공하고 점수를 개선하는 데 도움이 되는 제안을 제공할 수 있습니다.

시작하려면 검색창에 사이트 URL을 입력하고 분석 을 클릭하십시오. 그러면 도구가 사이트의 성능을 테스트합니다. 준비가 되면 페이지 속도에 대한 메트릭 세트인 핵심 성능 평가를 볼 수 있습니다.

PageSpeed ​​Insights를 사용하면 렌더링 차단 리소스를 쉽게 확인할 수도 있습니다. 이렇게 하려면 기회 섹션으로 스크롤할 수 있습니다. 여기에서 Eliminate render-blocking resources 라는 제안을 찾아야 합니다.

클릭하면 PageSpeed ​​Insights에서 테스트 중에 식별한 렌더링 차단 리소스 목록을 제공합니다. 이 파일을 삭제하거나 연기할 경우 페이지 오른쪽에 예상 절감액이 표시됩니다.

렌더링 차단 리소스를 확인한 후에는 사이트에서 해당 리소스를 제거할 수 있습니다. 이렇게 하면 페이지 속도와 사용자 경험을 개선할 수 있습니다.

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

이제 WordPress에서 렌더링 차단 리소스를 식별하는 방법을 알았으므로 사이트에서 리소스를 제거하는 방법이 궁금할 것입니다. 다행히도 가장 쉬운 방법부터 시작하여 이를 수행할 수 있는 다양한 방법 목록을 작성했습니다.

1. CSS 로딩 최적화

렌더링 차단 리소스를 제거하는 한 가지 방법은 웹사이트의 CSS 로딩을 최적화하는 것입니다. 앞에서 설명한 것처럼 브라우저는 웹사이트를 위에서 아래로 로드합니다. 특정 파일을 처리해야 하는 경우 로딩 프로세스가 지연될 수 있습니다.

로드에는 특정 CSS 파일만 필요하다는 점에 유의하는 것이 중요합니다. 따라서 CSS 로딩을 최적화할 때 가장 중요한 파일을 먼저 표시할 수 있습니다.

렌더링 차단 CSS를 수동으로 제거할 수 있지만 플러그인을 설치하여 프로세스를 단순화할 수 있습니다. Jetpack Boost를 사용하면 WordPress 대시보드에서 사이트를 최적화할 수 있습니다.

이 플러그인을 사용하면 몇 가지 간단한 단계로 CSS 로딩을 최적화하고, 불필요한 JavaScript를 연기하고, 지연 로딩을 구현할 수 있습니다. 이것은 WordPress에서 렌더링 차단 리소스를 제거하는 가장 쉬운 방법 중 하나입니다.

시작하려면 WordPress 대시보드에서 플러그인 → 새로 추가 로 이동하고 Jetpack Boost를 검색합니다. 그런 다음 사이트에 플러그인을 설치하고 활성화합니다.

Jetpack이 이미 설치되어 있는 경우 Jetpack → My Jetpack 으로 이동할 수 있습니다. Jetpack 제품 목록에서 Boost 를 찾아 활성화 를 클릭합니다.

플러그인을 활성화한 후 Jetpack Boost 탭을 클릭하고 시작하기 를 선택하십시오 .

Jetpack은 웹사이트에 대한 성능 점수를 자동으로 제공합니다. 문자 등급과 모바일 및 데스크톱 점수에 대한 세부 정보가 표시됩니다.

그런 다음 CSS 로딩 최적화 까지 아래로 스크롤하고 이 기능을 켭니다. 활성화되면 Jetpack Boost가 웹사이트의 중요한 CSS를 페이지 상단으로 이동하여 더 빠르게 로드합니다.

2. 필수적이지 않은 자바스크립트를 연기하라

CSS 로딩 최적화는 WordPress에서 렌더링 차단 리소스를 제거하기 위해 취할 수 있는 유일한 단계가 아닙니다. 또한 중요하지 않은 JavaScript를 연기하여 사이트의 로드 시간을 더욱 개선할 수도 있습니다.

필수가 아닌 JavaScript를 연기하면 콘텐츠가 로드될 때까지 특정 작업을 연기할 수 있습니다. 일부 JavaScript 파일이 페이지를 로드하는 데 필요하지 않은 경우 브라우저에서 해당 파일을 처리하지 못하도록 할 수 있습니다.

다행히 Jetpack Boost 플러그인을 사용하면 간단하게 구현할 수 있습니다. CSS 로딩을 최적화한 후에는 필수적이지 않은 JavaScript도 쉽게 연기할 수 있습니다.

이렇게 하려면 CSS 로딩 최적화 아래에 있는 Defer Non-Essential JavaScript 섹션을 찾아 토글 스위치를 켭니다.

이 설정을 활성화하면 플러그인이 전체 페이지 성능을 다시 계산합니다. Jetpack Boost를 사용하기 전과 후에 점수를 확인할 수 있습니다.

이 과정을 거치기 전과 후 스크린샷의 점수를 비교하세요. CSS 로딩을 최적화하고 필수적이지 않은 자바스크립트를 연기하는 것이 페이지 속도를 향상시키는 데 효과적이라는 것을 알게 될 것입니다. 부피가 큰 스크립트를 처리할 필요 없이 브라우저는 콘텐츠를 더 빠르게 로드할 수 있습니다.

3. 오프 스크린 이미지 연기

이미지는 렌더링 차단 리소스가 아니지만 페이지 렌더링을 개선하기 위해 로딩 프로세스를 최적화하는 것을 고려할 수 있습니다. 종종 웹 사이트에는 방문자가 스크롤과 같은 상호 작용을 할 때까지 페이지에 표시되지 않는 오프스크린 이미지가 포함되어 있습니다. 이들은 웹 페이지를 로드하는 데 중요하지 않으므로 지연 로드로 지연할 수 있습니다.

지연 이미지 로딩은 방문자가 볼 수 있는 이미지만 로딩하는 것입니다. 누군가가 스크롤을 시작하면 이 이미지가 페이지에 나타나기 직전에 로드됩니다.

지연 로드가 없으면 브라우저는 페이지의 모든 이미지를 한 번에 로드하려고 시도합니다. 즉, 콘텐츠가 로드되는 데 시간이 더 오래 걸리므로 사람들이 사이트를 떠날 수 있습니다.

방문자가 데스크톱 컴퓨터를 사용하는 경우 일반 로딩은 문제가 되지 않을 수 있습니다. 반면에 스마트폰과 태블릿은 화면이 더 작고 대역폭이 더 적습니다. 웹사이트에서 모든 이미지를 한 번에 완전히 로드하면 대역폭에 더 많은 부담이 가해지고 휴대전화 사용자의 로드 시간이 늘어날 수 있습니다. 지연 로딩은 이 문제를 해결합니다.

Jetpack Boost를 사용하여 사이트에서 지연 로딩을 활성화할 수 있습니다. Lazy Image Loading 기능을 찾아 켜기만 하면 됩니다.

이렇게 하면 방문자가 페이지를 아래로 스크롤할 때만 웹사이트에 이미지가 로드됩니다. 이미지는 렌더링 차단 리소스가 아니지만 지연 로드를 켜면 페이지 속도를 향상시키는 데 도움이 될 수 있습니다.

4. 렌더링 차단 JavaScript를 수동으로 제거

최적화 플러그인을 설치하는 것이 훨씬 간단한 솔루션이지만 렌더링 차단 리소스를 수동으로 제거할 수도 있습니다. 이상적으로는 경험 많은 코더인 경우에만 이 옵션을 고려해야 합니다. 이 프로세스는 웹사이트의 플러그인 수를 줄이려는 경우에도 유용할 수 있습니다.

JavaScript를 최적화할 때 파일에 async 또는 defer 속성을 추가할 수 있습니다. 이것은 중요하지 않은 스크립트를 표시하고 브라우저에 별도로 렌더링하도록 지시합니다. 두 속성 모두 HTML 콘텐츠를 더 빠르게 로드하는 데 사용할 수 있습니다.

일반 스크립트에서 HTML 파일은 스크립트 파일에 도달할 때까지 구문 분석됩니다. 그런 다음 스크립트를 검색하는 동안 구문 분석이 일시 중지됩니다. 다운로드 및 실행되면 구문 분석이 다시 시작됩니다.

async 속성을 사용하면 브라우저가 나머지 HTML을 구문 분석하는 동안 JavaScript를 다운로드할 수 있습니다. 다운로드가 완료되면 HTML 구문 분석을 중지하여 스크립트를 실행할 수 있습니다.

마찬가지로 defer 속성을 사용하면 브라우저가 HTML을 구문 분석하는 동안 스크립트를 다운로드할 수 있습니다. 차이점은 HTML 구문 분석이 완료될 때까지 기다린 후 스크립트를 실행한다는 것입니다.

이러한 속성 중 하나를 구현하려면 functions.php 파일에 코드 조각을 추가해야 합니다. 먼저 렌더링 차단 리소스에 대한 <script> 태그를 찾아야 합니다. 그런 다음 다음과 같이 비동기 속성을 추가할 수 있습니다.

 <script src="resource.js" async></script>

또는 defer 속성이 있는 스크립트는 다음과 같습니다.

 http://resource.js

플러그인이 이러한 속성을 처리할 수 있지만 이 작업을 직접 수행하는 것을 선호할 수 있습니다. 그렇다면 각 속성을 언제 사용해야 하는지 아는 것이 중요합니다. 다른 스크립트에 의존하는 비필수 스크립트의 경우 defer 속성을 사용해야 합니다. 다른 모든 스크립트의 경우 async를 사용할 수 있습니다.

5. 플러그인으로 비동기 또는 지연 속성 적용

스크립트를 수동으로 편집하는 데 문제가 있는 경우 Async JavaScript와 같은 플러그인을 사용할 수 있습니다. 이 도구를 사용하면 비동기 또는 지연 속성이 있는 스크립트를 완전히 제어할 수 있습니다.

플러그인을 설치했으면 설정 → Async JavaScript 로 이동하여 Enable Async JavaScript 를 선택합니다.

그런 다음 비동기 JavaScript 메서드 섹션으로 이동합니다. 여기에서 비동기 또는 지연 속성을 활성화할지 여부를 선택할 수 있습니다.

많은 플러그인이 jQuery에 의존하기 때문에 이러한 스크립트를 제외하는 것이 좋습니다. jQuery에 비동기 속성을 적용하려고 하면 웹 사이트가 손상될 수 있습니다.

확실하지 않은 경우 defer 속성을 사용할 수 있지만 가장 좋은 조치는 jQuery를 완전히 제외하는 것입니다.

이제 연기하거나 비동기화하려는 특정 스크립트를 나열할 수 있습니다. 각 스크립트를 올바른 섹션에 배치했는지 확인하는 것이 중요합니다.

스크립트 제외 섹션에서 이 프로세스에서 제외할 스크립트를 나열할 수 있습니다.

페이지 하단에는 플러그인 및 테마 제외 옵션도 표시됩니다. 여기에 테마 또는 플러그인을 나열하면 해당 스크립트가 비동기 또는 지연 속성에 적용되지 않습니다.

이러한 옵션을 사용자 정의한 후에는 설정 저장 을 클릭할 수 있습니다. 이 방법은 스크립트를 수동으로 편집하는 것과 플러그인이 이 프로세스를 수행하도록 허용하는 것 사이에서 효과적인 중간 지점이 될 수 있습니다. 또는 Jetpack Boost와 같은 올인원 도구를 사용하여 이러한 추가 단계를 제거할 수 있습니다.

자주 묻는 질문(FAQ)

보시다시피 WordPress에서 렌더링 차단 리소스를 제거하는 방법에는 여러 가지가 있습니다. 이 프로세스에 대한 가장 일반적인 질문을 살펴보겠습니다.

렌더링 차단 리소스에 대해 WordPress 사이트를 테스트하려면 어떻게 해야 합니까?

PageSpeed ​​Insights에 URL을 입력하여 WordPress 웹사이트를 테스트할 수 있습니다. 결과에서 기회 섹션 아래에서 렌더링 차단 리소스를 찾습니다.

렌더링 차단 리소스가 Core Web Vitals와 관련되어 있습니까?

예, 렌더링 차단 리소스는 사이트의 핵심 성능 평가 점수에 부정적인 영향을 미칠 수 있습니다. 최적화되지 않은 스크립트는 LCP(Large Contentful Paint), TBT(Total Blocking Time) 및 FCP(First Contentful Paint)를 증가시킬 수 있습니다. PageSpeed ​​Insights와 같은 Core Web Vitals 소프트웨어로 웹사이트를 테스트하는 경우 점수를 향상시키기 위해 렌더링 차단 리소스를 제거하도록 제안할 수 있습니다.

HTML은 렌더링 차단 리소스입니까?

예, 페이지 렌더링 프로세스를 지연시키는 HTML 가져오기, 스크립트 또는 스타일시트는 렌더링 차단 리소스가 될 수 있습니다.

이미지가 렌더링 차단입니까?

아니요, 이미지는 렌더링 차단 리소스가 아니지만 페이지 속도를 높이기 위해 이미지를 최적화할 수 있습니다. Jetpack Boost를 사용하면 오프스크린 이미지를 지연하여 화면에 보이는 것만 로드할 수 있습니다. 그런 다음 방문자가 페이지를 아래로 스크롤하면 이미지가 로드됩니다.

더 빠른 로드 시간을 위해 사이트 최적화

렌더링 차단 파일을 제거하면 사이트의 로드 시간을 개선할 수 있습니다. 이것은 더 나은 사용자 경험에 기여할 수 있으며 방문자를 더 오랫동안 웹사이트에 머물 수 있습니다. 따라서 렌더링 차단 리소스를 제거하면 사이트를 최적화하여 목표를 더 잘 달성할 수 있습니다.

검토하기 위해 다음은 WordPress에서 렌더링 차단 리소스를 제거할 수 있는 5가지 방법입니다.

1. Jetpack Boost로 CSS 로딩을 최적화하십시오.
2. 필수적이지 않은 자바스크립트를 연기합니다.
3. 오프스크린 이미지를 연기합니다.
4. 렌더링 차단 리소스를 수동으로 제거합니다.
5. Async JavaScript 플러그인을 사용하여 async 또는 defer 속성을 적용합니다.

렌더링 차단 리소스를 제거하면 방문자가 더 빠른 로딩 시간을 즐길 수 있습니다!