W ostatnich kilku modułach omówiliśmy takie zagadnienia jak odwracanie ładowania JavaScriptu, leniwe ładowanie obrazów i elementy <iframe>.
Odroczenie wczytywania zasobów zmniejsza wykorzystanie sieci i CPU podczas początkowego wczytywania strony, ponieważ pobiera zasoby w momencie, gdy są potrzebne, zamiast wczytywać je od razu, gdy mogą zostać niewykorzystane.
Może to skrócić czas wstępnego wczytywania strony, ale kolejne interakcje mogą powodować opóźnienia, jeśli zasoby potrzebne do ich obsługi nie zostaną wczytane w chwili ich wystąpienia.
Jeśli np. strona zawiera niestandardowy selektor daty, możesz odroczyć działanie zasobów selektora daty do czasu interakcji użytkownika z elementem. Wczytywanie zasobów selektora dat na żądanie może jednak spowodować opóźnienie – być może niewielkie, ale nieznaczne, w zależności od połączenia sieciowego użytkownika, możliwości urządzenia lub obu tych rzeczy – do czasu pobrania, przeanalizowania i udostępnienia zasobów do wykonania.
W tym przypadku nie jest to łatwe: nie marnujesz przepustowości przez wczytywanie zasobów, które mogą być nieużywane, ale opóźnienie interakcji i kolejnych wczytywania stron może nie być idealnym rozwiązaniem. Na szczęście jest wiele narzędzi, które pomagają znaleźć równowagę między tymi dwoma skrajnościami. W tym module omawiamy techniki, które można zastosować, takie jak wstępne pobieranie zasobów, wstępne renderowanie całych stron i wstępne buforowanie zasobów za pomocą skryptu service worker.
Pobieraj z wyprzedzeniem zasoby potrzebne w najbliższej przyszłości i o niskim priorytecie
Korzystając ze wskazówek dotyczących zasobów <link rel="prefetch">, można z wyprzedzeniem pobierać zasoby, w tym obrazy, arkusze stylów i zasoby JavaScript. Wskazówka prefetch informuje przeglądarkę, że w najbliższej przyszłości może być potrzebny zasób.
Gdy wskazówka prefetch jest określona, przeglądarka może zainicjować żądanie tego zasobu z najniższym priorytetem, aby uniknąć rywalizacji z zasobami wymaganymi dla bieżącej strony.
Wstępne wczytywanie zasobów może zwiększyć wygodę użytkowników, ponieważ nie musi czekać na pobranie zasobów potrzebnych w najbliższej przyszłości, ponieważ w razie potrzeby można je natychmiast pobrać z pamięci podręcznej dysku.
<head>
<!-- ... -->
<link rel="prefetch" as="script" href="/date-picker.js">
<link rel="prefetch" as="style" href="/date-picker.css">
<!-- ... -->
</head>
Poprzedni fragment kodu HTML informuje przeglądarkę, że może ona pobrać z wyprzedzeniem date-picker.js i date-picker.css, gdy jest nieaktywna. Możesz też pobierać zasoby z wyprzedzeniem w miarę interakcji użytkownika ze stroną w języku JavaScript.
Rozszerzenie prefetch działa we wszystkich nowoczesnych przeglądarkach z wyjątkiem Safari, gdzie jest dostępne za flagą. Jeśli korzystasz z skryptów service worker, które wymagają wstępnego wczytywania zasobów witryny w sposób, który działa we wszystkich przeglądarkach, przeczytaj dalszą część tego modułu o zapamiętywaniu zasobów za pomocą skryptu service worker.
Pobieraj strony z wyprzedzeniem, aby przyspieszyć nawigację w przyszłości
Możesz też pobrać z wyprzedzeniem stronę i wszystkie jej zasoby podrzędne, określając atrybut as="document" w przypadku wskazywania dokumentu HTML:
<link rel="prefetch" href="/page" as="document">
Gdy przeglądarka jest nieaktywna, może zainicjować żądanie o niskim priorytecie dla żądania /page.
W przeglądarkach opartych na Chromium możesz wstępnie pobierać dokumenty za pomocą interfejsu Speculation Rules API. Reguły spekulacyjne to obiekt JSON umieszczony w kodzie HTML strony lub dodawany dynamicznie przez JavaScript:
<script type="speculationrules">
{
"prefetch": [{
"source": "list",
"urls": ["/page-a", "/page-b"]
}]
}
</script>
Obiekt JSON opisuje co najmniej 1 działanie (obecnie obsługuje tylko prefetch i prerender) oraz listę adresów URL powiązanych z tym działaniem. W poprzednim fragmencie kodu HTML przeglądarka otrzymuje instrukcje pobierania z wyprzedzeniem /page-a i /page-b. Podobnie jak w przypadku <link rel="prefetch"> reguły spekulacyjne są wskazówką, którą przeglądarka może ignorować w pewnych okolicznościach.
Biblioteki takie jak Szybkie linki ulepszają nawigację po stronach, pobierając wstępnie z wyprzedzeniem linki do stron lub renderując je z wyprzedzeniem, gdy znajdą się one w widocznym obszarze użytkownika. Zwiększa to prawdopodobieństwo, że użytkownik w końcu wejdzie na tę stronę – w porównaniu z pobieraniem wszystkich linków z wyprzedzeniem.
Wstępne renderowanie stron
Poza pobieraniem zasobów z wyprzedzeniem możesz też sugerować przeglądarce wstępne wyrenderowanie strony, zanim użytkownik ją otworzy. Może to umożliwić niemal natychmiastowe wczytanie strony, ponieważ jej zawartość oraz jej zasoby są pobierane i przetwarzane w tle. Gdy użytkownik przejdzie na stronę, strona zostanie umieszczona na pierwszym planie.
Renderowanie wstępne jest obsługiwane przez interfejs Speculation Rules API:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/page-a", "page-b"]
}
]
}
</script>
Wersje demonstracyjne pobierania i renderowania z wyprzedzeniem
Wstępne buforowanie skryptu service worker
Możesz też pobierać zasoby z wyprzedzeniem za pomocą skryptu service worker.
Wstępne buforowanie skryptu service worker może pobierać i zapisywać zasoby za pomocą interfejsu Cache API, co umożliwia przeglądarce wyświetlanie żądania przy użyciu interfejsu API Cache bez konieczności łączenia się z siecią. Wstępnie buforowanie skryptu service worker wykorzystuje bardzo skuteczną strategię buforowania skryptu, zwaną strategią tylko w pamięci podręcznej. Ten wzorzec jest bardzo skuteczny, ponieważ zasoby umieszczone w pamięci podręcznej skryptu service worker są pobierane niemal natychmiast na żądanie.
Aby wstępnie buforować zasoby za pomocą skryptu service worker, możesz użyć elementu Workbox. Jeśli jednak chcesz, możesz napisać własny kod, aby buforować wstępnie określony zbiór plików. Niezależnie od tego, czy zdecydujesz się na używanie skryptu service worker do wstępnego buforowania zasobów, pamiętaj, że wstępne buforowanie odbywa się po zainstalowaniu skryptu service worker. Po instalacji zasoby w pamięci podręcznej są dostępne do pobrania na dowolnej stronie kontrolowanej przez skrypt service worker w Twojej witrynie.
Panel roboczy używa manifestu precache do określania, które zasoby powinny być zapisane w pamięci podręcznej. Plik manifestu precache to lista plików i informacji o obsłudze wersji, które służą jako „źródło wiarygodnych informacji” dla zasobów do wstępnego buforowania.
[{
url: 'script.ffaa4455.js',
revision: null
}, {
url: '/index.html',
revision: '518747aa'
}]
Poprzedni kod to przykładowy plik manifestu, który zawiera 2 pliki: script.ffaa4455.js i /index.html. Jeśli zasób zawiera informacje o wersji w samym pliku (jest to tzw. hasz pliku), właściwość revision może pozostać w polu null, bo plik ma już różne wersje (np. ffaa4455 w przypadku zasobu script.ffaa4455.js w poprzednim kodzie). W przypadku zasobów, które nie mają wersji, można wygenerować dla nich wersję w czasie kompilacji.
Po skonfigurowaniu skrypt service worker może przyspieszyć przeglądanie stron statycznych lub ich zasobów podrzędnych w pamięci podręcznej.
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
'/styles/product-page.39a1.js',
]);
Na przykład na stronie z informacjami o produkcie e-commerce za pomocą skryptu service worker można umieścić kod CSS i JavaScript wymagany do renderowania strony ze szczegółami produktu w pamięci podręcznej. Dzięki temu poruszanie się po tej stronie jest znacznie szybsze. W poprzednim przykładzie elementy product-page.ac29.css i product-page.39a1.js zostały zapisane w pamięci podręcznej. Metoda precacheAndRoute dostępna w workbox-precaching automatycznie rejestruje moduły obsługi potrzebne do tego, aby w razie potrzeby pobrać zasoby z pamięci podręcznej w interfejsie API Service Worker.
Ponieważ skrypty service worker są powszechnie obsługiwane, możesz ich używać w dowolnej nowoczesnej przeglądarce, w której jest to wymagane.
Sprawdź swoją wiedzę
Jaki priorytet ma wskazówka prefetch?
Jaka jest różnica między pobieraniem a renderowaniem strony z wyprzedzeniem?
Pamięć podręczna skryptu service worker i pamięć podręczna HTTP jest taka sama.
Następny temat: omówienie pracowników internetowych
Wiesz już, jak pobieranie z wyprzedzeniem i wstępne renderowanie oraz precowanie przez mechanizm service worker może pomóc w przyspieszeniu przechodzenia na kolejne strony. Teraz możesz podjąć świadome decyzje o korzyściach, jakie może to przynieść Twojej witrynie i jej użytkownikom.
Następnie przedstawimy ogólne omówienie pracowników internetowych i tego, jak mogą wyeliminować kosztowną pracę z wątku głównego i zapewnić w wątku głównym więcej przestrzeni na interakcje użytkowników. Jeśli zastanawiasz się, co można zrobić, aby dać wątkowi więcej miejsca, warto poświęcić czas na kolejne 2 moduły.