Dwa sposoby pobierania z wyprzedzeniem: tagi <link> oraz nagłówki HTTP

Demián Renzulli

W tym ćwiczeniu w programie zaimplementujesz pobieranie z wyprzedzeniem na 2 sposoby: za pomocą nagłówka <link rel="prefetch"> i nagłówka HTTP Link.

Aplikacja próbna to witryna ze stroną docelową promocyjną ze specjalną zniżką na najlepiej sprzedającą się koszulkę w sklepie. Strona docelowa prowadzi do jednego produktu, więc można założyć, że spory odsetek użytkowników przejdzie na stronę ze szczegółami produktu. Dzięki temu strona produktu jest doskonałym rozwiązaniem do pobrania z wyprzedzeniem na stronie docelowej.

Mierz wyniki

Najpierw ustal poziom bazowy:

  1. Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
  2. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran pełny ekran.
  3. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.

  4. Kliknij kartę Sieć.

  5. Na liście Ograniczanie wybierz Szybkie 3G, aby symulować powolne połączenie.

  6. Aby wczytać stronę produktu, kliknij w przykładowej aplikacji Kup teraz.

Załadowanie strony product-details.html zajmuje około 600 ms:

Panel sieci pokazujący czasy wczytywania elementu product-details.html

Pobieraj z wyprzedzeniem stronę produktu za pomocą funkcji <link rel="prefetch">

Aby usprawnić nawigację, wstaw na stronie docelowej tag prefetch, który umożliwi wstępne pobieranie strony product-details.html:

  • Dodaj w nagłówku pliku views/index.html ten element <link>:
<!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>

Atrybut as jest opcjonalny, ale zalecany. Pomaga przeglądarce ustawić odpowiednie nagłówki i określić, czy zasób znajduje się już w pamięci podręcznej. Przykładowe wartości tego atrybutu to: document, script, style, font, image i inne.

Aby sprawdzić, czy pobieranie z wyprzedzeniem działa:

  1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran pełny ekran.
  2. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.

  3. Kliknij kartę Sieć.

  4. Na liście Ograniczanie wybierz Szybkie 3G, aby symulować powolne połączenie.

  5. Wyczyść pole wyboru Wyłącz pamięć podręczną.

  6. Załaduj ponownie aplikację.

Teraz podczas wczytywania strony docelowej wczytuje się też strona product-details.html, ale z najniższym priorytetem:

Panel sieci z wstępnie pobranym plikiem product-details.html.

Strona jest przechowywana w pamięci podręcznej HTTP przez 5 minut. Po tym czasie obowiązują normalne reguły Cache-Control dla dokumentu. W tym przypadku product-details.html ma nagłówek cache-control o wartości public, max-age=0, co oznacza, że strona jest przechowywana przez 5 minut.

Oceń ponownie skuteczność

  1. Załaduj ponownie aplikację.
  2. Aby wczytać stronę produktu, kliknij w przykładowej aplikacji Kup teraz.

Przeanalizuj panel Sieć. Istnieją 2 różnice w porównaniu z początkowym śledzeniem sieci:

  • Kolumna Rozmiar zawiera wartość „pamięć podręczna pobierania z wyprzedzeniem”, co oznacza, że zasób został pobrany z pamięci podręcznej przeglądarki, a nie z sieci.
  • Kolumna Czas pokazuje, że czas potrzebny na wczytanie dokumentu wynosi teraz około 10 ms.

Jest to o około 98% mniej niż w poprzedniej wersji, co zajęło około 600 ms.

Panel sieci z wyświetlonym plikiem product-details.html pobranym z pamięci podręcznej pobierania z wyprzedzeniem.

Dodatkowy udział: używaj prefetch jako progresywnego ulepszenia

Pobieranie z wyprzedzeniem jest najlepszym rozwiązaniem dla użytkowników, którzy korzystają z szybkiego połączenia internetowego. Aby sprawdzić warunki sieciowe i na ich podstawie dynamicznie wstrzykiwać tagi pobierania z wyprzedzeniem, możesz użyć interfejsu Network Information API. W ten sposób możesz ograniczyć wykorzystanie danych i obniżyć koszty użytkowników, którzy korzystają z wolniejszych lub drogich abonamentów na transmisję danych.

