Szybsza nawigacja w internecie dzięki predykcyjnemu pobieraniu z wyprzedzeniem

Dowiedz się więcej o prewencyjnym pobieraniu treści i o tym, jak Guess.js je implementuje.

Minko Gechev

Podczas sesji Szybsza nawigacja w internecie z wyprzedzeniem podczas Google I/O 2019 zaczęłam od omówienia optymalizacji aplikacji internetowych za pomocą podziału kodu oraz potencjalnego wpływu na wydajność nawigacji po stronach. W drugiej części wykładu omówiliśmy, jak można przyspieszyć nawigację, używając Guess.js do skonfigurowania wstępnego wczytywania:

Dzielenie kodu w celu przyspieszenia aplikacji internetowych

Aplikacje internetowe działają wolno, a JavaScript należy do najdroższych zasobów, które wysyłasz. Oczekiwanie na załadowanie wolnej aplikacji internetowej może frustrować użytkowników i zmniejszyć liczbę konwersji.

Wolno działające aplikacje internetowe są stresujące.

Leniwe ładowanie to efektywna technika zmniejszania liczby bajtów kodu JavaScript, które są przesyłane za pomocą przewodu. Do leniwego ładowania JavaScriptu można zastosować kilka metod, takich jak:

  • Dzielenie kodu na poziomie komponentu
  • Dzielenie kodu na poziomie trasy

Dzielenie kodu na poziomie komponentu pozwala przenosić poszczególne komponenty na osobne fragmenty kodu JavaScript. W przypadku konkretnych zdarzeń możesz wczytywać odpowiednie skrypty i wyrenderować komponenty.

Dzielenie kodu na poziomie trasy przenosi natomiast całe trasy na niezależne fragmenty. Gdy użytkownicy przechodzą z jednej trasy na inną, muszą pobrać powiązany kod JavaScript i wczytać żądaną stronę. Te operacje mogą powodować duże opóźnienia, szczególnie w przypadku powolnych sieci.

Wstępne pobieranie JavaScriptu

Pobieranie z wyprzedzeniem umożliwia przeglądarce pobieranie i przechowywanie w pamięci podręcznej zasobów, których użytkownik prawdopodobnie będzie wkrótce potrzebować. Zazwyczaj jest używana metoda <link rel="prefetch">, ale istnieją 2 typowe problemy:

  • Wstępne pobieranie zbyt wielu zasobów (przeciążanie) powoduje zużywanie dużej ilości danych.
  • Niektóre zasoby potrzebne użytkownikowi mogą nigdy nie być wstępnie pobierane.

Przewidywanie pobierania z wyprzedzeniem rozwiązuje te problemy, wykorzystując raport aby określić, które zasoby pobrać z wyprzedzeniem.

Przykład pobierania z wyprzedzeniem

Przewidywanie wstępnego pobierania za pomocą Guess.js

Guess.js to biblioteka JavaScript, która udostępnia funkcję wstępnego pobierania danych. Guess.js pozyskuje raport z Google Analytics lub innego dostawcy analityki, aby utworzyć model prognostyczny, który można wykorzystać do inteligentnego pobierania z wyprzedzeniem tylko tego, czego użytkownik prawdopodobnie potrzebuje.

Guess.js ma integracje z Angular, Next.js, Nuxt.js i Gatsby. Aby użyć go w swojej aplikacji, dodaj te wiersze do konfiguracji pakietu internetowego w celu określenia identyfikatora widoku danych Google Analytics:

const { GuessPlugin } = require('guess-webpack');

// ...
plugins: [
   // ...
   new GuessPlugin({ GA: 'XXXXXX' })
]
// ...

Jeśli nie korzystasz z Google Analytics, możesz określić reportProvider i pobrać dane ze swojej ulubionej usługi.

Integracja z platformami

Aby dowiedzieć się, jak zintegrować Guess.js z Twoją ulubioną platformą, zapoznaj się z tymi materiałami:

Aby zapoznać się z krótką integracją z Angular, obejrzyj ten film:

Jak działa Guess.js?

Oto jak Guess.js implementuje prognozowane pobieranie z wyprzedzeniem:

  1. Najpierw wyodrębnia dane dotyczące wzorców nawigacji użytkownika z Twojego ulubionego dostawcy usług analitycznych.
  2. Następnie mapuje adresy URL z raportu na fragmenty JavaScriptu wygenerowane w pakiecie internetowym.
  3. Na podstawie wyodrębnionych danych tworzony jest prosty model prognostyczny określający, na jakie strony dany użytkownik prawdopodobnie przejdzie.
  4. Wywołuje on model dla każdego fragmentu JavaScriptu, prognozując pozostałe fragmenty, które mogą być potrzebne w następnej kolejności.
  5. Do każdego fragmentu dodaje instrukcje pobierania z wyprzedzeniem.

Po zakończeniu kodu Guess.js każdy fragment będzie zawierał instrukcje pobierania z wyprzedzeniem podobne do tych:

__GUESS__.p(
  ['a.js', 0.2],
  ['b.js', 0.8]
)

Ten kod wygenerowany przez Guess.js informuje przeglądarkę, że ma pobrać z wyprzedzeniem fragment a.js o prawdopodobieństwie 0.2 i fragmentu b.js o prawdopodobieństwie 0.8.

Gdy przeglądarka wykona kod, Guess.js sprawdzi szybkość połączenia użytkownika. Jeśli będzie to wystarczające, Guess.js wstawi dwa tagi <link rel="prefetch"> w nagłówku strony, po jednym na każdy fragment. Jeśli użytkownik korzysta z szybkiej sieci, Guess.js pobierze z wyprzedzeniem oba fragmenty. Jeśli użytkownik ma słabe połączenie sieciowe, Guess.js pobierze z wyprzedzeniem tylko fragment b.js, bo istnieje duże prawdopodobieństwo, że będzie potrzebny.

Więcej informacji

Aby dowiedzieć się więcej o Guess.js, sprawdź te zasoby: