리소스 로드 최적화에 관한 마지막 모듈에서는 CSS 및 JavaScript와 같은 다양한 페이지 리소스가 페이지 로드 속도에 미치는 영향과 이러한 리소스 및 전송을 최적화하여 페이지 렌더링 속도를 높이는 방법을 알아봤습니다. 이제 리소스 로드의 고급 측면으로 이동할 때입니다. 여기에는 리소스 힌트를 사용하여 브라우저가 더 빠르게 로드하도록 지원하는 것이 포함됩니다.
리소스 힌트는 브라우저에 리소스를 로드하고 우선순위를 지정하는 방법을 알려 개발자가 페이지 로드 시간을 더욱 최적화할 수 있도록 지원합니다. preconnect
및 dns-prefetch
과 같은 초기 리소스 힌트가 처음 도입되었습니다.
하지만 시간이 지나면서 preload
와 가져오기 우선순위 API가 추가 기능을 제공하기 위해 도입되었습니다.
리소스 힌트는 로드 성능을 개선할 수 있는 특정 작업을 미리 실행하도록 브라우저에 지시합니다. 리소스 힌트는 조기 DNS 조회 실행, 서버에 미리 연결, 브라우저가 일반적으로 리소스를 검색하기 전에 리소스 가져오기 등의 작업을 실행할 수 있습니다.
리소스 힌트는 HTML(<head>
요소의 초반에 가장 자주 사용됨)에 지정하거나 HTTP 헤더로 설정할 수 있습니다. 이 모듈의 범위에는 preconnect
, dns-prefetch
, preload
와 prefetch
에서 제공하는 추측 가져오기 동작이 포함됩니다.
preconnect
preconnect
힌트는 중요한 리소스를 가져오는 위치에서 다른 출처에 연결하는 데 사용됩니다. 예를 들어 CDN 또는 기타 교차 출처에 이미지나 애셋을 호스팅할 수 있습니다.
<link rel="preconnect" href="https://example.com">
preconnect
를 사용하면 브라우저가 매우 가까운 미래에 특정 교차 출처 서버에 연결할 계획이며 브라우저가 HTML 파서나 사전 로드 스캐너가 연결을 열 때까지 기다리지 않고 가능한 한 빨리 연결을 열어야 한다고 예상할 수 있습니다.
페이지에 교차 출처 리소스가 많은 경우 현재 페이지에 가장 중요한 리소스에 preconnect
를 사용하세요.

preconnect
는 교차 출처 리소스가 발견될 때가 아닌 더 일찍 연결을 설정하여 이를 완화할 수 있습니다.
preconnect
의 일반적인 사용 사례는 Google Fonts입니다. Google Fonts에서는 @font-face
선언을 제공하는 https://fonts.googleapis.com
도메인과 글꼴 파일을 제공하는 https://fonts.gstatic.com
도메인에 preconnect
할 것을 권장합니다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
crossorigin
속성은 리소스를 교차 출처 리소스 공유 (CORS)를 사용하여 가져와야 하는지 여부를 나타내는 데 사용됩니다. preconnect
힌트를 사용하는 경우, 다운로드되는 리소스가 CORS를 사용하는 경우(예: 글꼴 파일) preconnect
힌트에 crossorigin
속성을 추가해야 합니다.
dns-prefetch
크로스 오리진 서버에 대한 연결을 미리 열면 초기 페이지 로드 시간을 크게 개선할 수 있지만 한 번에 여러 크로스 오리진 서버에 연결하는 것은 합리적이지 않거나 불가능할 수 있습니다. preconnect
를 과도하게 사용할까 우려된다면 비용이 훨씬 저렴한 리소스 힌트인 dns-prefetch
힌트를 사용하세요.
이름에서 알 수 있듯이 dns-prefetch
는 교차 출처 서버에 연결을 설정하지 않고 미리 DNS 조회만 실행합니다. 도메인 이름이 기본 IP 주소로 확인되면 DNS 조회가 발생합니다.
기기 및 네트워크 수준의 DNS 캐시 레이어를 통해 일반적으로 빠른 프로세스가 가능하지만, 여전히 시간이 걸립니다.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
DNS 조회는 비용이 비교적 저렴하며 비용이 상대적으로 적기 때문에 경우에 따라 preconnect
보다 더 적합한 도구일 수 있습니다. 특히 사용자가 따라갈 가능성이 높은 다른 웹사이트로 이동하는 링크의 경우에 사용하는 것이 바람직한 리소스 힌트일 수 있습니다. dnstradamus는 JavaScript를 사용하여 이를 자동으로 실행하고 Intersection Observer API를 사용하여 다른 웹사이트로 연결되는 링크가 사용자의 뷰포트로 스크롤될 때 현재 페이지의 HTML에 dns-prefetch
힌트를 삽입하는 도구입니다.
preload
preload
지시어는 페이지를 렌더링하는 데 필요한 리소스에 대한 초기 요청을 시작하는 데 사용됩니다.
<link rel="preload" href="/lcp-image.jpg" as="image">
preload
지시문은 늦게 발견된 중요한 리소스로 제한해야 합니다.
가장 일반적인 사용 사례는 글꼴 파일, @import
선언을 통해 가져온 CSS 파일 또는 콘텐츠가 포함된 최대 페인트 (LCP) 후보일 가능성이 높은 CSS background-image
리소스입니다. 이 경우 리소스가 외부 리소스에서 참조되므로 이러한 파일은 미리 로드 스캐너에서 검색되지 않습니다.
preconnect
와 마찬가지로 글꼴과 같은 CORS 리소스를 미리 로드하는 경우 preload
지시어에는 crossorigin
속성이 필요합니다. crossorigin
속성을 추가하지 않거나 CORS가 아닌 요청에 추가하면 브라우저에서 리소스를 두 번 다운로드하여 다른 리소스에 더 잘 사용할 수 있는 대역폭을 낭비합니다.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
위 HTML 스니펫에서 브라우저는 /font.woff2
가 동일한 도메인에 있더라도 CORS 요청을 사용하여 /font.woff2
를 미리 로드하도록 지시됩니다.
prefetch
prefetch
지시어는 향후 탐색에 사용될 가능성이 있는 리소스에 대한 낮은 우선순위 요청을 시작하는 데 사용됩니다.
<link rel="prefetch" href="/next-page.css" as="style">
이 지시어는 preload
지시어와 형식이 거의 동일하지만 <link>
요소의 rel
속성이 대신 "prefetch"
값을 사용합니다.
하지만 preload
지시어와 달리 prefetch
은 발생할 수도 있고 발생하지 않을 수도 있는 향후 탐색을 위한 리소스 가져오기를 시작한다는 점에서 추측에 기반합니다.
prefetch
가 유용한 경우가 있습니다. 예를 들어 대부분의 사용자가 완료하는 웹사이트의 사용자 흐름을 파악한 경우 이러한 향후 페이지의 렌더링에 중요한 리소스에 대한 prefetch
는 로드 시간을 줄이는 데 도움이 될 수 있습니다.
Fetch Priority API
fetchpriority
속성을 통해 Fetch Priority API
를 사용하여 리소스의 우선순위를 높일 수 있습니다. <link>
, <img>
, <script>
요소와 함께 속성을 사용할 수 있습니다.
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
기본적으로 이미지는 낮은 우선순위로 가져옵니다. 레이아웃 후 이미지가 초기 표시 영역 내에 있는 것으로 확인되면 우선순위가 높음 우선순위로 올라갑니다. 위 HTML 스니펫에서 fetchpriority
는 브라우저에 높음 우선순위로 더 큰 LCP 이미지를 다운로드하도록 즉시 지시하는 반면 중요도가 낮은 썸네일 이미지는 우선순위가 낮은 상태로 다운로드됩니다.
최신 브라우저는 두 단계로 리소스를 로드합니다. 첫 번째 단계는 중요한 리소스용으로 예약되어 있으며 차단 스크립트가 모두 다운로드되고 실행되면 종료됩니다. 이 단계에서는 낮음 우선순위 리소스의 다운로드가 지연될 수 있습니다. fetchpriority="high"
를 사용하면 리소스의 우선순위를 높여 브라우저가 첫 번째 단계에서 리소스를 다운로드할 수 있습니다.
리소스 힌트 데모
학습한 내용 테스트
preconnect
리소스 힌트는 어떤 역할을 하나요?
Fetch Priority API를 사용하면 어떤 작업을 할 수 있나요?
<link>
, <img>
, <script>
요소의 상대적 우선순위를 지정합니다.
prefetch
힌트는 언제 사용해야 하나요?
다음: 이미지 실적
이제 페이지 HTML, <head>
요소, 리소스 힌트와 관련된 일반적인 성능 고려사항에 대해 어느 정도 자신감이 생겼을 것입니다. 하지만 페이지에서 일반적으로 로드하는 다양한 리소스 유형에 특화된 추가 최적화가 있습니다. 다음으로 이미지 성능이 다음 모듈에서 다뤄집니다. 이를 통해 사용자의 기기에 관계없이 웹사이트의 이미지를 최대한 빠르게 로드할 수 있습니다.