중요한 렌더링 경로: 정의 및 최적화 방법

게시 됨: 2023-04-27

사용자에게 초고속 웹 경험을 제공하는 것에 대해 이야기할 때 웹 사이트 소유자 및 웹 개발자로서 우리가 해야 할 일에만 집중하는 경우가 많습니다.

그러나 사실은 다음과 같습니다.

빠른 웹 경험을 제공하려면 브라우저에서 많은 작업이 필요합니다.

HTML, CSS 및 JavaScript 파일을 수신하고 특정 단계를 거쳐 화면의 픽셀로 변환합니다.

성능을 높이는 비결은 리소스 수신과 리소스를 렌더링된 픽셀로 변환하기 위한 처리 사이에 어떤 일이 발생하는지 이해하는 데 있습니다.

이 프로세스는 CRP(주요 렌더링 경로) 라고도 합니다.

이 기사에서는 CRP에 대해 알아야 할 모든 것과 더 빠른 렌더링을 위해 CRP를 최적화하는 방법을 배웁니다.

  • 중요한 렌더링 경로란 무엇입니까?
  • 중요한 렌더링 경로 순서 설명
  • 사이트의 주요 렌더링 경로를 최적화하는 방법
  • CRP를 최적화하는 3가지 WordPress 플러그인
  • CRP 최적화 체크리스트

의 시작하자!


중요한 렌더링 경로란 무엇입니까?

주요 렌더링 경로는 웹 브라우저가 HTML, CSS 및 JavaScript 코드를 사용자 화면의 시각적 표현으로 변환하기 위해 수행하는 일련의 단계를 나타냅니다.

여기에는 DOM(문서 객체 모델) 구성, CSS 객체 모델(CSSOM) 생성, 두 가지를 결합하여 렌더 트리 생성과 같은 일련의 프로세스가 포함됩니다. 그런 다음 렌더 트리를 사용하여 레이아웃을 계산하고 사용자 화면의 픽셀을 칠합니다.

중요한 렌더링 경로

반면에 중요한 렌더링 경로 최적화는 웹 브라우저가 시퀀스의 각 단계를 실행하는 데 소요되는 시간을 줄이는 동시에 사용자의 현재 작업과 관련된 콘텐츠의 우선 순위를 지정하는 것을 말합니다.

최적화 노력이 제대로 작동하도록 하려면 시퀀스의 각 단계를 깊이 있게 이해해야 합니다. 따라서 다음 두 단락은 필수적이며 조치를 취하기 전에 읽어볼 것을 강력히 권장합니다.


중요한 렌더링 경로 시퀀스 설명

다음은 페이지를 렌더링할 때 브라우저에서 수행하는 단계에 대한 간략한 개요입니다.

  1. 브라우저는 HTML 마크업을 다운로드 및 구문 분석하고 DOM을 생성합니다.
  2. 다음으로 CSS 마크업을 다운로드 및 처리하고 CSSOM(CSS Object Model)을 구성합니다.
  3. 그런 다음 DOM과 CSSOM에서 필요한 노드를 결합하여 페이지를 렌더링하는 데 필요한 모든 표시 노드의 트리 구조인 렌더 트리를 만듭니다.
  4. 레이아웃 프로세스를 통해 페이지에 있는 모든 요소의 크기와 위치를 계산합니다.
  5. 마지막으로 브라우저는 화면의 픽셀을 그립니다.

이제 각 단계에서 영역을 설정해 보겠습니다.


DOM

문서 개체 모델(DOM)은 브라우저의 HTML 문서 내부 표현입니다.

웹 페이지가 로드되면 브라우저는 HTML을 구문 분석하고 문서의 요소를 나타내는 노드의 트리형 구조를 만듭니다. 각 노드는 HTML 요소에 해당하며 해당 속성, 콘텐츠 및 트리에서의 위치를 ​​설명하는 속성이 있습니다.

DOM 트리

중요: 브라우저는 점진적으로 DOM을 구축하므로 효율적인 구조를 구성하고 과도한 DOM 크기를 피함으로써 페이지 렌더링을 최적화할 수 있습니다.


CSSOM

DOM에는 페이지의 모든 콘텐츠가 포함되어 있지만 CSSOM에는 DOM의 스타일을 지정하는 방법에 대한 모든 정보가 포함되어 있습니다.

CSSOM

DOM과 CSSOM의 또 다른 차이점은 다음과 같습니다.

DOM 구성은 점진적이지만 CSSOM은 그렇지 않습니다.

웹사이트가 로드되면 브라우저는 스타일을 적용하기 위해 CSS를 처리해야 합니다. 비트 단위로 처리할 수 있는 HTML과 달리 CSS는 한꺼번에 처리해야 합니다. 일부 스타일은 나중에 CSS 파일에서 다른 스타일로 덮어쓸 수 있기 때문에 브라우저는 적용할 스타일을 결정하기 전에 전체 CSS 파일을 읽을 때까지 기다려야 합니다.

이는 나중에 덮어써서 리소스를 낭비할 스타일을 표시하지 않도록 하기 위한 것입니다.

간단히 말해서:

브라우저는 모든 CSS를 수신하고 구문 분석할 때까지 렌더링 프로세스를 차단합니다.

이것이 CSS가 렌더링 차단 리소스로 간주되는 이유입니다.


렌더 트리

렌더 트리는 브라우저가 웹 페이지의 시각적 표현을 생성하는 데 사용하는 DOM과 CSSOM의 조합입니다.

브라우저는 렌더 트리를 사용하여 페인팅 프로세스에 대한 입력으로 노드 치수 및 위치를 계산합니다.

렌더링 트리

중요: 보이는 콘텐츠만 렌더 트리에서 캡처됩니다. 일반적으로 헤드 섹션에는 눈에 보이는 정보가 포함되어 있지 않으므로 제외됩니다. 또한 요소에 display: none 속성이 있는 경우 해당 요소와 그 자손이 모두 렌더링 트리에 포함되지 않습니다.


공들여 나열한 것

렌더 트리가 구성되면 다음 단계는 레이아웃입니다. 레이아웃은 크기, 위치 및 상호 관계를 정의하여 페이지에서 각 요소의 배치 및 방향을 설정합니다.

그러나 여기에 문제가 있습니다.

레이아웃 성능은 DOM의 영향을 받습니다.

다시 말해서:

DOM 노드 수가 많을수록 레이아웃 프로세스가 길어집니다.


페인트

마지막 단계는 렌더 트리 및 레이아웃 생성에 이어 화면에 픽셀을 페인팅하는 것입니다.

처음에는 로드 프로세스 중에 전체 화면이 그려집니다. 결과적으로 브라우저는 필요한 영역만 다시 그리도록 설계되었기 때문에 영향을 받는 화면 부분만 다시 그립니다.

페인트 단계의 기간은 렌더 트리에서 구현되는 업데이트의 특성에 따라 달라집니다.

이제 브라우저를 돕고 일부 프로세스의 속도를 높이기 위해 어떤 최적화를 적용할 수 있는지 살펴보겠습니다.


사이트의 주요 렌더링 경로를 최적화하는 방법

브라우저가 전체 프로세스를 실행하는 데 필요한 시간은 다를 수 있습니다. 중요한 경로 길이에 기여하는 움직이는 부품이 많이 있습니다.

  • 문서 크기
  • 요청 수
  • 사용자 장치
  • 적용된 스타일

그럼에도 불구하고 CRP 최적화와 관련하여 이동 옵션으로 간주되는 세 가지 기술이 있습니다.

  1. 중요하지 않은 리소스를 연기하거나 모두 제거하여 중요한 리소스의 수를 최소화합니다.
  2. 각 요청의 파일 크기와 함께 필요한 요청 수를 최적화합니다.
  3. 중요한 자산의 다운로드 우선순위를 지정하여 중요한 경로 길이 단축

각 권장 최적화 전략을 구현하는 방법에 대해 좀 더 자세히 살펴보겠습니다.


렌더링 차단 CSS 및 JS 리소스 최적화

브라우저가 렌더링을 차단하는 CSS 및 JS 리소스를 발견하면 렌더링을 포함한 다른 작업을 수행하기 전에 다운로드, 구문 분석 및 실행해야 한다는 것을 이미 알고 있습니다.

렌더링에 대한 렌더링 차단 리소스 효과

