브라우저에 전송되는 모든 리소스는 똑같이 중요한 것은 아닙니다. 브라우저는 가장 중요한 리소스(스크립트나 이미지보다 CSS우선)를 우선 로드하기 위해 가장 중요하다 생각되는 리소스를 추측하여 먼저 로드합니다. 하지만 이런 방법이 항상 정답이 아닐 수 있기 때문에, preload , preconnect, prefetch 를 이용해서 브라우저에게 리소스의 우선순위를 전달 해 줄 수 있습니다.
현재 페이지에서 빠르게 가져와야 하는 리소스에 사용되는 속성입니다.
*<link rel="preload" as="..."> 는 브라우저에게 현재 리소스가 필요하며, 가능한 빨리 가져오기를 시도해야 한다고 알립니다.*
<link rel="preload" as="script" href="super-important.js">
<link rel="preload" as="style" href="critical.css">
위의 코드와 같이 사용하면 됩니다. as 속성을 사용하여 리소스의 유형을 알려줘야 합니다. 브라우저는 올바른 유형이 설정되어 있지 않으면 미리 가져온 리소스를 사용하지 않습니다.
*<link rel="preload" as="..."> 는 브라우저가 반드시 리소스를 가져오게 만듭니다. 리소스를 두 번 가져오게 하거나, 필요하지 않은 것을 가져오지 않도록 주의해햐 합니다.*
*<link rel="preload" as="..."> 를 이용하여 리소스를 가져왔지만, 현재 페이지에서 3초 내로 사용되지 않는 리소스는 위의 그림과 같은 경로가 출력됩니다.*
미래에 필요할 수 있는 리소스를 가져와야 할 때 사용되는 속성입니다. <link rel="preload"> 는 현재 페이지 로딩이 마치고 사용 가능한 대역폭(bandwidth)이 있을 때 (다운로드할 여유가 생겼을 때) 가장 낮은 우선순위로 리소스를 가져옵니다.
*prefetch 는 사용자가 다음에 할 행동을 미리 준비합니다. 예를 들어, 현재 페이지가 1페이지 라면,*
<link rel="prefetch" href="page-2.html">
위의 코드와 같이 사용하여 2페이지를 먼저 가져와 준비합니다. 주의할 점은 위의 코드와 같이 사용하였더라도 page-2.html 의 HTML 파일만 가져왔지 page-2.html 에 필요한 리소스는 가져오지 않았다는 것입니다.