link rel=#39;preload'로 리소스 우선순위 지정

Jeff Posnick

페이지의 onload 이벤트를 지연시키지 않고 페이지에 필요한 중요한 글꼴, 스크립트 또는 기타 리소스를 브라우저에 알리고 싶었던 적이 있으신가요? <link rel="preload">를 사용하면 웹 개발자가 몇 가지 주요 속성과 함께 익숙한 HTML 요소 문법을 통해 정확한 동작을 파악할 수 있으므로 이를 구현할 수 있습니다. 이는 Chrome 50 출시의 일환으로 제공되는 초안 표준입니다.

<link rel="preload">를 통해 로드된 리소스는 브라우저에 로컬로 저장되며 DOM, JavaScript 또는 CSS에서 참조될 때까지 사실상 비활성 상태가 됩니다. 예를 들어, 다음은 스크립트 파일이 미리 로드되었지만 DOM에서 <script> 태그를 통해 포함되는 경우 즉시 실행되지 않는 잠재적인 사용 사례입니다.

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

그럼, 여기서 무슨 일이 일어날까요? 이 예에서 사용된 href 속성은 연결된 리소스의 URL을 지정하는 데 사용되는 표준 속성이므로 웹 개발자에게 익숙할 것입니다.

그러나 as 속성은 처음 사용할 가능성이 높으며 <link> 요소의 컨텍스트에서 사용되어 미리 로드 요청의 대상에 관한 더 많은 컨텍스트를 브라우저에 제공합니다. 이 추가 정보를 통해 브라우저는 적절한 요청 헤더, 요청 우선순위를 설정하고 올바른 리소스 컨텍스트에 있을 수 있는 관련 콘텐츠 보안 정책 지시어를 적용할 수 있습니다.

자세히 알아보기

요아브 바이스가 <link rel="preload"> 사용에 관한 최종 가이드를 작성했습니다. 이 기능에 관심이 있고 자신의 페이지에서 이 도구를 사용하고 싶다면 이 문서를 읽고 이점과 광고 소재 사용 사례에 관해 자세히 알아보시기 바랍니다.

<link rel="preload">은 심각한 버그와 단점이 있으며 Chrome 이외의 브라우저에서는 구현된 적이 없는 <link rel="subresource">를 대체합니다. 따라서 Chrome 50에서는 <link rel="subresource">에 대한 지원이 삭제됩니다.