미리 가져오는 두 가지 방법: <link> 태그 및 HTTP 헤더

데미안 렌줄리
데미안 렌줄리
X GitHub 글리치

이 Codelab에서는 <link rel="prefetch"> 및 HTTP Link 헤더, 이렇게 두 가지 방법으로 미리 가져오기를 구현합니다.

샘플 앱은 이 매장에서 가장 잘 팔리는 티셔츠를 특별 할인으로 판매하는 프로모션 방문 페이지가 있는 웹사이트입니다. 방문 페이지가 단일 제품으로 연결되므로 많은 사용자가 제품 세부정보 페이지로 이동할 것으로 추정됩니다. 따라서 제품 페이지를 방문 페이지에서 미리 가져오기에 적합합니다.

성능 측정

먼저 기준 성능을 설정합니다.

  1. 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
  2. 사이트를 미리 보려면 View App을 누른 다음 Fullscreen 전체 화면을 누릅니다.
  3. `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.

  4. 네트워크 탭을 클릭합니다.

  5. 제한 드롭다운 목록에서 Fast 3G를 선택하여 저속 연결 유형을 시뮬레이션합니다.

  6. 제품 페이지를 로드하려면 샘플 앱에서 지금 구매를 클릭합니다.

product-details.html 페이지를 로드하는 데 약 600밀리초가 걸립니다.

product-details.html의 로드 시간을 보여주는 네트워크 패널

<link rel="prefetch">로 제품 페이지 미리 가져오기

탐색 기능을 개선하려면 방문 페이지에 prefetch 태그를 삽입하여 product-details.html 페이지를 미리 가져옵니다.

  • 다음 <link> 요소를 views/index.html 파일의 헤드에 추가합니다.
<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

as 속성은 선택사항이지만 권장됩니다. 이 속성은 브라우저가 올바른 헤더를 설정하고 리소스가 이미 캐시에 있는지 확인하는 데 도움이 됩니다. 이 속성 값의 예로는 document, script, style, font, image 외 기타가 있습니다.

미리 가져오기가 작동하는지 확인하려면 다음 단계를 따르세요.

  1. 사이트를 미리 보려면 View App을 누른 다음 Fullscreen 전체 화면을 누릅니다.
  2. `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.

  3. 네트워크 탭을 클릭합니다.

  4. 제한 드롭다운 목록에서 Fast 3G를 선택하여 저속 연결 유형을 시뮬레이션합니다.

  5. 캐시 사용 중지 확인란의 선택을 취소합니다.

  6. 앱을 새로고침합니다.

이제 방문 페이지가 로드되면 product-details.html 페이지도 로드되지만 우선순위가 가장 낮습니다.

product-details.html 미리 가져오기가 표시된 네트워크 패널

페이지가 HTTP 캐시에 5분 동안 보관되며, 그 후에는 문서에 대한 일반 Cache-Control 규칙이 적용됩니다. 이 경우 product-details.html에는 값이 public, max-age=0인 cache-control 헤더가 있습니다. 즉, 페이지가 총 5분 동안 유지됩니다.

성능 재평가

  1. 앱을 새로고침합니다.
  2. 제품 페이지를 로드하려면 샘플 앱에서 지금 구매를 클릭합니다.

네트워크 패널을 살펴봅니다. 초기 네트워크 트레이스와 비교하여 두 가지 차이점이 있습니다.

  • 크기 열에는 '캐시 미리 가져오기'가 표시됩니다. 즉, 이 리소스는 네트워크가 아닌 브라우저의 캐시에서 검색되었음을 의미합니다.
  • 시간 열에 문서가 로드되는 데 걸리는 시간이 현재 약 10ms로 표시됩니다.

이는 약 600ms가 소요된 이전 버전에 비해 약 98% 단축된 것입니다.

프리패치 캐시에서 가져온 product-details.html이 표시된 네트워크 패널

추가 크레딧: 점진적 개선으로 prefetch 사용

미리 가져오기는 빠른 연결을 통해 탐색하는 사용자를 위해 점진적인 개선 기능으로 구현되는 것이 가장 좋습니다. Network Information API를 사용하여 네트워크 상태를 확인하고 이를 기반으로 프리패치 태그를 동적으로 삽입할 수 있습니다. 이렇게 하면 데이터 소비를 최소화하고 느리거나 비싼 데이터 요금제를 사용하는 사용자의 비용을 절감할 수 있습니다.

적응형 미리 가져오기를 구현하려면 먼저 views/index.html에서 <link rel="prefetch"> 태그를 삭제합니다.

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

그런 다음 public/script.js에 다음 코드를 추가하여 사용자가 빠른 연결 상태일 때 prefetch 태그를 동적으로 삽입하는 함수를 선언합니다.

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

이 함수는 다음과 같이 작동합니다.

  • Network Information API의 effectiveType 속성을 확인하여 사용자가 4G (또는 그 이상) 연결을 사용 중인지 확인합니다.
  • 이 조건이 충족되면 힌트 유형으로 prefetch가 포함된 <link> 태그를 생성하고 href 속성에서 미리 가져올 URL을 전달하며 리소스가 as 속성의 HTML document임을 나타냅니다.
  • 마지막으로 스크립트를 페이지의 head에 동적으로 삽입합니다.

다음으로, 닫는 </body> 태그 바로 앞에 script.js를 views/index.html에 추가합니다.

<body>
      ...
      <script src="/script.js"></script>
</body>

페이지 끝에 script.js를 요청하면 페이지가 파싱 및 로드된 후 로드 및 실행됩니다.

미리 가져오기가 현재 페이지의 중요한 리소스를 방해하지 않도록 하려면 다음 코드 스니펫을 추가하여 window.load 이벤트에서 injectLinkPrefetchIn4g()를 호출합니다.

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

이제 방문 페이지에서 빠른 연결에서만 product-details.html를 미리 가져옵니다. 이를 확인하는 방법은 다음과 같습니다.

  1. 사이트를 미리 보려면 View App을 누른 다음 Fullscreen 전체 화면을 누릅니다.
  2. `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
  3. 네트워크 탭을 클릭합니다.
  4. 제한 드롭다운 목록에서 온라인을 선택합니다.
  5. 앱을 새로고침합니다.

Network 패널에 product-details.html가 표시됩니다.

product-details.html 미리 가져오기가 표시된 네트워크 패널

느린 연결에서 제품 페이지를 미리 가져오지 않는지 확인하려면 다음 단계를 따르세요.

  1. 제한 드롭다운 목록에서 느린 3G를 선택합니다.
  2. 앱을 새로고침합니다.

네트워크 패널에는 product-details.html가 없는 방문 페이지의 리소스만 포함되어야 합니다.

product-details.html이 미리 가져오기되지 않음을 보여주는 네트워크 패널

HTTP Link 헤더를 사용하여 제품 페이지의 스타일시트 미리 가져오기

HTTP Link 헤더를 사용하여 link 태그와 동일한 유형의 리소스를 미리 가져올 수 있습니다. 실적 차이는 크지 않지만 둘 중 하나를 사용할 시점은 대체로 광고주의 선호도에 따라 달라집니다. 이 경우 렌더링을 개선하기 위해 제품 페이지의 기본 CSS를 미리 가져오는 데 사용할 수 있습니다.

방문 페이지의 서버 응답에 style-product.css의 HTTP Link 헤더를 추가합니다.

  1. server.js 파일을 열고 루트 URL /의 get() 핸들러를 찾습니다.
  2. 핸들러 시작 부분에 다음 줄을 추가합니다.
app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});
  1. 사이트를 미리 보려면 View App을 누른 다음 Fullscreen 전체 화면을 누릅니다.
  2. `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
  3. 네트워크 탭을 클릭합니다.
  4. 앱을 새로고침합니다.

이제 방문 페이지가 로드된 후 가장 낮은 우선순위로 style-product.css를 미리 가져옵니다.

미리 가져온 style-product.css가 표시된 네트워크 패널

제품 페이지로 이동하려면 지금 구매를 클릭합니다. 네트워크 패널을 살펴봅니다.

프리패치 캐시에서 가져온 style-product.css가 표시된 네트워크 패널

style-product.css 파일은 '미리 가져오기 캐시'에서 가져오며 로드하는 데 12밀리초밖에 걸리지 않았습니다.