Skip to content
정보 블로그 배우기 탐구하다 패턴 Case studies
이 페이지에서
  • 사전 로딩 작동 방식
  • 사용 사례
    • CSS에 지정된 리소스 사전 로딩
    • CSS 파일 사전 로딩
    • JavaScript 파일 사전 로딩
  • rel=preload 구현 방법
    • 웹팩을 사용하여 JavaScript 모듈 사전 로딩
  • 결론

중요한 자산을 미리 로드하여 로딩 속도 향상

Nov 5, 2018 — 업데이트됨 May 27, 2020
Available in: English, Español, Português, Русский, 中文 및 日本語
Appears in: 빠른 로드 시간
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
Milica Mihajlija
Milica Mihajlija
TwitterGitHubHomepage
이 페이지에서
  • 사전 로딩 작동 방식
  • 사용 사례
    • CSS에 지정된 리소스 사전 로딩
    • CSS 파일 사전 로딩
    • JavaScript 파일 사전 로딩
  • rel=preload 구현 방법
    • 웹팩을 사용하여 JavaScript 모듈 사전 로딩
  • 결론

웹 페이지를 열면 브라우저가 서버에서 HTML 문서를 요청하고 해당 내용을 구문 분석하며 참조된 리소스에 대한 별도의 요청을 제출합니다. 개발자는 페이지에 필요한 모든 리소스와 그 중 가장 중요한 리소스를 이미 알고 있습니다. 이러한 지식을 활용하여 중요한 리소스를 미리 요청하고 로딩 프로세스의 속도를 높일 수 있습니다. 이 게시물에서는 <link rel="preload">를 사용하여 로딩 프로세서의 속도를 높이는 방법에 대해 설명합니다.

사전 로딩 작동 방식 #

사전 로딩은 일반적으로 브라우저가 늦게 발견한 리소스에 가장 적합합니다.

Chrome DevTools Network 패널에 대한 스크린샷.
이 예제에서, Pacifico 글꼴은 @font-face 규칙을 사용하여 스타일시트에 지정됩니다. 브라우저는 스타일시트 다운로드 및 구문 분석을 완료한 이후에만 글꼴 파일을 로드합니다.

특정 리소스를 미리 로드하면 현재 페이지에 중요하다고 확신하기 때문에 브라우저가 검색할 때보다 더 빨리 가져오고 싶다고 브라우저에 알립니다.

사전 로딩 적용 후 Chrome DevTools Network 패널에 대한 스크린샷.
이 예제에서는 Pacifico 글꼴이 미리 로드되어 있으므로 스타일시트를 사용하는 동시에 다운로드됩니다.

중요한 요청 체인은 브라우저에서 우선순위를 지정하고 가져오는 리소스의 순서를 나타냅니다. Lighthouse는 이 체인의 세 번째 수준에 있는 자산을 늦게 발견한 자산으로 식별합니다. 사전 로드 키 요청 감사를 사용하여 사전 로드할 리소스를 식별할 수 있습니다.

Lighthouse의 사전 로드 키 요청 감사.

HTML 문서의 헤드에 rel="preload"가 있는 <link> 태그를 추가하여 리소스를 미리 로드할 수 있습니다.

<link rel="preload" as="script" href="critical.js">

브라우저는 미리 로드된 리소스를 캐시하므로 필요 시 즉시 사용할 수 있습니다. (스크립트를 실행하거나 스타일시트를 적용하지 않습니다.)

사전 로딩을 구현한 후 Shopify, Financial Times 및 Treebo를 포함한 많은 사이트에서 Interactive 시간 및 First Contentful Paint와 같은 사용자 중심 매트릭이 1초 개선되었습니다.

리소스 힌트(예: preconnect 및 prefetch)는 브라우저가 적합하다고 판단하는 대로 실행됩니다. 반면에 preload는 브라우저에 필수입니다. 최신 브라우저는 이미 리소스의 우선순위를 정하는 데 능숙합니다. preload 드물게 사용하고 가장 중요한 리소스만 미리 로드하는 것이 중요하기 때문입니다.

사용되지 않은 프리로드는 load 이벤트 후 약 3초 후에 Chrome에서 콘솔 경고를 트리거합니다.

사용되지 않은 리소스에 대한 Chrome DevTools Console 경고.
preload는 모든 최신 브라우저에서 지원됩니다.

사용 사례 #

주의

작성 시점에서 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 등입니다.

브라우저가 다양한 유형의 리소스에 우선순위를 지정하는 방법에 대해 자세히 알아보려면 Chrome 리소스 우선순위 및 일정 문서를 살펴보세요.

주의

as 속성을 생략하거나 유효하지 않은 값을 갖는 것은 XHR 요청과 같습니다. 여기서 브라우저는 무엇을 가져오는지 알지 못하므로 올바른 우선순위를 판단할 수 없습니다. 또한 스크립트와 같은 일부 리소스를 두 번 가져올 수도 있습니다.

글꼴과 같은 일부 리소스 유형은 익명 모드로 로드됩니다. preload가 있는 crossorigin을 설정해야 합니다.

<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>

주의

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를 조금만 사용하고 실제 환경에 미치는 영향을 측정하십시오.

성능
마지막 업데이트: May 27, 2020 — 기사 개선하기
Codelabs

See it in action

Learn more and put this guide into action.

  • Codelab: Preload critical assets to improve loading speed
  • Preload web fonts to improve loading speed
Return to all articles
공유
구독

Contribute

  • 버그 신고
  • 소스 보기

관련된 콘텐츠

  • developer.chrome.com
  • Chrome 업데이트
  • 사례 연구
  • 팟캐스트
  • 쇼

연결

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 전체 제품
  • 약관 및 개인정보 보호
  • 커뮤니티 가이드라인

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.