Dowiedz się więcej o pobieraniu prognozowanym i o tym, jak implementuje je Guess.js.
W ramach sesji Szybszej nawigacji w sieci z funkcją predykcyjnego pobierania z wyprzedzeniem na Google I/O 2019 rozpocząłem rozmowę o optymalizowaniu aplikacji internetowych za pomocą podziału kodu oraz potencjalnych wpływach na wydajność przy późniejszej nawigacji po stronach. W drugiej części rozmowy omówiliśmy, jak zwiększyć szybkość nawigacji za pomocą kodu Guess.js do skonfigurowania wstępnego pobierania z wyprzedzeniem:
Podział kodu w celu przyspieszenia działania aplikacji internetowych
Aplikacje internetowe są powolne, a JavaScript jest jednym z najdroższych zasobów, jakie wysyłasz. Oczekiwanie, aż aplikacja internetowa wolno się załaduje, może zniechęcić użytkowników i zmniejszyć liczbę konwersji.
Leniwe ładowanie to skuteczna technika ograniczania liczby bajtów kodu JavaScript przenoszonych przez sieć. Do leniwego ładowania kodu JavaScript możesz wykorzystać kilka metod, w tym:
- Podział kodu na poziomie komponentu
- Podział kodu na poziomie trasy
Dzieląc kod na poziomie komponentu, możesz przenosić poszczególne komponenty na osobne fragmenty kodu JavaScript. W przypadku określonych zdarzeń możesz wczytywać odpowiednie skrypty i renderować komponenty.
W przypadku podziału kodu na poziomie trasy przenosisz jednak całe trasy na niezależne fragmenty. Gdy użytkownicy przechodzą z jednej trasy na inną, muszą pobrać powiązany kod JavaScript i uruchomić żądaną stronę. Operacje te mogą powodować duże opóźnienia, zwłaszcza w przypadku powolnych sieci.
Pobieranie z wyprzedzeniem JavaScript
Pobieranie z wyprzedzeniem umożliwia przeglądarce pobieranie i buforowanie w pamięci podręcznej zasobów, które prawdopodobnie wkrótce będą potrzebne użytkownikowi. Zazwyczaj jest używana metoda <link rel="prefetch">, ale występują dwie częste problemy:
- Pobieranie z wyprzedzeniem zbyt wielu zasobów (nadmierne pobieranie) powoduje zużywanie dużej ilości danych.
- Niektóre zasoby, których potrzebuje użytkownik, mogą nigdy nie zostać wstępnie pobrane.
Pobieranie z wyprzedzeniem rozwiązuje te problemy, ponieważ korzysta z raportu o wzorcach nawigacyjnych użytkowników, aby określić, które zasoby pobierać z wyprzedzeniem.
Pobieranie prognozowane z wyprzedzeniem za pomocą Guess.js
Guess.js to biblioteka JavaScript, która udostępnia funkcję pobierania z wyprzedzeniem. Kod Guess.js na podstawie raportu z Google Analytics lub innego dostawcy usług analitycznych tworzy model prognostyczny, który można wykorzystać do inteligentnego pobierania z wyprzedzeniem tylko tych informacji, które prawdopodobnie będą potrzebne użytkownikowi.
Guess.js ma integracje z Angular, Next.js, Nuxt.js i Gatsby. Aby używać go w swojej aplikacji, dodaj do konfiguracji pakietu internetowego te wiersze, aby określić identyfikator 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 z ulubionej usługi.
Integracja z platformami
Aby dowiedzieć się więcej o integrowaniu Guess.js z ulubioną platformą, zapoznaj się z tymi materiałami:
Aby zapoznać się z krótkim omówieniem integracji z Angular, obejrzyj ten film:
Jak działa Guess.js?
Oto jak Guess.js implementuje pobieranie prognozowane:
- Najpierw wyodrębnia ona dane o wzorcach nawigacji użytkowników od Twojego ulubionego dostawcy analityki.
- Następnie mapuje adresy URL z raportu na fragmenty JavaScriptu utworzone przez pakiet internetowy.
- Na podstawie wyodrębnionych danych tworzy prosty model prognostyczny określający, na które strony użytkownik prawdopodobnie przejdzie z danej strony.
- Wywołuje model dla każdego fragmentu JavaScriptu, prognozując inne fragmenty, które mogą być potrzebne w następnej kolejności.
- Dodaje instrukcje pobierania z wyprzedzeniem do każdego fragmentu.
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 rozważyć pobieranie z wyprzedzeniem fragmentu a.js z prawdopodobieństwem 0.2 i fragmentu b.js z prawdopodobieństwem 0.8.
Gdy przeglądarka wykona kod, Guess.js sprawdzi szybkość połączenia użytkownika. Jeśli to wystarczy, Guess.js wstawi w nagłówku strony 2 tagi <link rel="prefetch">, po jednym na każdy fragment. Jeśli użytkownik korzysta z szybkiej sieci, Guess.js pobierze wstępnie oba fragmenty. Jeśli użytkownik ma słabe połączenie sieciowe, Guess.js będzie pobierać z wyprzedzeniem tylko fragment b.js, ponieważ prawdopodobieństwo, że będzie on potrzebny, będzie wysokie.
Więcej
Aby dowiedzieć się więcej o tagu Guess.js, skorzystaj z tych materiałów: