리소스 로드 최적화에 관한 지난 모듈에서는 CSS 및 JavaScript와 같은 페이지 리소스는 페이지 로드 속도에 영향을 줄 수 있으며 광고 항목 및 광고 게재를 최적화하여 페이지 렌더링 속도를 높일 수 있습니다. 지금은 리소스의 고급 측면으로 전환하기에 좋은 시기입니다. 이를 통해 브라우저에서 리소스 힌트
리소스 힌트는 개발자가
브라우저에서 리소스를 로드하고 우선순위를 지정하는 방법을 알아봤습니다. 리소스의 초기 집합
preconnect 및 dns-prefetch와 같은 힌트가 가장 먼저 도입되었습니다.
하지만 시간이 지나면서 preload 및 Fetch Priority API가
추가적인 기능을 제공합니다
리소스 힌트는 브라우저가 특정 작업을 미리 수행하도록 지시합니다. 로드 성능을 개선할 수 있습니다 리소스 힌트는 미리 서버에 연결하고, 심지어는 DNS 조회를 수행하고, 브라우저가 일반적으로 리소스를 발견하기 전에 리소스를 가져오는 것입니다.
리소스 힌트는 HTML로 지정할 수 있으며 주로 <head> 초기에 지정할 수 있습니다.
요소로 설정되거나 HTTP 헤더로 설정됩니다. 이 모듈에서 다룰 내용은
preconnect, dns-prefetch, preload 및
예측 가져오기 동작을 prefetch 제공하는 것으로 간주합니다.
preconnect
preconnect 힌트는
중요한 리소스를 가져올 수 있습니다 예를 들어,
CDN 또는 기타 교차 출처의 이미지 또는 애셋:
<link rel="preconnect" href="https://example.com">
preconnect를 사용하면 브라우저가
아주 가까운 미래에 특정 교차 출처 서버를 사용하고 있고 브라우저가
가능한 한 빨리 해당 연결을 열어야 합니다. 가능한 한 빨리
그렇게 하려면 HTML 파서 또는 미리 로드 스캐너를 사용해야 합니다.
페이지에 교차 출처 리소스가 많은 경우 preconnect를 사용합니다.
현재 페이지에 가장 중요한 리소스에 대해
설정할 수 있습니다
<ph type="x-smartling-placeholder">preconnect에서
문제가 발생할 때보다 빨리 연결을 설정하여
교차 출처 리소스 발견입니다
preconnect의 일반적인 사용 사례는 Google Fonts입니다. Google Fonts 추천
서비스를 제공하는 https://fonts.googleapis.com 도메인에 preconnect하는
@font-face 선언과 https://fonts.gstatic.com 도메인에
글꼴 파일을 제공합니다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
crossorigin 속성은 리소스가
교차 출처 리소스 공유 (CORS)를 사용하여 가져옴
preconnect 힌트(원본에서 다운로드 중인 리소스가
글꼴 파일과 같은 CORS를 사용하는 경우 crossorigin 속성을
preconnect 힌트.
dns-prefetch
교차 출처 서버에 대한 연결을 조기에 열면
개선이 필요한 경우 초기 페이지 로드 시간이
한 번에 많은 교차 출처 서버에 대한 연결을 설정합니다. 우려되는 경우
preconnect를 과도하게 사용하고 있을 수 있으므로 비용이 훨씬 적게 드는 리소스 힌트는
dns-prefetch 힌트
이름에서 알 수 있듯이 dns-prefetch은 교차 출처에 대한 연결을 설정하지 않습니다.
대신 미리 DNS 조회를 수행합니다. DNS
조회는 도메인 이름이 기본 IP 주소로 확인될 때 발생합니다.
장치 및 네트워크 수준의 DNS 캐시 계층은 이를 좀 더 쉽게 만드는 데
일반적으로 빠른 프로세스이지만, 여전히 어느 정도 시간이 걸립니다.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
DNS 조회는 상당히 저렴하고 상대적으로 적은 비용 때문에
경우에 따라 preconnect보다 더 적절한 도구일 수도 있습니다. 포함
특히 이 URL은 사용자가 다른 URL을 허용하는 링크의 경우에
사용자가 팔로우할 가능성이 높은 다른 웹사이트로 이동
dnstradamus는 JavaScript를 사용하여 자동으로 작업을 수행하는 도구 중 하나입니다.
Intersection Observer API를 사용하여 dns-prefetch 힌트를
다른 웹사이트로 연결되는 링크를 사용자의 페이지로 스크롤할 때 현재 페이지의 HTML
표시 영역입니다.
preload
preload 지시문은 리소스의 조기 요청을 시작하는 데 사용됩니다.
다음과 같습니다.
<link rel="preload" href="/lcp-image.jpg" as="image">
preload 지시어는 늦게 발견된 중요 리소스로 제한되어야 합니다.
가장 일반적인 사용 사례는 글꼴 파일, @import를 통해 가져온 CSS 파일입니다.
선언 또는 CSS background-image 리소스가 최대로 커질 수 있음
콘텐츠 페인트 (LCP) 후보. 이러한 경우 이러한 파일은
사전 로드 스캐너에 의해 검색되며,
리소스를 배포합니다
preconnect와 마찬가지로 preload 지시어에는 crossorigin이 필요합니다.
속성을 사용할 수 있습니다. 광고 단위를
crossorigin 속성을 사용하거나 비 CORS 요청의 경우에는 이 속성을 추가하면
브라우저가 두 번 다운로드하므로
다른 리소스에 투자하는 것이
더 유리할 수 있습니다
<link rel="preload" href="/font.woff2" as="font" crossorigin>
앞의 HTML 스니펫에서는 브라우저에
CORS 요청을 사용하는 /font.woff2(/font.woff2가 동일한 도메인에 있더라도)
prefetch
<ph type="x-smartling-placeholder">
prefetch 지시어는
향후 탐색에 사용될 가능성이 높은 리소스:
<link rel="prefetch" href="/next-page.css" as="style">
이 지시어는 대체로 preload 지시어와 같은 형식을 따르지만
<link> 요소의 rel 속성이 대신 "prefetch" 값을 사용합니다.
그러나 preload 지시어와 달리 prefetch은
향후 탐색을 위해 리소스 가져오기를 시작하는 것이 아니라
발생하지 않을 수 있습니다
prefetch가 도움이 될 수 있는 때가 있습니다. 예를 들어
웹사이트에서 대부분의 사용자가 끝까지 따르는 사용자 흐름을 파악함
렌더링에 중요한 리소스를 위한 prefetch를 추가하는 것이
로드 시간을 줄일 수 있습니다
우선순위 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 이미지를 다운로드하도록 브라우저에 지시합니다.
덜 중요한 썸네일 이미지는
더 낮은 우선순위로 다운로드됩니다
최신 브라우저는 2단계로 리소스를 로드합니다. 첫 번째 단계는
모든 차단 스크립트가 다운로드되고
실행됩니다 이 단계에서는 우선순위가 낮은 리소스가
있습니다. fetchpriority="high"를 사용하면
첫 번째 단계에서 브라우저가 리소스를 다운로드할 수 있게 합니다.
리소스 힌트 데모
학습한 내용 테스트
preconnect 리소스 힌트는 어떤 역할을 하나요?
Fetch Priority API로 무엇을 할 수 있나요?
<link>의 상대적 우선순위를 지정합니다.
<img> 및 <script> 요소
prefetch 힌트는 언제 사용해야 하나요?
다음 콘텐츠: 이미지 성능
이제 아마도 자신의 지식에 대해 확신을 갖기 시작했을 것입니다.
일반적인 성능 고려사항 중 하나인 <head>는
리소스 힌트가 포함됩니다. 그러나
페이지가 일반적으로 로드하는 다양한 리소스 유형에 따라 다릅니다. 다음으로
이미지 성능에 대한 자세한 내용은 다음 모듈에서 다룹니다.
이미지 크기에 관계 없이 최대한 빨리 로드되는 웹사이트 이미지
전송합니다.