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

제프 포스닉
제프 포스닉

페이지의 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">에 대한 지원이 삭제됩니다.