리소스 로드 최적화에 관한 마지막 모듈에서는 CSS, 자바스크립트와 같은 다양한 페이지 리소스가 페이지 로드 속도에 미치는 영향과 페이지 렌더링 속도를 높이기 위해 페이지 리소스 및 리소스 전달을 최적화하는 방법을 알아보았습니다. 이 시점에서 리소스 로드의 고급 측면을 살펴볼 수 있으며, 브라우저에서 리소스 힌트를 사용하여 리소스를 더 빠르게 로드할 수 있습니다.
리소스 힌트를 사용하면 개발자가 리소스를 로드하고 우선순위를 지정하는 방법을 브라우저에 알려 페이지 로드 시간을 더욱 최적화할 수 있습니다. 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를 사용합니다.
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를 사용하는 경우 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보다 더 적합한 도구가 될 수 있습니다. 특히, 사용자가 팔로우할 가능성이 있는 다른 웹사이트로 이동하는 링크의 경우
이를 사용하면 좋은 리소스 힌트가 될 수 있습니다.
dnstradamus는 자바스크립트를 사용하여 자동으로 이 작업을 실행하는 도구 중 하나이며,
다른 웹사이트 링크가 사용자의 뷰포트로 스크롤될 때
Intersection Observer API를 사용하여 dns-prefetch 힌트를 현재 페이지의 HTML에 삽입합니다.
preload
preload 지시어는 페이지 렌더링에 필요한 리소스의 조기 요청을 시작하는 데 사용됩니다.
<link rel="preload" href="/lcp-image.jpg" as="image">
preload 지시어는 나중에 발견된 중요한 리소스로 제한해야 합니다.
가장 일반적인 사용 사례는 글꼴 파일, @import 선언을 통해 가져온 CSS 파일 또는 최대 콘텐츠 페인트 (LCP) 후보일 가능성이 높은 CSS background-image 리소스입니다. 이러한 경우 리소스가 외부 리소스에서 참조되므로 미리 로드 스캐너로 이러한 파일을 검색할 수 없습니다.
preconnect와 마찬가지로 preload 지시어에도 CORS 리소스(예: 글꼴)를 미리 로드하는 경우 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> 요소, 리소스 힌트와 관련된 일반적인 성능 고려사항에 관한 지식을 어느 정도 확신할 수 있을 것입니다. 그러나 페이지가 일반적으로 로드하는 다양한 리소스 유형과 관련된 추가 최적화가 있습니다. 다음으로, 이미지 성능은 다음 모듈에서 다룹니다. 성능은 사용자 기기에 관계없이 웹사이트의 이미지를 최대한 빠르게 로드하는 데 도움이 됩니다.