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