<link rel="prefetch">

<link> 태그의 rel="prefetch"는
브라우저에게 href 속성으로 지정한 리소스를 미리 로딩하여 캐시에 저장하도록 설정합니다.
현재 웹 페이지에서 사용자가 다음으로 이동할 가능성이 높은 페이지 또는 페이지 로딩 후에 로드되는 리소스(예: 스크립트, 이미지, CSS 파일)를 미리 로딩하여 캐시에 저장할 때 사용합니다.

HTML <link> 태그
HTML 
<link rel="prefetch" href="/app/module.css">

이렇게 하면, 앞으로 사용될 것으로 예상하는 리소스를 미리 캐시로 저장했기 때문에,
웹 페이지가 로드된 후 나중에 리소스를 사용할 때 별도의 로딩을 할 필요가 없어서 로딩 시간을 절약할 수 있습니다.

일부 브라우저에서 호환되지 않을 수 있습니다.
브라우저 호환성을 참조하세요!

사용법 참고 사항

프리페치(prefech)

'프리페치(prefech)'라는 용어를 이해하면 <link rel="prefetch">를 더 쉽게 이해할 수 있고, 어떻게 사용해야 하는지도 더 쉽게 파악할 수 있습니다.

'프리페치(prefech)'란
필요로 하는 데이터(혹은 리소스)를 빨리 실행하기 위해서 필요하기 전에 미리 캐시로 보관하고 있다가 필요할 때 캐시에 저장된 것을 로드 없이 즉시 사용하는 것입니다.
이는 데이터나 리소스의 실행을 빠르게 만들어줄 수 있습니다.

<link rel="prefetch">는 이러한 프리페치를 HTML에서 활용하는 것입니다.

구현 방법

<link> 태그의 rel="prefetch"를 구현하는 가장 간단한 방법은 <link> 태그를 문서의 <head> 태그에 추가하는 것입니다.

리소스의 경로를 href 속성의 값으로 지정합니다.

HTML 
<head>
    ...
    <link rel="prefetch" href="/app/module.js">
    <link rel="prefetch" href="/app/module.css">
    ...
</head>

문서에는 <link> 태그의 rel="prefetch"를 여러 개 사용할 수 있습니다.

주의할 점

<link> 태그의 rel="prefetch"를 사용할 때에는 몇 가지 주의해야 할 점이 있습니다.

반드시 나중에 사용될 리소스에만 적용해야

<link rel="prefetch">는 현재 웹 페이지가 로딩될 때 함께 로딩되는 리소스에 적용할 경우에는
해당 리소스의 로딩 속도를 직접적으로 향상시키지 않습니다.

대신, <link rel="prefetch">는 사용자가 이후에 방문할 가능성이 높은 페이지 또는 페이지 로딩 후에 필요한 리소스를 미리 가져와서 브라우저의 캐시에 저장하는 역할을 합니다. 이는 사용자가 이후에 해당 리소스가 필요할 때 이미 로컬 캐시에 저장되어 있기 때문에 페이지 로딩 속도를 더 빠르게 만들 수 있는 잠재적인 요소가 될 수 있습니다.

다음은 <link rel="prefetch">를 잘못 사용한 예시입니다.

HTML - 잘못 사용한 예시 현재 웹 페이지가 로딩될 때 함께 로딩되는 리소스에 적용 
<!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>

위 예시를 보면, 현재 웹 페이지에서 로드되는 이미지에 <link rel="prefetch">를 적용했습니다. <link rel="prefetch">는 사용자가 이후에 방문할 가능성이 높은 페이지 또는 페이지 로딩 후에 필요한 리소스를 미리 로딩하는 데 사용해야 합니다. 현재 웹 페이지에서 로드되는 이미지는 이미 사용자에게 표시될 예정인 리소스이므로 <link rel="prefetch">를 사용하여 미리 로딩해도 페이지 로딩 속도 향상에 효과가 없습니다.

다음은 <link rel="prefetch">를 올바르게 사용한 예시입니다.

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>

이 예시는 올바르게 사용된 예시입니다. <link rel="prefetch">를 사용하여 next-page.htm과 같이 사용자가 이후에 방문할 가능성이 높은 페이지를 프리페치하고 있습니다. 그리고 이 페이지로 이동할 링크도 제공하고 있습니다.

이렇게 하면 사용자가 "다음 페이지로 이동하기" 링크를 클릭할 때 해당 페이지가 이미 로컬 캐시에 있기 때문에 페이지 로딩 속도가 향상될 수 있습니다.

현재 페이지에서 직접적으로 참조되는 리소스에만 적용해야

<link rel="prefetch">는 현재 웹 페이지와 동일한 도메인의 리소스만 미리 로딩할 수 있습니다.
즉, 다른 도메인의 리소스는 미리 로딩할 수 없습니다.

