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> 요소의 컨텍스트에서 사용되어 브라우저에 로드 중인 미리 로드 요청의 대상에 관한 추가 컨텍스트를 제공합니다. 이 추가 정보를 통해 브라우저는 적절한 요청 헤더, 요청 우선순위를 설정하고 올바른 리소스 컨텍스트에 있을 수 있는 관련 콘텐츠 보안 정책 지시어를 적용할 수 있습니다.

자세히 알아보기

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

<link rel="preload">는 심각한 버그 및 단점이 있고 Chrome 이외의 브라우저에서는 구현된 적이 없는 <link rel="subresource">를 대체합니다. 따라서 Chrome 50에서는 <link rel="subresource">에 대한 지원을 중단합니다.