Lighthouse 보고서의 기회 섹션에는 중요한 요청 체인의 세 번째 수준의 요청이 미리 로드 후보로 표시됩니다.
Lighthouse 플래그가 미리 로드 후보를 결정하는 방법
페이지의 주요 요청 체인이 다음과 같다고 가정해 보겠습니다.
index.html |--app.js |--styles.css |--ui.js
index.html 파일에서 <script src="app.js">를 선언합니다. app.js가 실행되면 styles.css 및 ui.js를 다운로드하기 위해 fetch()를 호출합니다. 마지막 2개의 리소스가 다운로드, 파싱, 실행될 때까지 페이지는 완성되지 않습니다.
위의 예를 사용하면 Lighthouse에서 styles.css 및 ui.js를 후보로 플래그합니다.
잠재적 절감 효과는 미리 로드 링크를 선언한 경우 브라우저가 요청을 얼마나 일찍 시작할 수 있는지에 따라 달라집니다.
예를 들어 app.js의 다운로드, 파싱, 실행에 200ms가 걸릴 경우 app.js가 더 이상 각 요청에 병목 현상을 일으키지 않으므로 각 리소스의 잠재적인 절감 효과는 200ms입니다.
미리 로드를 요청하면 페이지 로드 속도가 빨라질 수 있습니다.
app.js가 다운로드, 파싱, 실행된 후에만 styles.css 및 ui.js가 요청됩니다.
여기서 문제는 브라우저가 app.js를 다운로드, 파싱, 실행한 후에만 마지막 리소스 2개를 인식한다는 것입니다.
하지만 이러한 리소스는 중요하므로
최대한 빨리 다운로드해야 한다는 사실을 알고 계시는군요.
미리 로드 링크 선언
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의 애셋 미리 로드하기 페이지를 참조하세요.
스택별 안내
Angular
미리 경로를 미리 로드하여 탐색 속도를 높입니다.
Magento
테마의 레이아웃을 수정하고 <link rel=preload> 태그를 추가합니다.