렌더링 차단 리소스를 제거하는 방법 | WP 버프

게시 됨: 2021-12-10

웹사이트의 로드 속도에 대한 불만이 있거나 웹 페이지를 더 빠르게 로드하고 사용자 경험을 개선하려는 경우 렌더링 차단 리소스를 제거하는 방법을 고려할 수 있습니다.

이유에 관계없이 방문자의 얼굴에 웹사이트가 얼마나 빨리 표시되는지는 사용자 경험에 영향을 미치고 비즈니스에서 클라이언트 연결을 놓칠 수 있습니다. 사용자의 웹사이트 경험은 주로 중요한 렌더링 경로와 렌더링 프로세스 동안 웹사이트가 로드하는 스크립트 관리에 따라 달라집니다.

렌더링이란?

모든 웹사이트는 사용자가 콘텐츠를 보고 상호작용할 수 있는 경로를 따릅니다. 웹 사이트를 로드하는 경로를 중요한 렌더링 경로라고 합니다. 이 경로는 방문자와 브라우저에 대한 데이터를 수집하고 구축하기 위한 각 사이트의 단계를 설명합니다.

브라우저가 렌더링하기 전에 수행하는 작업

웹사이트 URL을 입력하면 다음 프로세스가 실행됩니다.

사용자가 특정 URL을 요청하면 탐색이 완료됩니다.
1. 서버가 IP 주소를 제공하는 DNS 조회가 발생합니다.
2. 브라우저와 웹사이트 서버는 TCP 핸드셰이크를 수행하여 연결합니다.
3. 보안 연결 요청은 TLS 협상 또는 두 번째 핸드셰이크 교환을 받습니다.
브라우저는 응답을 수신하고 웹사이트의 코드를 가져옵니다.
1. 데이터의 첫 번째 패킷은 네트워크 트래픽을 조절하기 위해 TCP 느린 시작에서 수신됩니다.
2. 사용자는 연결 제한 및 전송 속도를 설정하기 위해 서버에 승인(ACK)을 보냅니다.
브라우저는 정보를 구문 분석하고 데이터를 CSS 개체 모델(CSSOM) 및 문서 개체 모델(DOM)로 바꿉니다.
1. DOM 트리가 구축됨(사이트 및 페이지 구조)
2. 사전 로드 스캐너는 스크립트 및 이미지와 같은 외부 리소스를 수집합니다.
3. CSSOM이 빌드됩니다(스타일 트리).
4. CSSOM이 빌드되는 동안 JavaScript가 컴파일됩니다.
5. AOM(접근성 개체 모델)은 콘텐츠를 해석하는 보조 장치용으로 구축되었습니다.
렌더링은 이전에 생성된 CSSOM 및 DOM 트리를 사용하여 발생합니다.

페이지를 렌더링하면 어떻게 됩니까?

FireFox 브라우저 검사 도구 이미지 — FireFox 브라우저 검사 도구

웹사이트는 코드 디자인을 통해 렌더링되어 레이아웃, 스타일, 페인팅을 완료하고 웹사이트에서 합성하기도 합니다. CSS 개체 모델(CSSOM) 및 문서 개체 모델(DOM)

스타일

DOM과 CSSOM이 렌더 트리로 결합되고 구성이 시작됩니다. 렌더 트리는 사이트 및 각 고유 노드에 대해 표시되는 노드, 콘텐츠 및 계산된 스타일을 구성합니다.

형세

레이아웃은 아키텍처가 구성과 만나는 단계이며 페이지에 대한 구조가 생성되어 렌더 트리의 모든 노드의 너비, 높이 및 위치가 표시됩니다. 모든 개체는 크기와 위치가 결정됩니다.

웹 사이트는 상자 구조로 배치됩니다. 이 상자는 다양한 뷰포트 크기를 무제한으로 조정할 수 있습니다. 크기 조정을 위해 상자 구조가 변경되는 경우 이를 리플로우 라고 합니다.

페인트: 첫 번째 페인트 및 첫 번째 콘텐츠가 포함된 페인트(FCP)

웹사이트 브라우저가 페이지를 렌더링하는 순간을 "First Paint"라고 합니다. 첫 번째 페인트는 페이지의 코드에 따라서만 단색 배경색이 될 수 있습니다.

