Ilya Grigorik
게시일: 2014년 3월 31일
최초 렌더링 시간을 최대한 단축하려면 다음 세 가지 변수를 최소화합니다.
- 중요한 리소스의 수입니다.
- 주요 경로 길이입니다.
- 중요한 바이트 수입니다.
주요 리소스는 페이지의 초기 렌더링을 차단할 수 있는 리소스입니다. 이러한 리소스가 적을수록 브라우저, CPU 및 기타 리소스의 작업이 줄어듭니다.
마찬가지로, 주요 경로 길이는 주요 리소스와 해당 바이트 크기 간의 종속성 그래프를 나타내는 기능입니다. 일부 리소스 다운로드는 이전 리소스가 처리된 후에만 시작될 수 있으며, 리소스가 클수록 다운로드하는 데 걸리는 왕복 수가 더 많아집니다.
마지막으로, 브라우저에서 다운로드해야 하는 주요 바이트 수가 적을수록 신속하게 콘텐츠를 처리하여 화면에 렌더링할 수 있습니다. 바이트 수를 줄이기 위해 리소스 수를 줄일 수 있습니다(리소스를 삭제하거나 중요하지 않은 것으로 만들기). 그런 다음 각 리소스를 압축하고 최적화하여 전송 크기를 최소화합니다.
주요 렌더링 경로를 최적화하기 위한 일반적인 단계는 다음과 같습니다.
- 주요 경로(리소스 수, 바이트, 길이)를 분석하고 특성화합니다.
- 중요한 리소스 개수 최소화: 리소스 제거, 다운로드 지연, 비동기로 표시 등.
- 주요 바이트 수를 최적화하여 다운로드 시간 (왕복 횟수)을 단축합니다.
- 나머지 중요 리소스가 로드되는 순서를 최적화합니다. 모든 중요 애셋을 가능한 한 빨리 다운로드하여 중요 경로 길이를 단축합니다.