Aby wdrożyć adaptacyjne pobieranie z wyprzedzeniem, najpierw usuń tag <link rel="prefetch"> z elementu 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>

Następnie dodaj do public/script.js ten kod, aby zadeklarować funkcję, która dynamicznie wstrzykuje tag prefetch, gdy użytkownik korzysta z szybkiego połączenia:

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);
    }
}

Funkcja działa w następujący sposób:

  • Sprawdza właściwość effectiveType interfejsu Network Information API, aby określić, czy użytkownik korzysta z połączenia 4G (lub szybszego).
  • Jeśli ten warunek zostanie spełniony, funkcja generuje tag <link> z typem prefetch, przekazuje adres URL, który zostanie wstępnie pobrany w atrybucie href, i wskazuje, że zasób to HTML document w atrybucie as.
  • Na koniec dynamicznie wstawia skrypt w elemencie head strony.

Następnie dodaj script.js do tagu views/index.html tuż przed zamykającym tagiem </body>:

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

Żądanie script.js na końcu strony gwarantuje, że zostanie ona załadowana i wykonana po przeanalizowaniu i wczytaniu strony.

Aby upewnić się, że pobieranie z wyprzedzeniem nie zakłóca działania krytycznych zasobów bieżącej strony, dodaj ten fragment kodu, aby wywołać injectLinkPrefetchIn4g() w zdarzeniu window.load:

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

Strona docelowa pobiera teraz z wyprzedzeniem product-details.html tylko w przypadku szybkich połączeń. Aby to sprawdzić:

  1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran pełny ekran.
  2. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
  3. Kliknij kartę Sieć.
  4. Z listy Throttling (Ograniczanie ograniczania) wybierz Online.
  5. Załaduj ponownie aplikację.

W panelu Network (Sieć) powinna być widoczna wartość product-details.html:

Panel sieci z wstępnie pobranym plikiem product-details.html.

Aby sprawdzić, czy strona produktu nie jest wstępnie pobierana w przypadku wolnych połączeń:

  1. Na liście Ograniczanie wybierz Wolne 3G.
  2. Załaduj ponownie aplikację.

Panel Sieć powinien zawierać tylko zasoby strony docelowej bez product-details.html:

Panel sieci pokazujący, że element product-details.html nie jest wstępnie pobierany.

Pobierz z wyprzedzeniem arkusz stylów strony produktu z nagłówkiem HTTP Link

Nagłówek HTTP Link może służyć do pobierania z wyprzedzeniem zasobów tego samego typu co tag link. Decyzja o tym, kiedy użyć jednego czy drugiego, zależy głównie od Twoich preferencji, ponieważ różnica w skuteczności jest nieistotna. W tym przypadku użyjesz go do pobrania z wyprzedzeniem głównego kodu CSS strony produktu, aby jeszcze bardziej ulepszyć jej renderowanie.

Dodaj nagłówek HTTP Link dla pola style-product.css w odpowiedzi serwera na stronę docelową:

  1. Otwórz plik server.js i znajdź moduł obsługi get() dla głównego adresu URL: /.
  2. Dodaj ten wiersz na początku modułu:
app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});
  1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran pełny ekran.
  2. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
  3. Kliknij kartę Sieć.
  4. Załaduj ponownie aplikację.

Po wczytaniu strony docelowej style-product.css jest teraz wstępnie pobierany z najniższym priorytetem:

Panel sieci pokazujący pobrany plik style-product.css.

Aby przejść na stronę produktu, kliknij Kup teraz. Spójrz na panel Sieć:

Panel sieci pokazujący plik style-product.css pobrany z pamięci podręcznej pobierania z wyprzedzeniem.

Plik style-product.css jest pobierany z „pamięci podręcznej pobierania z wyprzedzeniem”, a jego wczytywanie trwało tylko 12 ms.