Lighthouse 보고서의 기회 섹션에서는 중요한 요청 체인의 세 번째 수준 요청을 미리 로드 후보로 표시합니다.
Lighthouse 플래그가 사전 로드 후보를 결정하는 방법
페이지의 중요 요청 체인이 다음과 같다고 가정해 보겠습니다.
index.html |--app.js |--styles.css |--ui.js
index.html 파일이 <script src="app.js">을 선언합니다. app.js가 실행되면 styles.css 및 ui.js를 다운로드하기 위해 fetch()를 호출합니다. 마지막 두 리소스가 다운로드되고 파싱되고 실행될 때까지 페이지가 완전하게 표시되지 않습니다.
위의 예시를 사용하면 Lighthouse에서 styles.css 및 ui.js을 후보로 표시합니다.
절약할 수 있는 시간은 미리 로드 링크를 선언할 경우 브라우저가 요청을 얼마나 일찍 시작할 수 있는지에 따라 달라집니다.
예를 들어 app.js를 다운로드, 파싱, 실행하는 데 200ms가 걸리면 각 리소스의 잠재적 절약 시간은 200ms입니다. app.js가 더 이상 각 요청의 병목 현상이 아니기 때문입니다.
미리 로드를 요청하면 페이지 로드가 빨라질 수 있습니다.
styles.css 및 ui.js은 app.js이 다운로드되고 파싱되고 실행된 후에만 요청됩니다.
여기서 문제는 브라우저가 app.js를 다운로드하고 파싱하고 실행한 후에야 마지막 두 리소스를 인식한다는 것입니다.
하지만 이러한 리소스가 중요하며 최대한 빨리 다운로드해야 한다는 것을 알고 있습니다.
프리로드를 위한 링크 선언
HTML에서 미리 로드 연결을 선언하여 브라우저가 최대한 빨리 주요 리소스를 다운로드하게 하세요.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
styles.css 및 ui.js이 app.js과 동시에 요청됩니다.
자세한 내용은 중요한 애셋을 미리 로드하여 로드 속도 개선하기를 참고하세요.
브라우저 호환성
2020년 6월 현재 Chromium 기반 브라우저에서 미리 로드가 지원됩니다. 업데이트는 브라우저 호환성을 참고하세요.
미리 로드용 빌드 도구 지원
Tooling.Report's Preloading Assets 페이지를 참고하세요.
스택별 안내
Angular
미리 경로를 미리 로드하여 탐색 속도를 높입니다.
Magento
테마의 레이아웃을 수정하고 <link rel=preload> 태그를 추가합니다.