Dowiedz się więcej o prewencyjnym pobieraniu treści i o tym, jak Guess.js je implementuje.
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 prezentacji 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.
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, ponieważ korzysta z raportu o wzorcach nawigacyjnych użytkowników, aby określić, które komponenty pobrać 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:
- Najpierw wyodrębnia dane dotyczące wzorców nawigacji użytkownika z Twojego ulubionego dostawcy usług analitycznych.
- Następnie mapuje adresy URL z raportu na fragmenty JavaScriptu wygenerowane w pakiecie internetowym.
- Na podstawie wyodrębnionych danych tworzony jest prosty model prognostyczny określający, na jakie strony dany użytkownik prawdopodobnie przejdzie.
- Wywołuje on model dla każdego fragmentu JavaScriptu, prognozując pozostałe fragmenty, które mogą być potrzebne w następnej kolejności.
- 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: