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