<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>rel=preload 예제 소스</title>
        <!-- 웹폰트 파일을 사전 로드하여 페이지 로딩 성능을 최적화 -->
        <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
        <!-- 웹폰트 스타일이 포함된 스타일시트 연결 -->
        <link rel="stylesheet" href="webfont.css">
    </head>
    <body>
        <!-- 미리 로드된 웹폰트를 텍스트에 바로 적용 -->
        <h1>rel=preload 예제 소스</h1>
        <!-- 추가 콘텐츠 -->
    </body>
</html>
<link rel="preload" href="리소스 경로" as="리소스 타입" [추가 속성]>
<!-- as="font" -->
<link 
    rel="preload"
    href="font.woff2"
    as="font">

<!-- as="image" -->
<link 
    rel="preload"
    href="sample-image.png"
    as="image">

<!-- as="style" -->
<link 
    rel="preload"
    href="sample-style.css"
    as="style">

<!-- as="script" -->
<link 
    rel="preload"
    href="sample-script.js"
    as="script">

<!-- as="fetch" -->
<link 
    rel="preload"
    href="sample-fetch.json"
    as="fetch">
<link
    rel="preload"
    href="font.woff2"
    as="font"
    type="font/woff2"
    crossorigin="anonymous">
<link
    rel="preload"
    as="image"
    href="mobile.png"
    media="(max-width: 600px)">
<link
    rel="preload"
    as="image"
    href="desktop.png"
    media="(min-width: 601px)">