Szybsza nawigacja w internecie dzięki predykcyjnemu pobieraniu z wyprzedzeniem

Dowiedz się więcej o wstępnym pobieraniu danych na podstawie prognozy i o tym, jak implementuje je Guess.js.

Podczas sesji Szybsza nawigacja w internecie dzięki wstępnemu pobieraniu z wykorzystaniem przewidywania na konferencji Google I/O 2019 zacząłem od omówienia optymalizacji aplikacji internetowych za pomocą podziału kodu i potencjalnych konsekwencji dla wydajności w przypadku nawigacji po kolejnych stronach. W drugiej części prezentacji omawiałem, jak poprawić szybkość nawigacji, konfigurując przewidujące pobieranie wstępne za pomocą Guess.js:

Dzielenie kodu na części na potrzeby szybszych aplikacji internetowych

Aplikacje internetowe działają bardzo wolno, a JavaScript należy do najdroższych zasobów, które wysyłasz. Czekanie na załadowanie aplikacji internetowej może zniechęcić użytkowników i spowodować spadek liczby konwersji.

Powolne 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 wczytywania kodu JavaScript możesz używać różnych technik, takich jak:

  • Podział kodu na poziomie komponentu
  • Dzielenie kodu na poziomie przekierowań

Dzięki dzieleniu kodu na poziomie komponentu możesz przenosić poszczególne komponenty do osobnych fragmentów kodu JavaScript. W przypadku określonych zdarzeń możesz wczytywać odpowiednie skrypty i renderować komponenty.

W przypadku dzielenia kodu na poziomie przekierowań przenosisz jednak całe trasy do niezależnych fragmentów. Gdy użytkownicy przechodzą z jednego szlaku na inny, muszą pobrać powiązany kod JavaScript i uruchomić żądaną stronę. Te operacje mogą powodować znaczne opóźnienia, zwłaszcza w wolnych sieciach.

Pobieranie w poprzednim planie kodu JavaScript

Wstępne pobieranie umożliwia przeglądarce pobieranie i przechowywanie w pamięci podręcznej zasobów, których użytkownik prawdopodobnie wkrótce użyje. Zwykle używa się do tego metody <link rel="prefetch">, ale i w tym przypadku występują 2 częste problemy:

  • Pobieranie w poprzedniej fazie zbyt wielu zasobów (nadwymiarowe pobieranie) zużywa dużo danych.
  • Niektóre zasoby potrzebne użytkownikowi mogą nigdy nie zostać wyprzedzowo pobrane.

Prognostyczne pobieranie w poprzedniości rozwiązuje te problemy, korzystając z raportu o wzorcach nawigacyjnych użytkowników, aby określić, jakie zasoby pobrać w poprzedniości.

Przykład pobierania z wyprzedzeniem

Prognostyczne pobieranie wstępne za pomocą Guess.js

Guess.js to biblioteka JavaScript, która udostępnia funkcję wstępnego pobierania danych. Guess.js korzysta z raportu z Google Analytics lub innego dostawcy usług analitycznych, aby tworzyć model prognozowania, który można wykorzystać do inteligentnego pobierania w poprzednim planie tylko tych treści, których użytkownik prawdopodobnie potrzebuje.

Guess.js integruje się z Angular, Next.js, Nuxt.jsGatsby. Aby użyć go w aplikacji, dodaj te wiersze do konfiguracji webpack, aby określić identyfikator widoku 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 ramami

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 przewidywanie i pobieranie w poprzedniości:

  1. Najpierw wyodrębnia z ulubionego dostawcy usług analitycznych dane o wzorach nawigacyjnych użytkowników.
  2. Następnie mapuje adresy URL z raportu na fragmenty kodu JavaScript utworzone przez webpack.
  3. Na podstawie wyodrębnionych danych tworzy on prosty model prognozowania, który pozwala określić, na które strony użytkownik prawdopodobnie przejdzie z konkretnej strony.
  4. Wywołuje on model dla każdego fragmentu kodu JavaScript, przewidując inne fragmenty, które prawdopodobnie będą potrzebne w kolejnym kroku.
  5. Dodaje instrukcje pobierania w poprzednim etapie do każdego fragmentu.

Gdy Guess.js zakończy działanie, każdy fragment będzie zawierać instrukcje wstępnego pobierania podobne do tych:

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

Ten kod wygenerowany przez Guess.js informuje przeglądarkę, aby rozważył wstępne pobieranie fragmentu a.js z prawdopodobieństwom 0.2 i fragmentu b.js z prawdopodobieństwom 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 z internetem, Guess.js pobierze z wyprzedzeniem tylko fragment b.js, ponieważ istnieje duże prawdopodobieństwo, że będzie on potrzebny.

Więcej informacji

Więcej informacji o Guess.js znajdziesz w tych materiałach: