<link rel="prefetch" href="/app/module.css">
<head>
    ...
    <link rel="prefetch" href="/app/module.js">
    <link rel="prefetch" href="/app/module.css">
    ...
</head>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>잘못된 사용 예시</title>
        <link rel="prefetch" href="image.jpg">
    </head>
    <body>
        <img src="image.jpg" alt="현재 웹 페이지에서 로드되는 이미지">
    </body>
</html>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>올바르게 사용 예시</title>
        <link rel="prefetch" href="next-page.html">
    </head>
    <body>
        <a href="next-page.html">다음 페이지로 이동하기</a>
    </body>
</html>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>잘못된 사용 예시</title>
        <link rel="prefetch" href="https://other-domain.com/">
    </head>
    <body>
        <a href="https://other-domain.com/">
            다른 도메인의 웹사이트로 이동하기
        </a>
    </body>
</html>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>올바르게 사용 예시</title>
        <link rel="prefetch" href="next-page.html">
        <!-- 중복된 프리케치 요청 -->
        <link rel="prefetch" href="next-page.html">
    </head>
    <body>
        <a href="next-page.html">다음 페이지로 이동하기</a>
    </body>
</html>
<link rel="prefetch" href="page.html">
<link rel="prefetch" href="page.html">
<link rel="prefetch" href="page.css">
<link rel="prefetch" href="page.js">
<link rel="prefetch" href="page-image.jpg">
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>다음 페이지 미리 로딩</title>
        <link rel="prefetch" href="next-page.html">
    </head>
    <body>
        <h1>현재 페이지</h1>
        <a href="next-page.html">다음 페이지로 이동하기</a>
    </body>
</html>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>비동기 컴포넌트 로딩 최적화</title>
        <!-- 비동기적으로 로드되는 컴포넌트 프리페치 -->
        <link rel="prefetch" href="async-component.js">
    </head>
    <body>
        <h1>현재 페이지</h1>
        <p>
            비동기 컴포넌트를 로드하려면
            <button id="load-component">여기</button>를
            클릭하세요.
        </p>
        <script>
            const btn = document.getElementById("load-component");

            btn.addEventListener("click", () => {
                // 비동기적으로 컴포넌트 로드
                import("async-component.js").then(module => {
                    // 로드된 컴포넌트를 사용
                });
            });
        </script>
    </body>
</html>

마지막 업데이트 정보: 2024-05-08

<link rel="prefetch">의 브라우저 호환성
데스크탑
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<link rel="prefetch"> 8 12 2 지원하지 않음

마지막 업데이트 정보: 2024-05-08

<link rel="prefetch">의 브라우저 호환성
모바일
속성
모바일 Chrome
Chrome
모바일 Firefox
Firefox
Safari
Safari
<link rel="prefetch"> 18 4 지원하지 않음