Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

주요 렌더링 경로 최적화

최초 렌더링 시 최대한 빠르게 렌더링하려면 다음 세 가지 변수를 최소화해야 합니다.

  • 주요 리소스의 수.
  • 주요 경로 길이.
  • 주요 바이트의 수.

주요 리소스는 페이지의 초기 렌더링을 차단할 수 있는 리소스입니다. 이러한 리소스가 적을수록 브라우저, CPU 및 기타 리소스의 작업이 줄어듭니다.

마찬가지로, 주요 경로 길이는 주요 리소스와 해당 바이트 크기 간의 종속성 그래프를 나타내는 기능입니다. 일부 리소스 다운로드는 이전 리소스가 처리된 후에만 시작될 수 있으며, 리소스가 클수록 다운로드하는 데 걸리는 왕복 수가 더 많아집니다.

마지막으로, 브라우저에서 다운로드해야 하는 주요 바이트 수가 적을수록 신속하게 콘텐츠를 처리하여 화면에 렌더링할 수 있습니다. 바이트 수를 줄이기 위해 리소스를 제거하거나 중요하지 않은 것으로 만들어 리소스 수를 줄일 수 있으며, 각각의 리소스를 압축하고 최적화하여 전송 크기를 최소화할 수도 있습니다.

주요 렌더링 경로를 최적화하기 위한 일반적인 단계는 다음과 같습니다.

  1. 주요 경로(리소스 수, 바이트 수, 길이)를 분석하고 파악합니다.
  2. 주요 리소스를 제거하거나 이에 대한 다운로드를 연기하거나 비동기로 표시하는 등의 방법으로 주요 리소스 수를 최소화합니다.
  3. 주요 바이트 수를 최적화하여 다운로드 시간(왕복 수)을 단축합니다.
  4. 나머지 주요 리소스가 로드되는 순서를 최적화합니다. 주요 경로 길이를 단축하려면 가능한 한 빨리 모든 주요 자산을 다운로드합니다.