Tworzenie witryn, które działają szybko w każdym miejscu, może być trudne. Mnogość funkcji urządzeń i jakość sieci, z którymi się łączą, mogą sprawiać wrażenie, że jest to zadanie nie do wykonania. Możemy korzystać z funkcji przeglądarki, aby poprawić wydajność ładowania, ale skąd mamy wiedzieć, jakie możliwości ma urządzenie użytkownika lub jaka jest jakość jego połączenia sieciowego? Rozwiązaniem są wskazówki klienta.
Wskazówki klienta to zestaw nagłówków żądań HTTP, które można włączyć, aby uzyskać informacje o tych aspektach urządzenia użytkownika i sieci, z którą jest połączony. Dzięki dostępowi do tych informacji po stronie serwera możemy zmieniać sposób dostarczania treści w zależności od urządzenia lub warunków sieciowych. Dzięki temu możemy tworzyć bardziej inkluzywne usługi.
Wszystko zależy od negocjacji treści
Wskazówki klienta to kolejna metoda negocjacji treści, czyli zmieniania odpowiedzi dotyczących treści na podstawie nagłówków żądań przeglądarki.
Przykładem negocjacji treści jest nagłówek żądania
Accept. Określa typy treści, które rozumie przeglądarka. Serwer może ich używać do negocjowania odpowiedzi. W przypadku żądań obrazów zawartość nagłówka Accept w Chrome to:
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Wszystkie przeglądarki obsługują formaty obrazów takie jak JPEG, PNG i GIF, ale w tym przypadku nagłówek Accept informuje, że przeglądarka również obsługuje formaty WebP i APNG. Na podstawie tych informacji możemy negocjować najlepsze typy obrazów dla każdej przeglądarki:
<?php
// Check Accept for an "image/webp" substring.
$webp = stristr($_SERVER["HTTP_ACCEPT"], "image/webp") !== false ? true : false;
// Set the image URL based on the browser's WebP support status.
$imageFile = $webp ? "whats-up.webp" : "whats-up.jpg";
?>
<img src="<?php echo($imageFile); ?>" alt="I'm an image!">
Podobnie jak Accept, wskazówki klienta to kolejny sposób negocjowania treści, ale w kontekście możliwości urządzenia i warunków sieci. Dzięki wskazówkom klienta możemy podejmować decyzje dotyczące wydajności po stronie serwera na podstawie indywidualnych doświadczeń użytkownika, np. decydować, czy niekrytyczne zasoby powinny być udostępniane użytkownikom o słabych warunkach sieciowych. W tym przewodniku opisujemy wszystkie dostępne wskazówki i sposoby ich wykorzystania, aby dostarczanie treści było bardziej dostosowane do potrzeb użytkowników.
Włączanie opcji
W przeciwieństwie do nagłówka Accept wskazówki klienta nie pojawiają się magicznie (z wyjątkiem Save-Data, o którym porozmawiamy później). Aby zminimalizować liczbę nagłówków żądań, musisz określić, które wskazówki klienta chcesz otrzymywać, wysyłając nagłówek Accept-CH, gdy użytkownik zażąda zasobu:
Accept-CH: Viewport-Width, Downlink
Wartość parametru Accept-CH to lista oddzielonych przecinkami wskazówek, których witryna będzie używać do określania wyników kolejnych żądań zasobów. Gdy klient odczyta ten nagłówek, dowie się, że „ta witryna chce uzyskać wskazówki klienta Viewport-Width i Downlink”. Nie musisz się martwić o same wskazówki.
Do tych kwestii wrócimy za chwilę.
Możesz ustawić te nagłówki w dowolnym języku backendu. Możesz na przykład użyć funkcji headerw języku PHP.
Możesz nawet ustawić te nagłówki zgody użytkownika za pomocą atrybutu http-equiv w tagu <meta>:
<meta http-equiv="Accept-CH" content="Viewport-Width, Downlink" />
Wszystkie wskazówki dotyczące klienta
Wskazówki klienta opisują 2 rzeczy: urządzenie, z którego korzystają użytkownicy, oraz sieć, z której korzystają, aby uzyskać dostęp do Twojej witryny. Przyjrzyjmy się krótko wszystkim dostępnym wskazówkom.
Wskazówki dotyczące urządzenia
Niektóre wskazówki klienta opisują cechy urządzenia użytkownika, zwykle cechy ekranu. Niektóre z nich mogą pomóc w wybraniu optymalnego zasobu multimedialnego na ekran użytkownika, ale nie wszystkie są związane z multimediami.
Zanim przejdziemy do listy, warto poznać kilka kluczowych terminów używanych do opisywania rozdzielczości ekranów i multimediów:
Rozmiar wewnętrzny: rzeczywiste wymiary zasobu multimedialnego. Jeśli na przykład otworzysz obraz w programie Photoshop, wymiary wyświetlane w oknie dialogowym rozmiaru obrazu opisują jego rozmiar wewnętrzny.
Rozmiar wewnętrzny skorygowany pod kątem gęstości: wymiary zasobu multimedialnego po skorygowaniu pod kątem gęstości pikseli. Jest to rozmiar wewnętrzny obrazu podzielony przez współczynnik pikseli urządzenia. Weźmy na przykład te znaczniki:
<img
src="whats-up-1x.png"
srcset="whats-up-2x.png 2x, whats-up-1x.png 1x"
alt="I'm that image you wanted."
/>
Załóżmy, że rozmiar wewnętrzny obrazu 1x wynosi 320 x 240, a rozmiar wewnętrzny obrazu 2x to 640 x 480. Jeśli ten kod zostanie przeanalizowany przez klienta zainstalowanego na urządzeniu o współczynniku pikseli urządzenia do pikseli ekranu wynoszącym 2 (np. ekran Retina), zostanie wysłane żądanie obrazu 2x. Rozmiar wewnętrzny skorygowany pod kątem gęstości obrazu 2x wynosi 320 x 240, ponieważ 640 x 480 podzielone przez 2 daje 320 x 240.
Rozmiar zewnętrzny: rozmiar zasobu multimedialnego po zastosowaniu do niego CSS i innych czynników układu (takich jak atrybuty width i height). Załóżmy, że masz element <img>, który wczytuje obraz o rozmiarze wewnętrznym skorygowanym pod kątem gęstości wynoszącym 320 × 240, ale ma też właściwości CSS width i height z wartościami 256px i 192px. W tym przykładzie rozmiar zewnętrzny elementu <img> wynosi 256 x 192.
width: 256px;
i height: 192px; przekształca obraz o rozmiarze wewnętrznym 320 x 240 w obraz o rozmiarze zewnętrznym 256 x 192.Znając już niektóre terminy, przejdźmy do listy wskazówek dotyczących klienta, które są dostępne w przypadku poszczególnych urządzeń.
Viewport-Width
Viewport-Width to szerokość widocznego obszaru użytkownika w pikselach CSS:
Viewport-Width: 320
Tę wskazówkę można stosować z innymi wskazówkami dotyczącymi ekranu, aby dostarczać różne wersje (np. przycięte) obrazu, które są optymalne dla określonych rozmiarów ekranu (np. kierunek artystyczny), lub pomijać zasoby, które są niepotrzebne przy bieżącej szerokości ekranu.
DPR
DPR, czyli współczynnik pikseli urządzenia, podaje stosunek pikseli fizycznych do pikseli CSS na ekranie użytkownika:
DPR: 2
Ta wskazówka jest przydatna podczas wybierania źródeł obrazów, które odpowiadają gęstości pikseli ekranu (tak jak deskryptory x w srcsetatrybucie).
Szerokość
Wskazówka Width pojawia się w przypadku żądań zasobów obrazów wysyłanych przez tagi <img> lub <source> z użyciem sizesatrybutu.
sizes informuje przeglądarkę o zewnętrznym rozmiarze zasobu;Width używa tego zewnętrznego rozmiaru, aby poprosić o obraz o wewnętrznym rozmiarze optymalnym dla bieżącego układu.
Załóżmy na przykład, że użytkownik wysyła żądanie strony o szerokości ekranu 320 pikseli CSS i współczynniku DPR 2. Urządzenie wczytuje dokument z elementem <img> zawierającym wartość atrybutu sizes równą 85vw (np. 85% szerokości widocznego obszaru dla wszystkich rozmiarów ekranu). Jeśli klient wyraził zgodę na korzystanie z wskazówki Width, wyśle ją do serwera wraz z żądaniem <img> src:Width
Width: 544
W tym przypadku klient sugeruje serwerowi, że optymalna szerokość wewnętrzna żądanego obrazu to 85% szerokości widocznego obszaru (272 piksele) pomnożone przez współczynnik DPR ekranu (2), co daje 544 piksele.
Ta wskazówka jest szczególnie przydatna, ponieważ uwzględnia nie tylko szerokość ekranu skorygowaną pod kątem gęstości pikseli, ale też dopasowuje tę kluczową informację do zewnętrznego rozmiaru obrazu w układzie. Dzięki temu serwery mogą negocjować odpowiedzi dotyczące obrazów, które są optymalne zarówno dla ekranu, jak i układu.
Content-DPR
Wiesz już, że ekrany mają współczynnik pikseli urządzenia, ale zasoby też mają własne współczynniki pikseli. W najprostszych przypadkach użycia związanych z wybieraniem zasobów współczynniki pikseli między urządzeniami a zasobami mogą być takie same. Ale! W przypadku, gdy używane są nagłówki DPR i Width, zewnętrzny rozmiar zasobu może powodować różnice między nimi. W tym momencie przydaje się Content-DPRpodpowiedź.
W przeciwieństwie do innych wskazówek klienta nagłówek Content-DPR nie jest nagłówkiem żądania, którego serwery mogą używać, ale nagłówkiem odpowiedzi, który serwery muszą wysyłać za każdym razem, gdy do wyboru zasobu używane są wskazówki DPR i Width. Wartość Content-DPR powinna być wynikiem tego równania:
Content-DPR = [Rozmiar wybranego zasobu obrazu] / ([Width] / [DPR])
Gdy wysyłany jest nagłówek żądania Content-DPR, przeglądarka wie, jak skalować dany obraz do współczynnika pikseli urządzenia i układu ekranu. Bez niego obrazy mogą nie być odpowiednio skalowane.
Pamięć urządzenia
Device-Memory Technicznie rzecz biorąc, jest to część interfejsu Device Memory API. Funkcja Device-Memory ujawnia przybliżoną ilość pamięci, jaką ma bieżące urządzenie (w GiB):
Device-Memory: 2
Możliwe zastosowanie tej wskazówki to zmniejszenie ilości kodu JavaScript wysyłanego do przeglądarek na urządzeniach z ograniczoną pamięcią, ponieważ JavaScript jest najbardziej zasobożernym typem treści, który przeglądarki zwykle wczytują. Możesz też wysyłać obrazy o niższej wartości DPR, ponieważ do ich dekodowania potrzeba mniej pamięci.
Wskazówki dotyczące sieci
Network Information API udostępnia kolejną kategorię wskazówek klienta, które opisują wydajność połączenia sieciowego użytkownika. Moim zdaniem to najbardziej przydatny zestaw wskazówek. Dzięki nim możemy dostosowywać wrażenia użytkowników, zmieniając sposób dostarczania zasobów klientom z wolnym połączeniem.
RTT
Wskazówka RTT podaje przybliżony czas przesyłania pakietów w obie strony w milisekundach na warstwie aplikacji. Wskazówka RTT, w przeciwieństwie do czasu RTT w warstwie transportowej, obejmuje czas przetwarzania na serwerze.
RTT: 125
Ta wskazówka jest przydatna ze względu na rolę, jaką odgrywa opóźnienie w wydajności wczytywania.
Korzystając ze wskazówki RTT, możemy podejmować decyzje na podstawie szybkości reakcji sieci, co może przyspieszyć dostarczanie pełnej usługi (np. przez pomijanie niektórych żądań).
Downlink
Opóźnienie ma znaczenie dla szybkości wczytywania, ale przepustowość również jest ważna. Downlink Wskazówka podana w megabitach na sekundę (Mb/s) pokazuje przybliżoną szybkość pobierania danych w połączeniu użytkownika:
Downlink: 2.5
W połączeniu z RTT parametr Downlink może być przydatny do zmiany sposobu dostarczania treści użytkownikom w zależności od jakości połączenia sieciowego.
ECT
Wskazówka ECT oznacza Użyty rodzaj połączenia. Jego wartość jest jednym z elementów listy typów połączeń, z których każdy opisuje połączenie w określonych zakresach wartości RTT i Downlink.
Ten nagłówek nie wyjaśnia, jaki jest rzeczywisty typ połączenia. Nie informuje na przykład, czy brama to stacja bazowa sieci komórkowej czy punkt dostępu Wi-Fi. Analizuje ona opóźnienie i przepustowość bieżącego połączenia i określa, do którego profilu sieciowego jest najbardziej podobne. Jeśli na przykład połączysz się przez Wi-Fi z wolną siecią, pole ECT może zawierać wartość 2g, która jest najbliższym przybliżeniem efektywnego połączenia:
ECT: 2g
Prawidłowe wartości parametru ECT to 4g, 3g, 2g i slow-2g. Ta wskazówka może służyć jako punkt początkowy do oceny jakości połączenia, a następnie może być doprecyzowywana za pomocą wskazówek RTT i Downlink.
Save-Data
Save-Data nie jest wskazówką opisującą warunki sieciowe, ale raczej preferencją użytkownika, która mówi, że strony powinny wysyłać mniej danych.
Wolę klasyfikować Save-Data jako wskazówkę dotyczącą sieci, ponieważ wiele czynności, które można wykonać za jej pomocą, jest podobnych do innych wskazówek dotyczących sieci. Użytkownicy mogą też włączyć tę funkcję w środowiskach o dużym opóźnieniu lub małej przepustowości. Ta wskazówka, jeśli jest obecna, zawsze wygląda tak:
Save-Data: on
W Google mówiliśmy już o tym, co możesz zrobić dziękiSave-Data.
Może to mieć ogromny wpływ na wydajność. To sygnał, że użytkownicy dosłownie proszą Cię o wysyłanie mniejszej liczby informacji. Jeśli posłuchasz tego sygnału i zareagujesz na niego, użytkownicy to docenią.
Jak zastosować teorię w praktyce
To, co zrobisz ze wskazówkami klienta, zależy od Ciebie. Dostarczają one tak wiele informacji, że masz wiele możliwości. Aby pobudzić wyobraźnię, zobaczmy, co wskazówki klienta mogą zrobić dla Sconnie Timber, fikcyjnej firmy zajmującej się drewnem, która znajduje się na obszarach wiejskich w północno-zachodniej części Stanów Zjednoczonych. Jak to często bywa na odległych obszarach, połączenia sieciowe mogą być niestabilne. W takich sytuacjach technologia taka jak wskazówki klienta może mieć duże znaczenie dla użytkowników.
Obrazy elastyczne
Wszystkie przypadki użycia obrazów elastycznych z wyjątkiem najprostszych mogą być skomplikowane. Co zrobić, jeśli masz wiele wersji i wariantów tych samych obrazów dla różnych rozmiarów ekranu i różnych formatów? Ten kod staje się bardzo skomplikowany bardzo szybko.
Łatwo się pomylić, zapomnieć lub źle zrozumieć ważne pojęcia (np. sizes).
Chociaż <picture> i srcset to niewątpliwie świetne narzędzia, w przypadku złożonych zastosowań ich opracowywanie i utrzymywanie może być czasochłonne. Możemy zautomatyzować generowanie kodu, ale jest to trudne, ponieważ funkcje <picture> i srcset są na tyle złożone, że ich automatyzacja musi być przeprowadzona w taki sposób, aby zachować elastyczność, jaką zapewniają.
Wskazówki klienta mogą to uprościć. Negocjowanie odpowiedzi z obrazami za pomocą wskazówek klienta może wyglądać tak:
- Jeśli jest to odpowiednie w Twoim przypadku, najpierw wybierz sposób traktowania obrazu (np. obraz wyreżyserowany artystycznie), zaznaczając wskazówkę
Viewport-Width. - Wybierz rozdzielczość obrazu, sprawdzając wskazówki
WidthiDPR, a następnie wybierz źródło, które pasuje do rozmiaru układu obrazu i gęstości ekranu (podobnie jak deskryptoryxiwwsrcset). - Wybierz optymalny format pliku obsługiwany przez przeglądarkę (w większości przeglądarek
Acceptpomaga nam w tym).
W przypadku mojego fikcyjnego klienta, firmy zajmującej się handlem drewnem, opracowałem w PHP prosty mechanizm wyboru obrazów responsywnych, który korzysta ze wskazówek klienta. Oznaczało to, że zamiast wysyłać ten kod do wszystkich użytkowników:
<picture>
<source
srcset="
company-photo-256w.webp 256w,
company-photo-512w.webp 512w,
company-photo-768w.webp 768w,
company-photo-1024w.webp 1024w,
company-photo-1280w.webp 1280w
"
type="image/webp"
/>
<img
srcset="
company-photo-256w.jpg 256w,
company-photo-512w.jpg 512w,
company-photo-768w.jpg 768w,
company-photo-1024w.jpg 1024w,
company-photo-1280w.jpg 1280w
"
src="company-photo-256w.jpg"
sizes="(min-width: 560px) 251px, 88.43vw"
alt="The Sconnie Timber Staff!"
/>
</picture>
Na podstawie obsługi poszczególnych przeglądarek udało mi się zmniejszyć tę liczbę do:
<img
src="/image/sizes:true/company-photo.jpg"
sizes="(min-width: 560px) 251px, 88.43vw"
alt="SAY CHEESY PICKLES."
/>
W tym przykładzie adres URL /image to skrypt PHP z parametrami
przepisanymi przez
mod_rewrite. Przyjmuje nazwę pliku obrazu i dodatkowe parametry, aby pomóc skryptowi backendu wybrać najlepszy obraz w danych warunkach.
„Ale czy to nie jest po prostu ponowne wdrożenie <picture> i srcset na serwerze?” – to chyba Twoje pierwsze pytanie.
Tak, ale z ważnym rozróżnieniem: gdy aplikacja używa wskazówek klienta do tworzenia odpowiedzi dotyczących multimediów, większość (jeśli nie wszystkie) zadań jest znacznie łatwiejsza do zautomatyzowania, co może obejmować usługę (np. CDN), która może to zrobić w Twoim imieniu. W przypadku rozwiązań HTML trzeba napisać nowy kod znaczników, aby uwzględnić każdy przypadek użycia. Oczywiście możesz zautomatyzować generowanie kodu. Jeśli jednak zmieni się projekt lub wymagania, prawdopodobnie w przyszłości będziesz musiał(-a) ponownie rozważyć swoją strategię automatyzacji.
Wskazówki klienta umożliwiają rozpoczęcie od obrazu bezstratnego o wysokiej rozdzielczości, który można następnie dynamicznie zmieniać, aby był optymalny dla dowolnej kombinacji ekranu i układu. W przeciwieństwie do elementu srcset, który wymaga podania stałej listy możliwych obrazów do wyboru przez przeglądarkę, to podejście może być bardziej elastyczne. srcset wymusza oferowanie przeglądarkom ograniczonego zestawu wersji, np. 256w, 512w, 768w i 1024w. Rozwiązanie oparte na wskazówkach klienta może natomiast obsługiwać wszystkie szerokości bez konieczności stosowania ogromnej ilości znaczników.
Oczywiście nie musisz samodzielnie pisać logiki wyboru obrazów. Cloudinary używa wskazówek klienta do tworzenia odpowiedzi z obrazami, gdy używasz w_autoparametru. Zaobserwowaliśmy, że średnio użytkownicy pobierali o 42% mniej bajtów, gdy korzystali z przeglądarek obsługujących wskazówki klienta.
Ale uważaj! Zmiany w wersji komputerowej Chrome 67 spowodowały wycofanie obsługi wskazówek klienta dotyczących różnych domen. Na szczęście te ograniczenia nie dotyczą mobilnych wersji Chrome i zostaną całkowicie zniesione na wszystkich platformach po zakończeniu prac nad zasadami dotyczącymi funkcji.
Pomoc dla użytkowników korzystających z wolnych sieci
Adaptacyjna wydajność to koncepcja, zgodnie z którą możemy dostosowywać sposób dostarczania zasobów na podstawie informacji udostępnianych nam przez wskazówki klienta, a w szczególności informacji o bieżącym stanie połączenia sieciowego użytkownika.
W przypadku witryny Sconnie Timber podejmujemy działania, aby zmniejszyć obciążenie, gdy sieci działają wolno. W naszym kodzie backendu sprawdzane są nagłówki Save-Data, ECT, RTT i Downlink. Gdy to zrobimy, wygenerujemy ocenę jakości sieci, której możemy użyć, aby określić, czy powinniśmy interweniować, aby poprawić komfort użytkownika. Wynik sieci mieści się w zakresie od 0 do 1, gdzie 0 oznacza najgorszą możliwą jakość sieci, a 1 – najlepszą.
Najpierw sprawdzamy, czy występuje znak Save-Data. Jeśli tak jest, ocena jest ustawiana na 0, ponieważ zakładamy, że użytkownik chce, abyśmy zrobili wszystko, co konieczne, aby zapewnić mu szybsze i lżejsze działanie.
Jeśli jednak atrybut Save-Data jest nieobecny, przechodzimy dalej i ważymy wartości wskazówek ECT, RTT i Downlink, aby obliczyć wynik opisujący jakość połączenia sieciowego. Kod źródłowy generowania wyniku sieci jest dostępny na GitHubie. Wniosek jest taki, że jeśli będziemy korzystać ze wskazówek związanych z siecią w pewien sposób, możemy poprawić komfort korzystania z usług przez osoby, które mają wolne połączenie z siecią.
Gdy witryny dostosowują się do informacji dostarczanych przez wskazówki klienta, nie musimy stosować podejścia „wszystko albo nic”. Możemy inteligentnie decydować, które zasoby wysłać. Możemy zmodyfikować logikę wyboru obrazów responsywnych, aby w przypadku danego wyświetlacza wysyłać obrazy o niższej jakości, co przyspieszy wczytywanie, gdy jakość sieci jest słaba.
W tym przykładzie widać, jaki wpływ mają wskazówki klienta na poprawę wydajności witryn w wolniejszych sieciach. Poniżej znajduje się wykres kaskadowy WebPagetest witryny w wolnej sieci, która nie dostosowuje się do wskazówek klienta:
A teraz wodospad dla tej samej witryny przy tym samym wolnym połączeniu, z tą różnicą, że tym razem witryna używa wskazówek dotyczących klienta, aby wyeliminować niekrytyczne zasoby strony:
Wskazówki klienta skróciły czas wczytywania strony z ponad 45 sekund do mniej niż jednej dziesiątej tego czasu. W tym przypadku zalety wskazówek klienta są nie do przecenienia i mogą być bardzo przydatne dla użytkowników, którzy szukają ważnych informacji w powolnych sieciach.
Ponadto wskazówki klienta można stosować bez pogarszania komfortu korzystania z przeglądarek, które ich nie obsługują. Jeśli na przykład chcemy dostosować dostarczanie zasobów za pomocą wartości wskazówki ECT, a jednocześnie zapewnić pełną funkcjonalność w przeglądarkach, które nie obsługują tej funkcji, możemy ustawić powrót do wartości domyślnej w ten sposób:
// Set the ECT value to "4g" by default.
$ect = isset($_SERVER["HTTP_ECT"]) ? $_SERVER["HTTP_ECT"] : "4g";
W tym przypadku "4g" oznacza połączenie sieciowe o najwyższej jakości, które opisuje nagłówek ECT. Jeśli zainicjujemy wartość $ect jako "4g", nie będzie to miało wpływu na przeglądarki, które nie obsługują wskazówek klienta. Opt-in FTW!
Uważaj na pamięć podręczną!
Za każdym razem, gdy zmieniasz odpowiedź na podstawie nagłówka HTTP, musisz pamiętać, jak pamięci podręczne będą obsługiwać przyszłe pobieranie tego zasobu. Nagłówek Vary jest tu niezbędny, ponieważ przypisuje wpisy w pamięci podręcznej do wartości nagłówków żądań
dostarczonych do niego. Jeśli modyfikujesz odpowiedź na podstawie danego nagłówka żądania HTTP, prawie zawsze należy uwzględnić ten nagłówek w nagłówku Vary, na przykład tak:
Vary: DPR, Width
Jest jednak ważny wyjątek: nigdy nie należy Vary buforować odpowiedzi z często zmieniającym się nagłówkiem (np. Cookie), ponieważ te zasoby stają się w praktyce niebuforowalne. Wiedząc to, możesz unikać polegania na nagłówkach wskazówek klienta, takich jak RTT lub Downlink, ponieważ są to czynniki połączenia, które mogą się dość często zmieniać.Vary Jeśli chcesz modyfikować odpowiedzi w tych nagłówkach, rozważ użycie tylko nagłówka ECT, co zminimalizuje liczbę nieudanych prób pobrania z pamięci podręcznej.
Oczywiście ma to zastosowanie tylko wtedy, gdy odpowiedź jest zapisywana w pamięci podręcznej.
Na przykład nie będziesz zapisywać w pamięci podręcznej zasobów HTML, jeśli ich zawartość jest dynamiczna, ponieważ może to pogorszyć wrażenia użytkownika podczas kolejnych wizyt. W takich przypadkach możesz dowolnie modyfikować odpowiedzi, jeśli uznasz to za konieczne, i nie musisz się przejmować Vary.
Wskazówki dotyczące klienta w usługach Service Worker
Negocjowanie treści nie jest już tylko domeną serwerów. Ponieważ service workerzy działają jako serwery proxy między klientami a serwerami, masz kontrolę nad tym, jak zasoby są dostarczane za pomocą JavaScriptu. Obejmuje to wskazówki klienta. W zdarzeniu fetch service worker możesz użyć metody request.headers.get obiektu event, aby odczytać nagłówki żądania zasobu, w ten sposób:
self.addEventListener('fetch', (event) => {
let dpr = event.request.headers.get('DPR');
let viewportWidth = event.request.headers.get('Viewport-Width');
let width = event.request.headers.get('Width');
event.respondWith(
(async function () {
// Do what you will with these hints!
})(),
);
});
W ten sposób można odczytać dowolny nagłówek wskazówki klienta, który włączysz. Nie jest to jednak jedyny sposób na uzyskanie tych informacji. Wskazówki dotyczące sieci
można odczytać w tych odpowiednich właściwościach JavaScriptu w obiekcie navigator:
| Wskazówka dotycząca klienta | Odpowiednik w JS |
|---|---|
| `ECT` | `navigator.connection.effectiveType` |
| `RTT` | `navigator.connection.rtt` |
| `Save-Data` | `navigator.connection.saveData` |
| `Downlink` | `navigator.connection.downlink` |
| `Device-Memory` | `navigator.deviceMemory` |
Te interfejsy API nie są dostępne wszędzie, więc musisz sprawdzić dostępność funkcji za pomocą operatora in:
if ('connection' in navigator) {
// Work with netinfo API properties in JavaScript!
}
Możesz tu użyć logiki podobnej do tej, której używasz na serwerze, z tym wyjątkiem, że do negocjowania treści za pomocą wskazówek klienta nie potrzebujesz serwera. Same service workery mogą przyspieszyć działanie aplikacji i zwiększyć ich odporność, ponieważ mają możliwość wyświetlania treści, gdy użytkownik jest offline.
Podsumowuję
Wskazówki klienta pozwalają nam w pełni progresywny sposób przyspieszać działanie witryn. Możemy udostępniać multimedia na podstawie możliwości urządzenia użytkownika w sposób, który ułatwia udostępnianie elastycznych obrazów w porównaniu z poleganiem na elementach <picture> i srcset, zwłaszcza w przypadku złożonych przypadków użycia. Pozwala nam to nie tylko skrócić czas i zmniejszyć wysiłek po stronie programistów, ale też optymalizować zasoby, zwłaszcza obrazy, w sposób, który lepiej dopasowuje je do ekranów użytkowników niż
Co ważniejsze, możemy wykrywać słabe połączenia sieciowe i niwelować niedogodności dla użytkowników, modyfikując to, co wysyłamy, i sposób wysyłania. Może to znacznie ułatwić dostęp do witryn użytkownikom korzystającym z niestabilnych sieci. W połączeniu z service workerami możemy tworzyć niezwykle szybkie witryny, które są dostępne offline.
Wskazówki klienta są dostępne tylko w Chrome i przeglądarkach opartych na Chromium, ale można ich używać w taki sposób, aby nie utrudniać działania przeglądarkom, które ich nie obsługują. Rozważ użycie wskazówek klienta, aby tworzyć w pełni inkluzywne i dostosowane do potrzeb użytkowników środowiska, które uwzględniają możliwości urządzeń i sieci, z którymi się łączą. Mamy nadzieję, że inni dostawcy przeglądarek dostrzegą ich wartość i zadeklarują chęć wdrożenia.
Zasoby
- Automatyczne obrazy responsywne z podpowiedziami klienta
- Wskazówki klienta i elastyczne obrazy – co się zmieniło w Chrome 67
- Skorzystaj ze wskazówek dotyczących klienta (Prezentacje)
- Szybkie i lekkie aplikacje dzięki
Save-Data
Dziękujemy Ilyi Grigorikowi, Ericowi Portisowi, Jeffowi Posnickowi, Yoavowi Weissowi i Estelle Weyl za cenne uwagi i poprawki do tego artykułu.