중요한 자산을 미리 로드하여 로딩 속도 향상
웹 페이지를 열면 브라우저가 서버에서 HTML 문서를 요청하고 해당 내용을 구문 분석하며 참조된 리소스에 대한 별도의 요청을 제출합니다. 개발자는 페이지에 필요한 모든 리소스와 그 중 가장 중요한 리소스를 이미 알고 있습니다. 이러한 지식을 활용하여 중요한 리소스를 미리 요청하고 로딩 프로세스의 속도를 높일 수 있습니다. 이 게시물에서는 <link rel="preload">를 사용하여 로딩 프로세서의 속도를 높이는 방법에 대해 설명합니다.
사전 로딩 작동 방식 #
사전 로딩은 일반적으로 브라우저가 늦게 발견한 리소스에 가장 적합합니다.
@font-face 규칙을 사용하여 스타일시트에 지정됩니다. 브라우저는 스타일시트 다운로드 및 구문 분석을 완료한 이후에만 글꼴 파일을 로드합니다.
특정 리소스를 미리 로드하면 현재 페이지에 중요하다고 확신하기 때문에 브라우저가 검색할 때보다 더 빨리 가져오고 싶다고 브라우저에 알립니다.
중요한 요청 체인은 브라우저에서 우선순위를 지정하고 가져오는 리소스의 순서를 나타냅니다. Lighthouse는 이 체인의 세 번째 수준에 있는 자산을 늦게 발견한 자산으로 식별합니다. 사전 로드 키 요청 감사를 사용하여 사전 로드할 리소스를 식별할 수 있습니다.
HTML 문서의 헤드에 rel="preload"가 있는 <link> 태그를 추가하여 리소스를 미리 로드할 수 있습니다.
<link rel="preload" as="script" href="critical.js">브라우저는 미리 로드된 리소스를 캐시하므로 필요 시 즉시 사용할 수 있습니다. (스크립트를 실행하거나 스타일시트를 적용하지 않습니다.)
리소스 힌트(예: preconnect 및 prefetch)는 브라우저가 적합하다고 판단하는 대로 실행됩니다. 반면에 preload는 브라우저에 필수입니다. 최신 브라우저는 이미 리소스의 우선순위를 정하는 데 능숙합니다. preload 드물게 사용하고 가장 중요한 리소스만 미리 로드하는 것이 중요하기 때문입니다.
사용되지 않은 프리로드는 load 이벤트 후 약 3초 후에 Chrome에서 콘솔 경고를 트리거합니다.
사용 사례 #
CSS에 지정된 리소스 사전 로딩 #
@font-face 규칙으로 지정된 글꼴 또는 CSS 파일에 지정된 배경 이미지는 브라우저가 해당 CSS 파일을 다운로드하고 구문 분석할 때까지 검색되지 않습니다. 이러한 리소스를 미리 로드하면 CSS 파일이 다운로드되기 전에 가져올 수 있습니다.
CSS 파일 사전 로딩 #
중요한 CSS 접근 방식을 사용하고 있는 경우 CSS를 두 부분으로 나눕니다. 위의 내용을 렌더링하는 데 필요한 중요한 CSS는 문서의 <head>에 표시되며 중요하지 않은 CSS는 일반적으로 JavaScript에서 지연 로딩됩니다. 중요하지 않은 CSS를 로드하기 전에 JavaScript가 실행될 때까지 기다리면 사용자가 스크롤할 때 렌더링 지연이 발생합니다. 따라서 다운로드를 더 일찍 시작하려면 <link rel="preload">를 사용하는 것이 좋습니다.
JavaScript 파일 사전 로딩 #
브라우저는 사전 로드된 파일을 실행하지 않으므로 사전 로딩은 실행에서 가져오기를 분리하는 데 유용합니다. 이를 통해 Interactive 시간 같은 매트릭을 개선할 수 있습니다. JavaScript 번들을 분할하고 중요한 청크만 미리 로드할 경우 사전 로딩이 가장 적합합니다.
rel=preload 구현 방법 #
preload를 구현하는 가장 간단한 방법은 문서의 <head>에 <link> 태그를 추가하는 것입니다.
<head>
<link rel="preload" as="script" href="critical.js">
</head>as 속성을 제공하면 브라우저가 유형에 따라 미리 가져온 리소스의 우선순위를 설정하고, 올바른 헤더를 설정하며, 리소스가 이미 캐시에 있는지 여부를 판단하는 데 도움이 됩니다. 이 속성에 허용되는 값은 script, style, font, image 등입니다.
글꼴과 같은 일부 리소스 유형은 익명 모드로 로드됩니다. preload가 있는 crossorigin을 설정해야 합니다.
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin><link> 요소는 또한 type 속성을 수락하는 데 여기에는 링크 연결된 리소스의 MIME 유형이 포함됩니다. 브라우저는 type 속성을 사용하여 파일 유형이 지원되는 경우에만 리소스를 미리 로드합니다. 브라우저가 지정된 리소스 유형을 지원하지 않을 경우 이는 <link rel="preload">를 무시합니다.
Link HTTP 헤더를 통해 모든 유형의 리소스를 미리 로드할 수도 있습니다.
Link: </css/style.css>; rel="preload"; as="style"
HTTP 헤더에서 preload를 지정함으로써 누릴 수 있는 이점은 브라우저가 문서를 찾기 위해 문서를 구문 분석할 필요가 없다는 데 있습니다. 이는 일부 경우에서 약간의 개선 효과를 제공할 수 있습니다.
웹팩을 사용하여 JavaScript 모듈 사전 로딩 #
애플리케이션의 빌드 파일을 생성하는 모듈 번들러를 사용하는 경우 사전 로드 태그 삽입 기능을 지원하는지 확인해야 합니다. webpack 버전 4.6.0 이상에서는 사전 로딩 기능이 import() 내의 magic comments를 사용하여 지원됩니다.
import(_/* webpackPreload: true */_ "CriticalChunk")이전 버전의 웹팩을 사용하는 경우 preload-webpack-plugin과 같은 타사 플러그인을 사용하세요.
결론 #
페이지 속도를 개선하려면 브라우저가 늦게 발견한 중요한 리소스를 미리 로드하십시오. 모든 것을 미리 로드하는 것은 생산성이 떨어질 수 있으므로 preload를 조금만 사용하고 실제 환경에 미치는 영향을 측정하십시오.