FCP(First Contentful Paint)는 웹사이트 방문자가 페이지의 콘텐츠(텍스트, 이미지, 비디오 등)를 볼 수 있는 측정 가능한 순간을 나타냅니다. FCP는 페이지 로드 시작부터 콘텐츠가 렌더링되는 지점까지를 측정합니다.

First Paint와 FCP는 빠른 로딩 페이지나 빠른 성능과는 다르지만 사이트 방문자가 빠른 로딩 페이지를 인지할 때 사용자 경험은 훨씬 더 긍정적입니다. First Paints, 로드 시간 및 사이트 성능을 미세 조정하면 로드 시간에 대한 사용자의 인식이 향상됩니다.

GTmetrix의 WP Buffs 속도 성능 보고서 이미지 — GTmetrix의 WP Buffs 속도 성능 보고서

합성

웹 페이지는 구조를 구성하기 위해 개체가 겹치는 레이어를 사용합니다. 합성은 페이지가 올바르게 렌더링하기 위해 항목의 순서를 계산하는 곳입니다.

리플로우에서 객체 위치가 자주 변경되기 때문에 리플로우는 재합성을 트리거합니다.

렌더링 차단 리소스란

브라우저가 웹 사이트에서 콘텐츠를 렌더링하는 것을 느리게 하거나 지연시키거나 차단하는 스크립트, 스타일시트 및 HTML 가져오기는 렌더링 차단 리소스입니다. 사람들이 렌더링 차단 리소스를 참조할 때 일반적으로 다음을 참조합니다.

CSS
<head> 섹션의 JavaScript
서버 또는 콘텐츠 전송 네트워크에서 로드된 글꼴
HTML 가져오기(기존 페이지)

렌더링 차단이 아니며 상단 근처에서 로드하는 데 중요한 CSS 및 JavaScript가 많이 있습니다. 모든 사이트 방문자가 스타일이 지정되지 않은 콘텐츠 대신 의도한 콘텐츠를 볼 수 있도록 스타일 시트의 우선 순위를 지정합니다.

렌더링 차단 JavaScript 및 CSS란 무엇입니까?

렌더링 프로세스 동안 브라우저는 모든 스크립트를 포함하여 <head>의 정보를 먼저 실행하여 웹사이트 정보를 로드합니다. 모든 스크립트는 순서대로 실행되어야 하며 브라우저에 페이지가 표시되기 전에 완전히 처리되어야 합니다.

스크립트는 대기열에 빌드되므로 <head>의 스크립트 순서는 개발 중에 필수적입니다. 코드에 따라 속도가 느려지거나 웹사이트가 완전히 로드되지 않을 수 있으며, 이를 렌더링 차단 CSS 및 JavaScript라고 합니다.

WordPress 웹사이트의 스크립트는 테마, 사용자 정의 작업 또는 다양한 기능을 위해 추가된 플러그인에서 가져올 수 있습니다.

이미지 렌더 블록 리소스입니까?

이미지가 렌더링 차단 리소스인지 궁금하다면 그렇지 않습니다. 그림의 크기는 여전히 페이지에 로드 문제를 일으킬 수 있지만 렌더링을 차단해서는 안 됩니다.

렌더링 차단 리소스를 제거하는 이유는 무엇입니까?

렌더링 차단 리소스를 제거하기 위한 예를 보여주는 GT Metrix의 WP Buffs 폭포 보고서 이미지 — WP 버프 폭포 보고서

렌더링 차단 스크립트는 페이지 로드 시간을 늦추고 방문자의 웹사이트 경험을 망칠 수 있습니다. 느린 웹사이트에 대한 인식은 웹사이트 경험이 좋지 않은 경우 방문자의 손실로 이어질 수 있습니다. 낮은 방문자 유지율은 검색 엔진 결과에 영향을 미치고 결과 목록을 낮출 수 있습니다.

검색 엔진 최적화(SEO) 순위가 낮다는 것은 방문자가 감소하고 잠재적인 비즈니스가 손실된다는 의미입니다. 순위가 떨어지면 방문자 수가 줄어들고 사이트가 열악하면 방문자 유지가 줄어듭니다. 렌더링 차단 리소스는 큰 문제가 될 수 있습니다.

