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