CSS 최적화와 관련하여 다음 기술을 구현할 수 있습니다.

  • 중요한 CSS. 웹 페이지의 보이는 부분을 렌더링하는 데 필요한 최소한의 CSS 규칙 집합을 식별하고 전체 스타일시트를 로드하는 대신 인라인 CSS로 브라우저에 전달합니다. 스크롤 없이 볼 수 있는 콘텐츠에 필요한 CSS만 로드하면 브라우저에서 페이지를 더 빠르게 렌더링하고 사용자 환경을 개선할 수 있습니다 . 이는 브라우저가 페이지를 렌더링하기 전에 전체 스타일시트가 로드될 때까지 기다릴 필요가 없기 때문입니다.
  • CSS 파일을 결합합니다. CSS 연결은 여러 CSS 파일을 단일 파일로 결합하는 프로세스입니다. 이 기술은 브라우저가 여러 CSS 파일 대신 단일 CSS 파일만 다운로드하고 파싱하면 되므로 웹페이지를 로드하는 데 필요한 HTTP 요청 수를 줄여 성능을 향상시킵니다 .

JavaScript 파일과 관련하여 수행할 수 있는 작업은 다음과 같습니다.

  • 지연 JS 로딩. JS 로딩 지연 은 HTML 문서가 로드되고 구문 분석될 때까지 JavaScript 파일 로딩을 지연시켜 사이트 속도를 높이는 기술입니다. JS 파일을 참조하는 스크립트 태그에서 defer 속성을 사용할 수 있습니다. defer 속성은 로드 시 즉시 실행할 필요가 없는 JS 파일(예: 특정 페이지에서만 사용되는 파일)에만 사용해야 한다는 점에 유의해야 합니다. 여러 지연 스크립트가 있는 경우 실행 순서를 예측할 수 없기 때문입니다. 사용됩니다.
  • JS를 비동기식으로 로드합니다. 일부 JS 파일은 HTML 문서의 구문 분석과 비동기적으로 파일을 로드하고 실행할 수 있는 async 속성을 사용해야 할 수 있습니다.

CSS와 JavaScript 모두에 적용할 수 있는 몇 가지 최적화가 있습니다.

  • 축소. 축소에는 CSS 및 JavaScript 파일에서 공백, 주석 및 줄 바꿈과 같은 불필요한 문자를 제거하는 작업이 포함됩니다. 이 프로세스는 기능이나 모양에 영향을 주지 않고 파일 크기를 크게 줄일 수 있습니다 .
  • 사용하지 않는 CSS 및 JS를 제거합니다. 미사용 CSS 및 JS는 특정 페이지에서 사용되지 않지만 여전히 로드되는 특정 규칙을 나타냅니다. 파일의 이러한 부분을 제거하면 브라우저가 렌더링 트리를 빌드하는 속도에 직접적인 영향을 미칩니다 .

자동 조종 장치에서 렌더링 차단 리소스를 최적화합니다. NitroPack 설치 →


파일 크기 줄이기

브라우저가 다운로드해야 하는 데이터의 양을 줄이기 위해 축소, 압축, HTML, CSS 및 JavaScript 리소스의 캐싱과 같은 기술을 사용할 수 있습니다.

축소가 무엇을 의미하는지 이미 알고 있으므로 다른 두 가지에 집중해 보겠습니다.

  • 압축. 압축은 원본보다 적은 비트를 사용하여 파일의 이진 코드를 다시 작성하는 알고리즘을 적용하는 기술입니다. 결과적으로 파일 크기가 훨씬 작아져 페이지 로드 시간과 대역폭 사용량이 줄어듭니다.
  • 캐싱. 캐싱은 모든 브라우저에 구현된 HTTP 캐시를 활용합니다. 효과적인 캐싱을 보장하려면 각 서버 응답이 올바른 HTTP 헤더를 제공하여 요청된 리소스를 캐시해야 하는 시기와 기간을 브라우저에 지시해야 합니다.

가장 진보된 캐싱 메커니즘을 사용합니다. 오늘 NitroPack 받기 →


중요한 자산의 다운로드 우선 순위 지정

일반적으로 브라우저는 가장 중요한 리소스의 우선 순위를 지정하고 먼저 가져오는 데 매우 능숙합니다. 그러나 경우에 따라 가장 중요한 리소스의 우선 순위를 수동으로 지정하여 사이트를 더 빨리 로드하도록 도울 수 있습니다.

리소스 힌트를 사용하여 특정 리소스 또는 웹 페이지를 처리하는 방법을 브라우저에 알릴 수 있습니다.

다음은 세 가지 주요 항목입니다.

  • 링크 rel=프리페치. Prefetch는 브라우저가 나중에 필요할 수 있는 리소스를 가져와 브라우저의 캐시에 저장할 수 있도록 하는 낮은 우선 순위의 리소스 힌트입니다.