웹사이트가 높은 Google PageSpeed 점수를 목표로 하는 경우 렌더링 차단 리소스를 이해하는 것이 그 목표를 달성하는 데 중요합니다.

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

사이트의 SEO 순위 및 사용자 경험에 대해 진지하게 생각한다는 것은 사이트에 렌더링 차단 리소스가 처리되거나 제거되어야 한다는 것을 의미합니다. 사이트를 처음부터 구축하지 않는 경우 웹사이트에서 렌더링 차단 리소스 테스트를 시작하세요.

이러한 렌더링 차단 리소스를 식별한 후에는 문제를 해결하고 사이트 기능을 개선할 방법을 선택하게 됩니다.

웹 사이트에 렌더링 차단 리소스가 있는지 테스트

렌더링 차단 리소스에 대한 Google PageSpeed Insights 보고서 테스트 이미지. — WP 버프용 Google PageSpeed 보고서

렌더링 차단 리소스를 찾기 위해 웹사이트에서 평가를 실행하는 것은 전혀 문제가 되지 않습니다(Google PageSpeed Insights 사용). 최선을 다해 최적화했고 모범 사례를 따르고 있지만 여전히 문제가 발생하거나 어디서부터 시작해야 할지 모르겠다면 페이지 평가자가 도움이 될 수 있습니다.

렌더링 차단 JavaScript 및 CSS를 제거하는 방법

WordPress를 사용하면 몇 가지 다른 방법으로 사이트의 렌더링을 방해하는 리소스를 관리할 수 있습니다. WordPress를 사용하면 코드, 태그, 파일 구성 및 최적화, 플러그인을 사용하여 렌더링 차단 스크립트와 링크를 구성할 수 있습니다.

전문 개발자는 이러한 프로세스를 코드에 구축하는 사용자 지정 플러그인 또는 테마를 만들 수도 있습니다.

코드로 렌더링 차단 자바스크립트 제거

코드를 통해 렌더링 차단 리소스를 처리하는 세 가지 방법은 다음과 같습니다.

<script> 및 <link>에 대한 태그를 HTML 코드의 맨 아래로 이동
중요하지 않은 스크립트의 태그에 async 또는 defer 속성을 추가합니다.
사용하지 않는 JavaScript 코드를 제거하십시오.

WordPress는 플러그인 및 테마에서 사용되는 이전 버전의 jQuery와의 호환성을 제공하기 위해 jQuery Migrate 파일을 로드합니다. 사이트에서 작동에 필요한 항목이 없는 경우 코드 또는 플러그인을 사용하여 WordPress에서 이 jQuery Migrate 파일을 로드하지 못하도록 할 수 있습니다.

렌더링 차단 스타일시트 제거

스타일시트의 특성은 본질적으로 렌더링 차단 리소스를 만듭니다. 다음과 같은 방법으로 사이트에서 이 문제를 해결할 수 있습니다.

CSS를 미디어 유형(모바일, 태블릿, 데스크톱 등)별로 분할합니다.
중요한 렌더링 경로 최적화
CSS 파일 결합

WordPress와 비주얼 빌더를 사용하면 페이지 빌드 방식을 직접 제어할 수 없지만 문제를 해결할 수 있는 방법이 있습니다.

WordPress 플러그인 또는 확장을 사용하여 렌더링 차단 주소 지정

WordPress 플러그인 및 확장은 페이지에서 스크립트를 구성하는 데 사용됩니다. 플러그인은 페이지의 <script> 및 <link> 태그를 거쳐 특정 지침에 따라 지연 또는 비동기 속성을 적용합니다.

우리는 WordPress용 플러그인의 범위를 살펴보고 테스트했으며 블로그에서 속도 최적화를 위해 가장 좋아하는 플러그인과 같은 유용한 것들을 계속 공유하고 있습니다.

WordPress 전문가에게 렌더링 차단 리소스 제거

일부 플러그인은 사용자 정의가 필요하며, 간단해 보이지만 잘못 설정하면 작동하지 않을 수 있습니다. WordPress 전문가에게 도움을 요청하는 것은 부끄러운 일이 아니며 WP Buffs에는 사이트를 최적화할 수 있는 여러 전문가가 있습니다.

렌더링 최적화 모범 사례

