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