예를 들어, 웹 페이지의 주소가 https://example.com/page-1.html라고 가정하겠습니다.

해당 페이지 내에서 참조되는 https://example.com/styles.css 와 같은 리소스만 <link rel="prefetch">으로 미리 로딩할 수 있습니다. 하지만, https://other-domain.com/image.png 와 같은 다른 도메인의 이미지는 미리 로딩할 수 없습니다.

다음은 <link rel="prefetch">를 잘못 사용한 예시입니다.

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>

이 예시는 <link rel="prefetch">를 사용하여 외부 도메인인 https://other-domain.com/을 프리페치하고 있지만, 이 페이지는 현재 웹 페이지와는 관련이 없는 외부 페이지이기 때문에 프리페치를 사용하는 것은 부적절합니다.

rel="prefetch"는 <link> 태그에서만 사용해야

rel="prefetch"는 <link> 태그에서만 사용할 수 있습니다.
<a>, <img> 등 <link> 태그를 제외한 다른 태그에서는 사용해도 아무런 작동도 하지 않습니다.

동일한 리소스에 대한 여러 <link rel="prefetch"> 사용 금지

동일한 리소스에 대한 여러 <link rel="prefetch">를 사용하는 것은 효율적이지 않으며, 브라우저에 부담을 줄 수 있습니다. 여러 프리페치 요청이 동시에 발생할 경우 불필요한 네트워크 트래픽을 초래할 수 있고, 브라우저의 캐시 메모리를 비효율적으로 사용할 수 있습니다.

이미 캐시에 저장된 리소스에 대해서는 <link rel="prefetch">를 사용하지 않아도 됩니다.

HTML - 잘못 사용한 예시 동일한 리소스에 대한 여러 <link rel="prefetch"> 사용 금지 
<!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">는 자바스크립트의 onload 이벤트에 영향을 주지 않음

자바스크립트의 onload 이벤트는 모든 페이지 리소스가 로드되고 DOM 트리가 완전히 구축된 후에 발생하는 이벤트입니다. onload 이벤트는 DOM 트리가 완전히 구축되고 모든 리소스가 로드된 후에 발생하도록 설계되었습니다.

<link rel="prefetch">로 미리 로딩된 리소스는 DOM 트리 구축이나 다른 리소스 로딩에 영향을 미치지 않으므로 onload 이벤트 발생에는 영향을 미치지 않습니다.

따라서, onload 이벤트를 사용하여 페이지 로딩이 완료되었는지 확인하려는 경우<link rel="prefetch"> 기능으로 미리 로딩된 리소스를 고려할 필요는 없습니다.

<link rel="prefetch">는 재귀적으로 동작하지 않음

<link rel="prefetch">는 특정 리소스를 미리 로딩하도록 브라우저에 지시하는 데 사용됩니다.
하지만, 해당 리소스에 포함된 다른 리소스를 자동으로 미리 로딩하도록 하지 않습니다.

예를 들어 살펴보겠습니다.

HTML 
<link rel="prefetch" href="page.html">

위 예에서 page.html 페이지 자체(HTML 리스소)는 미리 로딩되지만, page.html 페이지에 포함된 CSS 파일, 이미지 파일, 자바스크립트 파일 등의 다른 리소스은 자동으로 미리 로딩되지 않습니다.

만약 page.html 페이지에 포함된 리소스도 미리 로딩하고 싶다면, 각 리소스에 대해 별도의 <link rel="prefetch">를 사용해야 합니다.

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">

이렇게 하면 page.html 페이지와 해당 페이지에 포함된 CSS 파일, 자바스크립트 파일, 이미지 파일을 모두 미리 로딩할 수 있습니다.

활용 예제

<link rel="prefetch">는 웹사이트 로딩 속도를 향상시키는 데 효과적인 기능이지만, 모든 상황에 적합한 것은 아닙니다. <link rel="prefetch">가 주로 많이 활용되는 곳은 다음과 같습니다.

다음 페이지 미리 로딩

사용자가 이전 페이지를 방문하는 동안 다음 페이지의 필요한 리소스를 미리 로딩하여 페이지 이동 시간을 최소화할 수 있습니다.

HTML 
<!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>

비동기 컴포넌트 로딩 최적화

웹 애플리케이션에서 비동기적으로 로드되는 컴포넌트를 프리페치하여 사용자가 해당 기능을 요청할 때 로딩 지연을 최소화할 수 있습니다.

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 지원하지 않음

명세서

<link rel="prefetch">의 명세서 사양
명세서 사양
<link rel="prefetch"> HTML Standard
#link-type-prefetch

참고문헌

같이 보기