Lighthouse를 통해 웹 사이트를 운영하는 경우 렌더링 차단 리소스를 제거하라는 제안을 보았을 수 있습니다.
JavaScript를 지연시키고 중요한 CSS 스타일을 인라인으로 배치함으로써 WordPress에서 렌더링 속도를 늦추는 리소스를 제거할 수 있습니다. 이것은 대부분의 캐시 플러그인, Autooptimize 및 Async JavaScript에서 지원됩니다. Elementor 와 Divi 모두 지연 및 인라인 CSS를 사용하여 페이지 렌더링을 중지시키는 리소스를 제거하는 방법이 내장되어 있습니다. 불필요한 CSS, JavaScript 및 타사 코드를 제거하면 해결에 도움이 될 수 있습니다.
이 기사에서는 렌더링 차단 리소스를 정의하고 웹 사이트에서 이러한 리소스를 제거할 때의 이점에 대해 설명합니다. 그런 다음 이를 제거하는 5가지 대체 방법을 보여 드리겠습니다.
렌더링 차단 리소스란 무엇입니까??
렌더링 차단 리소스를 자세히 살펴보기 전에 일반적인 웹사이트 로딩 프로세스를 이해하는 것이 중요합니다. 웹사이트의 전체 콘텐츠는 방문자가 링크를 클릭한 후 방문자의 브라우저에서 렌더링(또는 다운로드)되어야 합니다. 웹 사이트의 모든 HTML, CSS 및 JavaScript를 위에서 아래로 읽습니다. 귀하의 웹사이트는 브라우저가 이 스크립트 대기열 읽기를 완료할 때까지 방문자에게 표시되지 않습니다. 렌더링 차단 리소스가 있으면 오래 기다려야 할 수도 있습니다. 기본적으로 처리되는 동안 브라우저가 다른 콘텐츠를 로드하지 못하게 하는 CSS 또는 JavaScript 파일은 렌더링 차단 리소스입니다. 이렇게 하면 렌더링 프로세스가 중지되고 페이지가 완료되지 않았거나 비어 있는 것처럼 보일 수 있습니다.
놀라운 웹사이트 만들기
최고의 무료 페이지 빌더 Elementor와 함께
지금 시작웹 사이트에 렌더링 차단 리소스가 있는 경우 코드 상단에 추가 파일이 로드됩니다. 웹 사이트를 보기 전에 사용자는 이러한 파일이 처리되는 동안 기다려야 합니다. 렌더링 차단 리소스는 여러 웹사이트 성능 지표에 영향을 미칠 가능성이 있습니다. 예를 들어 가장 큰 콘텐츠가 있는 페인트는 페이지의 기본 콘텐츠를 로드하는 데 걸리는 시간을 측정합니다. 사이트 DOM(문서 개체 모델)의 자료가 브라우저에서 처음 렌더링되는 것을 콘텐츠가 포함된 첫 번째 페인트라고 합니다. Totalblockingtime은 콘텐츠가 포함된 첫 번째 페인트와 상호작용 시간(페이지가 완전히 상호작용하는 데 걸리는 시간) 사이의 시간입니다.
로드에 필요하지는 않지만 렌더링 차단 리소스는 렌더링을 방해할 수 있습니다. 결과적으로 웹 사이트의 사용자 경험(UX)이 저하될 수 있습니다. 따라서 방문자가 귀하의 페이지를 떠나는 것을 막기 위해 이들을 제거하는 것이 중요합니다.
렌더링 차단 리소스 제거의 이점
인터넷 사용자는 일반적으로 웹사이트가 로드될 때까지 기다리는 것을 싫어합니다. 빠른 웹사이트는 사용자가 자료를 탐색하도록 유도하고 경쟁업체를 방문하지 않도록 할 수 있습니다. 렌더링 차단 요소를 제거하면 웹 사이트의 코드를 가능한 한 가볍게 만드는 것이 페이지 속도를 향상시키는 비결이 될 수 있습니다. 사이트 성능과 사용자 참여는 Google과 같은 거대 검색 엔진이 웹 사이트를 평가할 때 고려하는 두 가지 요소이기 때문에 렌더링 차단 파일을 제거하면 사이트의 검색 엔진 순위를 높이는 데 도움이 될 수 있습니다.
WordPress에서 렌더링 차단 리소스를 제거하는 방법
이제 WordPress에서 렌더링 차단 요소를 발견하는 방법을 이해했으므로 웹 사이트에서 렌더링 차단 요소를 제거하는 방법이 궁금할 수 있습니다. 다행스럽게도 가장 간단한 것부터 시작하여 이를 달성하기 위해 취할 수 있는 다양한 접근 방식 목록을 정리했습니다.
CSS 로딩 최적화
웹 사이트에서 CSS가 로드되는 속도를 높이는 것은 렌더링 차단 리소스를 제거하는 한 가지 기술입니다. 브라우저는 이전에 말했듯이 위에서 아래로 웹 페이지를 로드합니다. 이로 인해 특정 파일을 처리해야 할 때 로드 프로세스가 더 오래 걸릴 수 있습니다. 페이지를 표시하려면 일부 CSS 파일만 로드해야 한다는 점을 기억하는 것이 중요합니다. 따라서 CSS 로딩을 최적화할 때 가장 중요한 파일을 먼저 표시할 수 있습니다. 렌더링 차단 CSS는 수동으로 제거할 수 있지만 작업을 더 쉽게 하기 위해 플러그인을 설치할 수도 있습니다. Jetpack Boost를 사용하여 WordPress 대시보드에서 바로 웹사이트를 최적화할 수 있습니다. 이 플러그인을 사용하면 지연 로딩을 간단하게 구현하고, 불필요한 JavaScript를 연기하고, CSS 로딩을 개선할 수 있습니다. WordPress에서 렌더링 차단 리소스를 제거하는 가장 간단한 방법 중 하나는 이렇게 하는 것입니다.
WordPress 대시보드의 Plugins Add New에서 Jetpack Boost를 검색하여 시작하십시오. 웹사이트에서 플러그인을 설치한 다음 켭니다.
이미 Jetpack을 로드한 경우 Jetpack My Jetpack으로 이동할 수 있습니다. Boost를 찾아 Jetpack 상품 목록에서 활성화를 선택합니다.
플러그인이 활성화된 후 Jetpack Boost 탭을 클릭하고 시작하기를 선택합니다.
귀하의 웹사이트는 즉시 Jetpack으로부터 성능 등급을 받습니다. 데스크톱 및 모바일 점수에 대한 정보와 함께 문자 등급이 표시됩니다.
그런 다음 아래로 스크롤하여 CSS 로딩 최적화로 이 기능을 활성화합니다. 활성화되면 Jetpack Boost는 웹 사이트의 중요한 CSS를 높여 더 빠르게 로드합니다.
필수적이지 않은 JavaScript 연기
CSS 로딩 최적화 외에 WordPress에서 렌더링 차단 리소스를 제거하기 위해 더 많은 조치를 취할 수 있습니다. 필수적이지 않은 JavaScript도 연기하여 웹 사이트 로딩 속도를 더욱 높일 수 있습니다. 콘텐츠가 로드될 때까지 일부 프로세스를 지연시키기 위해 필수적이지 않은 JavaScript를 지연시킬 수 있습니다. 페이지를 로드하는 데 필요하지 않은 경우 JavaScript 파일 실행을 브라우저에서 중지할 수 있습니다. 다행스럽게도 Jetpack Boost 플러그인을 사용하면 이 작업을 간단하게 수행할 수 있습니다. CSS 로딩 프로세스를 최적화한 후 필수적이지 않은 JavaScript를 쉽게 연기할 수 있습니다. Defer Non-Essential JavaScript 영역의 토글 스위치를 켭니다. 이 섹션은 CSS 로딩 최적화 섹션 아래에서 찾을 수 있습니다.
이 설정을 활성화하면 플러그인이 페이지의 전체 성능에 대한 평가를 업데이트합니다. Jetpack Boost 사용 전과 후의 점수가 모두 표시됩니다.
이 프로세스를 완료하기 전과 후에 찍은 스크린샷의 점수를 살펴보세요. 중요하지 않은 JavaScript를 지연시키고 CSS를 보다 효율적으로 로드함으로써 페이지 속도를 높일 수 있었습니다. 브라우저는 큰 스크립트를 실행할 필요가 없기 때문에 콘텐츠를 더 빨리 로드할 수 있습니다.
오프스크린 이미지 연기
이미지는 페이지 렌더링을 방해하는 리소스는 아니지만 로드 시간을 단축하는 방법에 대해 생각해 볼 수 있습니다. 웹 사이트에는 스크롤과 같이 사용자가 페이지와 상호 작용할 때까지 표시되지 않는 오프스크린 사진이 있는 경우가 많습니다. 웹 페이지를 로드하는 데 필요하지 않기 때문에 지연 로딩으로 연기할 수 있습니다. 방문자가 볼 수 있는 이미지만 게으른 방식으로 로드됩니다. 이러한 사진은 사용자가 스크롤하면 페이지에 표시되기 직전에 로드됩니다. 지연 로딩이 활성화되지 않은 경우 브라우저는 페이지의 모든 이미지를 한 번에 로드하려고 시도합니다. 자료를 로드하는 데 시간이 오래 걸릴수록 방문자가 사이트를 떠날 가능성이 높아집니다.
방문자가 데스크톱 컴퓨터를 사용하는 경우 일반 로드는 문제가 되지 않을 수 있습니다. 반면에 스마트폰과 태블릿은 화면이 더 작고 대역폭이 더 적습니다. 웹사이트에서 모든 사진을 한 번에 완전히 로드하면 휴대전화 사용자가 더 많은 대역폭을 사용하고 로드하는 데 시간이 더 오래 걸릴 수 있습니다. 이 문제는 지연 로딩을 통해 해결됩니다.
사이트에서 지연 로딩을 활성화하려면 Jetpack Boost를 활용하세요. Lazy Image Loading 옵션을 찾아 활성화하십시오.
이렇게 하면 뷰어는 페이지를 아래로 스크롤할 때 웹사이트에 로드되는 이미지만 볼 수 있습니다. 사진은 블록을 렌더링하는 리소스가 아니지만 지연 로딩을 활성화하면 페이지 속도를 높일 수 있습니다.
Elementor/Divi로 렌더링 차단 리소스 제거
Elementor 와 Divi 에는 렌더링을 방해하는 리소스를 제거하는 옵션이 포함되어 있습니다.
Elementor Experiments 설정에서 향상된 CSS 로딩 및 Font-Awesome Inline을 활성화하여 CSS 및 글꼴을 인라인으로 로드하여 렌더링을 차단하지 않도록 합니다. 개선된 자산 로딩은 불필요한 CSS/JavaScript를 제거하여 다양한 방식으로 기본적인 웹 바이탈을 개선합니다.
중요한 CSS를 적용하고 CSS/JavaScript를 연기하고 글꼴을 인라인으로 로드함으로써 Divi 의 성능 옵션은 렌더링 차단 리소스도 줄일 수 있습니다.
렌더링 차단 JavaScript 수동 제거
렌더링 차단 리소스를 수동으로 삭제할 수도 있지만 최적화 플러그인을 설치하는 것이 훨씬 쉬운 옵션입니다. 이상적으로는 숙련된 코더인 경우에만 이 선택에 대해 생각해야 합니다. 웹 사이트의 플러그인 수를 줄이려면 이 절차도 도움이 될 수 있습니다. JavaScript가 보다 효율적으로 실행되도록 파일에 async 또는 defer 속성을 지정할 수 있습니다. 중요하지 않은 스크립트를 별도로 표시하여 브라우저에 지시합니다. 두 특성 모두 HTML 정보 로딩 속도를 높이는 데 사용할 수 있습니다.
HTML 파일은 스크립트 파일을 만날 때까지 일반적인 방식으로 구문 분석됩니다. 그런 다음 스크립트를 찾는 동안 구문 분석이 중지됩니다. 다운로드하여 실행하면 구문 분석이 계속됩니다.
나머지 HTML을 처리하는 동안 브라우저는 비동기 기능 덕분에 JavaScript를 다운로드할 수 있습니다. 다운로드 후 HTML 처리를 중지하고 스크립트를 실행할 수 있습니다.
defer 속성은 유사하게 작동하여 브라우저가 HTML을 구문 분석하는 동안 스크립트를 다운로드할 수 있도록 합니다. 차이점은 HTML 구문 분석이 완료될 때까지 스크립트 실행을 지연한다는 것입니다.
이러한 속성 중 하나를 구현하려면 functions.php 파일에 코드를 포함해야 합니다. 먼저 렌더링 차단 리소스의 script> 태그를 찾아야 합니다. 다음을 비동기 속성으로:
<script src="resource.js" async></script>대안으로 defer 속성이 사용될 때 스크립트가 어떻게 보일지 고려하십시오.
http://resource.js플러그인이 이러한 속성을 처리할 수 있지만 직접 수행하면 선호도에 더 잘 맞을 수 있습니다. 그렇다면 각 속성을 언제 적용해야 하는지 이해하는 것이 중요합니다. 다른 스크립트에 의존하는 비필수 스크립트에 대해 defer 속성을 사용해야 합니다. async 옵션은 다른 스크립트에 적합합니다.
플러그인으로 비동기 또는 지연 속성 적용
수동으로 스크립트를 편집하는 데 문제가 있는 경우 Async JavaScript와 같은 플러그인을 사용하십시오. 이 도구 덕분에 어떤 스크립트에 async 또는 defer 속성이 있는지 완벽하게 제어할 수 있습니다.
플러그인이 설치된 후 설정 비동기 JavaScript에서 비동기 JavaScript 사용을 선택하십시오.
그런 다음 Async JavaScript 메서드 섹션으로 이동합니다. 여기에서 속성을 비동기로 활성화할지 연기할지 여부를 선택할 수 있습니다.
많은 플러그인이 jQuery에 의존하기 때문에 이러한 스크립트를 제외하는 것이 좋습니다. jQuery에 비동기 속성을 적용하면 웹 사이트가 손상될 수 있습니다.
확실하지 않은 경우 defer 속성을 활용할 수 있지만 jQuery를 완전히 제외하는 것이 최선의 조치입니다.
이제 비동기 또는 지연으로 실행할 스크립트를 지정할 수 있습니다. 각 스크립트를 적절한 섹션에 배치하도록 주의해야 합니다.
스크립트 제외 섹션에서 이 절차에서 제외할 스크립트를 나열할 수 있습니다.
페이지 하단에 플러그인 및 테마를 제외하는 옵션도 있습니다. 여기서 언급한 테마 또는 플러그인의 스크립트는 비동기 또는 지연 특성에 적용되지 않습니다.
필요한 조정을 마친 후 설정 저장을 클릭할 수 있습니다. 이 접근 방식은 수동으로 스크립트를 변경하는 것과 플러그인을 사용하여 작업을 처리하는 것 사이에서 유용한 절충안이 될 수 있습니다. 대안으로 Jetpack Boost와 같은 올인원 애플리케이션을 사용하여 이러한 추가 단계를 제거할 수 있습니다.
마무리
방문자의 브라우저가 즉시 필요하지 않은 자산을 다운로드하는 동안 스크롤 없이 볼 수 있는 콘텐츠의 렌더링을 연기하도록 함으로써 렌더링 차단 리소스는 WordPress 사이트의 인지된 페이지 로드 시간을 늘립니다. 방문자가 페이지의 볼 수 있는 영역을 더 빨리 로드하도록 돕기 위해 즉시 필요하지 않은 리소스 로드를 지연해야 합니다. 미리 만들어진 플러그인을 사용하여 WordPress에서 렌더링 차단 리소스를 제거하세요. 동일한 개발자가 만든 두 플러그인인 Autooptimize와 Async JavaScript를 결합하여 비용이 들지 않는 솔루션을 만들 수 있습니다. 지불할 준비가 되었으면 Kinsta와의 특정 상호 작용을 제공하고 많은 추가 WordPress 성능 조정을 지원할 수 있는 WP Rocket을 활용할 수 있습니다.
