Lighthouse 보고서의 '기회' 섹션에는 중요 요청 체인에 있는 세 번째 수준의 요청이 사전 로드 후보로 표시됩니다.
Lighthouse 플래그가 사전 로드 후보를 결정하는 방법
페이지의 중요 요청 체인이 다음과 같다고 가정합니다.
index.html
|--app.js
|--styles.css
|--ui.jsindex.html 파일은 <script src="app.js">를 선언합니다. app.js가 실행되면 styles.css 및 ui.js를 다운로드하기 위해 fetch()가 호출됩니다. 마지막 2개의 리소스가 다운로드되어 구문 분석 및 실행될 때까지 페이지가 완료된 것으로 표시되지 않습니다. 위의 예를 사용했을 때 Lighthouse는 styles.css 및 ui.js를 후보로 플래그 지정합니다.
잠재적 절감 효과는 사전 로드 링크를 선언한 경우 브라우저가 요청을 얼마나 일찍 시작할 수 있는가에 달려 있습니다. 예를 들어, app.js를 다운로드하여 구문 분석하고 실행하는 데 200ms가 걸린다면 각 리소스에 대한 잠재적인 절감 효과는 200ms입니다. app.js는 더 이상 각 요청에 병목을 일으키지 않기 때문입니다.
요청을 사전 로드하면 페이지가 더 빨리 로드될 수 있습니다.
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> 태그를 추가하세요.
리소스
Updated on • Improve article