렌더링 차단 리소스를 번들로 묶어 페이지 로드에 미치는 영향을 줄이세요.
리소스 크기를 줄여 로드할 바이트 수를 줄입니다.
비렌더링 차단 리소스의 다운로드를 연기합니다.
@import 규칙이 있는 CSS는 외부 로드이므로 추가하지 마십시오.
스크립트를 캐시하고 JavaScript 및 CSS를 최적화하도록 설계된 WordPress 플러그인을 사용하십시오.
사용자 정의 글꼴을 로컬로 로드합니다.
중요 및 비핵심 CSS 및 JavaScript를 식별합니다.
중요하지 않은 렌더링 차단 코드를 async 또는 defer 속성으로 표시합니다.
사용하지 않는 코드는 제거해야 합니다.

두통을 없애고 WordPress 전문가의 도움을 받으세요

WP Buffs에 의한 렌더링 차단 리소스를 제거하기 위한 속도 최적화 서비스 페이지 이미지 — WP Buffs의 렌더링 차단 리소스 제거를 위한 속도 최적화 서비스

WP Buffs는 WordPress 사이트를 최적화하고 페이지 성능을 개선하는 데 능숙합니다. 성능이 비즈니스에 중요한 이유와 가장 중요한 영향을 미치기 위해 집중해야 할 영역을 이해합니다.

웹사이트의 성능과 방문자 경험을 개선하는 것은 리소스를 렌더링 차단하는 것 이상일 수 있습니다. WP Buffs는 귀하의 사이트와 주소를 살펴볼 수 있습니다.

이미지 크기
이미지 품질 및 전송 형식
페이지 길이 및 동적 콘텐츠 비율
제대로 구축되지 않은 테마
지연을 일으키는 불필요한 스크립트
제대로 구축되지 않은 플러그인
사용하지 않는 외부 스크립트
오래된 소프트웨어
사이트의 요구 사항을 충분히 지원할 수 없는 제한된 웹 호스팅 계획

WordPress는 웹 사이트를 구축하기에 상당히 쉬운 플랫폼일 수 있지만 사용자 경험을 극대화하려면 숙련된 전문가 또는 훌륭한 서비스 제공자가 필요할 수 있습니다.

자주 묻는 질문

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

웹 사이트는 스크립트와 링크를 사용하여 파일과 코드에 액세스하여 브라우저에서 웹 사이트를 구축합니다. 때때로 스크립트와 링크는 로드하는 데 시간이 걸리고 웹사이트의 다른 부분이 사이트 방문자를 위해 렌더링되지 않도록 합니다. 렌더링 차단 리소스를 제거한다는 것은 웹 사이트가 올바르게 로드되지 않도록 하거나 느리게 하는 스크립트, 링크, 글꼴 및 파일을 처리하는 것을 의미합니다.

렌더링 차단 리소스는 어떻게 수정합니까?

렌더링 차단 리소스를 수정하는 방법에는 여러 가지가 있으며 선택하는 무기는 해결해야 하는 항목에 따라 다릅니다. 페이지를 로드하는 데 어떤 스크립트와 링크가 중요한지 파악한 다음 필요할 때까지 나머지는 연기합니다. 코드 우선 순위 지정은 코드를 사용하거나 플러그인을 사용하여 수행할 수 있습니다.

내 웹사이트에서 렌더링 차단 리소스를 제거하려면 어떻게 합니까?

WordPress를 사용하는 경우 가장 쉬운 방법은 중요한 것과 렌더링 프로세스에서 나중에 지연될 수 있는 것을 평가하여 스크립트와 외부 로드를 관리하는 고품질 플러그인을 사용하는 것입니다. 수동 구성을 위해 수동으로 코드를 평가하고 각 스크립트에 태그를 할당하는 대신(여전히 가능하고 권장됨) 플러그인이 자동으로 이를 처리합니다.

플러그인 없이 렌더링 차단 리소스를 어떻게 수정/제거합니까?

웹사이트에 다른 플러그인을 추가할 생각이 없거나 플러그인이 옵션이 아닌 경우 렌더링 차단 리소스를 수정하는 다른 방법이 있습니다. 코드의 모든 스크립트와 링크를 수동으로 최적화하여 효율적인 순서로 로드되도록 하거나 필요한 기능이 완료될 때까지 해당 스크립트의 로드를 연기할 수 있습니다.