링크 관계 프리페치 설명

  • 링크 rel=사전 연결. 사전 연결 지시문은 브라우저가 서버에 초기 요청을 보내기 전에 초기 연결을 설정하는 데 도움이 됩니다.

링크가 있는 것과 없는 것의 차이 rel=preconnect

  • 링크 rel=예압. 사전 로드는 페이지에 중요하기 때문에 브라우저가 리소스를 발견하는 것보다 빨리 브라우저가 리소스를 다운로드하도록 하는 데 사용됩니다.

중요: 프리페치 및 사전 연결은 리소스 힌트이며 브라우저가 적합하다고 판단하는 대로 실행됩니다. 사전 로드 지시문은 브라우저에 필수인 명령입니다. 리소스 힌트를 구현하는 방법에 대해 자세히 알아보세요.

중요한 렌더링 경로 최적화를 처리하는 방법을 알았으니 이제 프로세스를 자동화할 수 있는 몇 가지 WordPress 플러그인을 살펴보겠습니다.


중요한 렌더링 경로를 최적화하는 3가지 WordPress 플러그인

위에서 언급한 모든 최적화는 수동으로 수행할 수 있습니다. 그러나 그들 중 일부는 프로세스 중에 사이트를 손상시키지 않도록 기술 지식이 필요합니다.

다행스럽게도 모든 WordPress 사용자에게는 CRP 최적화에 도움이 되는 플러그인이 있습니다. 우리 의견으로는 상위 3개 후보를 확인해 봅시다.


NitroPack - 올인원 솔루션

니트로팩 홈페이지

NitroPack은 35개 이상의 웹 성능 기능을 결합한 최고의 올인원 사이트 속도 최적화 솔루션입니다. 중요한 렌더링 경로를 최적화할 때 NitroPack은 다음과 같은 최적화를 자동으로 처리합니다.

  • 중요한 CSS
  • CSS 및 JS 축소
  • CSS 및 JS 압축
  • 캐싱
  • 지연 JS 로딩
  • 사용하지 않는 CSS 및 JS 제거

그러나 최적화 기능은 여기서 끝나지 않습니다. 또한 완전한 성능 툴킷을 얻을 수 있습니다.

  • 내장 CDN
  • 완전한 이미지 최적화 스택
  • 글꼴 최적화
  • 전자상거래 카트 캐싱
  • 연중무휴 지원

자동으로 웹 사이트 속도를 높이십시오. 오늘 NitroPack 받기 →


WP 슈퍼 캐시 - 캐싱 전용 플러그인

WP 슈퍼 캐시

WP Super Cache는 주로 캐싱 기능과 HTTP 압축을 제공하지만 비동기 및 지연 속성을 사용하여 리소스 축소 및 JavaScript 최적화가 부족한 캐싱 플러그인입니다.

가장 주목할만한 기능은 다음과 같습니다.

  • 모든 방문자에 대해 캐싱 활성화
  • 로그인한 방문자에 대한 캐싱 비활성화
  • 방문자에게 더 빨리 제공되도록 페이지를 압축합니다.
  • 캐시 재구축


신속한 성능

신속한 성능

Swift Performance는 최적화된 CRP를 추구하는 데 유용할 수 있는 또 다른 플러그인입니다. 일부 기능은 다음과 같습니다.

  • CSS 및 JavaScript 파일 축소
  • 중요한 CSS
  • 캐싱
  • 이미지 최적화


주요 렌더링 경로 최적화[체크리스트]

이 기사에서 많은 부분을 다루었으므로 언급한 모든 최적화에 대한 편리한 체크리스트는 다음과 같습니다.

  • 중요한 CSS 생성
  • CSS 파일 결합
  • 자바스크립트 로딩 지연
  • JavaScript를 비동기식으로 로드
  • CSS 및 JavaScript 축소
  • CSS 및 JavaScript 압축
  • 사용하지 않는 CSS 및 JavaScript 제거
  • 축소 적용
  • 압축 적용
  • 캐싱 사용
  • 링크 rel=preload 구현
  • 링크 rel=prefetch 구현
  • 링크 rel=preconnect 구현

CRP 최적화 체크리스트 다운로드 →

마지막으로 모든 최적화 전후에 테스트하는 것을 잊지 마십시오!