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가 다운로드, 파싱, 실행하는 데 200밀리초가 소요되면
app.js가 더 이상 각 요청에 병목 현상이 발생하지 않으므로 각 리소스의 잠재적 절감은 200밀리초입니다.
미리 로드를 요청하면 페이지 로드 속도가 빨라질 수 있습니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">styles.css 및
ui.js는 app.js가 다운로드된 후에만 요청됨
파싱 및 실행됩니다
여기서 문제는 브라우저가
app.js를 다운로드, 파싱, 실행한 후 마지막 리소스 2개 중 6개를 사용합니다.
하지만 이러한 리소스가 중요하고
다운로드하시기 바랍니다.
미리 로드 링크 선언
HTML에 미리 로드 링크를 선언하여 브라우저가 주요 리소스를 다운로드하도록 지시합니다. 가능한 한 빨리.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
</ph>
<ph type="x-smartling-placeholder">styles.css 및
ui.js는 app.js와 동시에 요청됩니다.
중요 애셋을 미리 로드하여 로드 속도 개선하기도 참고하세요. 를 참조하세요.
브라우저 호환성
2020년 6월부터 Chromium 기반 브라우저에서 미리 로드가 지원됩니다. 자세한 내용은 브라우저 호환성 확인하세요.
미리 로드를 위한 빌드 도구 지원
Tooling.Report의 미리 로드 애셋을 참고하세요. 있습니다.
스택별 안내
Angular
경로를 미리 로드하여 탐색 속도를 높이세요.
Magento
테마의 레이아웃 수정하기
<link rel=preload> 태그를 추가합니다.