Tworzenie szybkich witryn działających w każdym miejscu może nie być łatwe. Mnóstwo możliwości urządzeń i jakość sieci, z którymi się łączą, sprawiają, że wydaje się, że nie jest to łatwe. O ile możemy korzystać z funkcji przeglądarki w celu poprawy wydajności wczytywania, jak wiemy, jakie możliwości ma urządzenie użytkownika i jaka jest jakość jego połączenia sieciowego? Rozwiązaniem są wskazówki dla klienta.
Wskazówki dotyczące klienta to zestaw nagłówków żądań HTTP, które zapewniają nam wgląd w te aspekty urządzenia użytkownika i sieci, z którą jest połączone. Dzięki korzystaniu z tych informacji po stronie serwera możemy zmienić sposób dostarczania treści na podstawie warunków związanych z urządzeniem lub siecią. Dzięki temu możemy zwiększać integrację społeczną.
Chodzi o negocjowanie treści
Wskazówki klienta to kolejna metoda negocjowania treści, która polega na zmienianiu odpowiedzi dotyczących treści na podstawie nagłówków żądań przeglądarki.
Przykładem negocjowania treści jest użycie nagłówka żądania Accept. Opisuje typy treści rozpoznawanych przez przeglądarkę, których serwer może używać do negocjowania odpowiedzi. W przypadku żądań obrazu zawartość nagłówka Accept 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 przycisk Accept informuje w tym przypadku, że przeglądarka również obsługuje WebP i APNG. Dzięki tym informacjom 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!">
Tak jak w przypadku Accept, wskazówki dla klientów stanowią kolejne narzędzie do negocjowania treści, ale w kontekście możliwości urządzenia i warunków sieci. Dzięki wskazówkom dotyczącym klienta możemy podejmować decyzje dotyczące wydajności po stronie serwera na podstawie indywidualnych potrzeb użytkownika, np. zdecydować, czy użytkownikom ze słabymi warunkami sieciowymi powinny zostać udostępnione niekrytyczne zasoby. W tym przewodniku omówimy wszystkie dostępne wskazówki i opisujemy kilka sposobów 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 dla klienta nie pojawiają się tylko magicznie (z wyjątkiem funkcji Save-Data, którą omówimy później). Aby nagłówki żądań były jak najmniejsze, musisz zdecydować, które wskazówki klienta chcesz otrzymywać, wysyłając nagłówek Accept-CH, gdy użytkownik wysyła żądanie zasobu:
Accept-CH: Viewport-Width, Downlink
Wartość pola Accept-CH jest rozdzielaną przecinkami listą żądanych wskazówek, których witryna będzie używać do określania wyników kolejnego żądania zasobów. Gdy klient odczytuje ten nagłówek, słyszy odpowiedź „Ta witryna potrzebuje wskazówek dla klienta Viewport-Width i Downlink”. Nie musisz przejmować się konkretnymi wskazówkami.
Za chwilę je omówimy.
Nagłówki modułu zgody możesz ustawić w dowolnym języku backendu. Można na przykład użyćfunkcjiheaderPHP.
Możesz nawet ustawić nagłówki modułu zgody za pomocą atrybutu http-equiv w tagu <meta>:
<meta http-equiv="Accept-CH" content="Viewport-Width, Downlink" />
Wszystkie wskazówki klienta!
Wskazówki dotyczące klienta opisują jedną z dwóch kwestii: urządzenie, którego Twoi użytkownicy używają, oraz sieć, z której korzystają, aby uzyskać dostęp do Twojej witryny. Omówmy pokrótce wszystkie dostępne wskazówki.
Wskazówki dotyczące urządzeń
Niektóre wskazówki dla klienta opisują cechy urządzenia użytkownika, zwykle cechy ekranu. Niektóre z nich ułatwiają wybór optymalnych zasobów multimedialnych dla danego użytkownika, ale nie wszystkie muszą być ściśle związane z multimediami.
Zanim przejdziemy do tej listy, warto zapoznać się z kilkoma kluczowymi terminami opisującymi ekrany i rozdzielczość multimediów:
Rozmiar wewnętrzny: rzeczywiste wymiary zasobu multimedialnego. Jeśli np. otworzysz obraz w programie Photoshop, wymiary widoczne w oknie z rozmiarem obrazu określają jego rozmiar wewnętrzny.
Rozmiar wewnętrzny z poprawioną gęstością: wymiary zasobu multimedialnego po korekcie z uwzględnieniem gęstości pikseli. Jest to wewnętrzny rozmiar obrazu podzielony przez współczynnik proporcji piksela urządzenia. Przeanalizujmy na przykład ten znacznik:
<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 wewnętrzny rozmiar obrazu w usłudze 1x to w tym przypadku 320 x 240, a wewnętrzny obraz 2x to 640 x 480. Jeśli te znaczniki są analizowane przez klienta zainstalowanego na urządzeniu ze współczynnikiem pikseli urządzenia wynoszącym 2 (np. wyświetlaczem Retina), jest wysyłane żądanie obrazu 2x. Rozmiar wewnętrzny z poprawioną gęstością
obrazu 2x to 320 x 240, ponieważ 640 x 480 podzielone przez 2 to 320 x 240.
Rozmiar zewnętrzny: rozmiar zasobu multimedialnego po zastosowaniu do niego CSS i innych czynników układu (np. atrybutów width i height). Załóżmy, że masz element <img>, który wczytuje obraz o rozmiarze wewnętrznym 320 x 240 dostosowanym do gęstości, ale ma też właściwości CSS width i height z wartościami 256px i 192px. W tym przykładzie rozmiar zewnętrzny tego elementu <img> zmieni się na 256 x 192.
width: 256px; i height: 192px; powoduje przekształcenie obrazu o wymiarach wewnętrznych 320 x 240 w obraz o wymiarach 256 x 192 o wymiarach zewnętrznych.Najpierw znamy nieco terminologii, dlatego przyjrzymy się dostępnym wskazówkom klienta dla konkretnych urządzeń.
Szerokość widocznego obszaru
Viewport-Width to szerokość widocznego obszaru użytkownika w pikselach CSS:
Viewport-Width: 320
Można jej używać razem z innymi wskazówkami dotyczącymi konkretnego ekranu, aby dostosować obraz do różnych rozmiarów ekranu (tj. przycinać go) lub pominąć zasoby, które są niepotrzebne przy danej szerokości ekranu.
Demokratyczna Republika Ludowo-Demokratyczna
DPR, czyli współczynnik pikseli urządzenia, podaje stosunek liczby pikseli fizycznych do liczby pikseli CSS na ekranie użytkownika:
DPR: 2
Ta wskazówka jest przydatna przy wybieraniu źródeł obrazów odpowiadających gęstości pikseli ekranu (tak jak w przypadku deskryptorów x w atrybucie srcset).
Szerokość
Wskazówka Width pojawia się w przypadku żądań zasobów graficznych wywołanych przez tagi <img> lub <source> przy użyciu atrybutu sizes.
sizes informuje przeglądarkę o zewnętrznym rozmiarze zasobu. Width wykorzystuje ten rozmiar, aby zażądać obrazu o wbudowanym rozmiarze optymalnym dla bieżącego układu.
Załóżmy np., że użytkownik wysyła żądanie strony z ekranem o szerokości 320 pikseli CSS i wartością DPR równą 2. Urządzenie wczytuje dokument z elementem <img> zawierającym atrybut sizes o wartości 85vw (czyli to 85% szerokości widocznego obszaru
w przypadku wszystkich rozmiarów ekranu). Jeśli wskazówka Width została zaakceptowana, klient wyśle do serwera tę wskazówkę Width z żądaniem identyfikatora src platformy <img>:
Width: 544
W tym przypadku klient informuje serwer, że optymalna wewnętrzna szerokość żądanego obrazu to 85% szerokości widocznego obszaru (272 piksele) pomnożone przez DPR (2), co daje 544 piksele.
Ta wskazówka jest szczególnie skuteczna, ponieważ uwzględnia nie tylko szerokość ekranu dopasowaną do gęstości ekranu, ale także uzgadnia tę kluczową informację z zewnętrznym rozmiarem obrazu w układzie. Daje to serwerom możliwość negocjowania odpowiedzi graficznych, które są optymalne zarówno dla ekranu, jak iukładu.
Treści-DPR
Choć ekrany mają proporcje pikseli urządzenia, zasoby mają też swoje własne proporcje pikseli. W najprostszym przypadku użycia zasobów stosunek pikseli między urządzeniami a zasobami może być taki sam. Ale! W sytuacjach, gdy odtwarzane są zarówno nagłówki DPR, jak i Width, zewnętrzny rozmiar zasobu może prowadzić do powstania sytuacji, w których oba nagłówki się różnią. W tym miejscu sprawdza się wskazówka Content-DPR.
W przeciwieństwie do innych wskazówek dotyczących klienta Content-DPR nie jest nagłówkiem żądania używanym przez serwery, ale serwery nagłówka odpowiedzi muszą wysłać go zawsze, gdy podczas wybierania zasobu używane są wskazówki DPR i Width. Wartość Content-DPR powinna być wynikiem tego równania:
Content-DPR = [wybrany rozmiar zasobu obrazu] / ([Width] / [DPR])
Gdy zostanie wysłany nagłówek żądania Content-DPR, przeglądarka będzie wiedzieć, jak przeskalować dany obraz pod kątem proporcji ekranu i układu. Bez niego obrazy mogą się nie skalować.
Pamięć urządzenia
Platforma Device-Memory, pod względem technicznym, należąca do interfejsu Device Memory API, pokazuje przybliżoną ilość pamięci
dostępnej dla bieżącego urządzenia w GiB:
Device-Memory: 2
Możliwym przykładem zastosowania tej wskazówki jest zmniejszenie ilości kodu JavaScript wysyłanego do przeglądarek na urządzeniach z ograniczoną pamięcią, ponieważ JavaScript to typ zawartości, który zazwyczaj wczytuje najwięcej zasobów. Możesz też wysyłać zdjęcia o niższej jakości DPR, ponieważ wykorzystują one mniej pamięci do dekodowania.
Wskazówki dotyczące sieci
Interfejs Network Information API udostępnia kolejną kategorię wskazówek klienta, które opisują wydajność połączenia sieciowego użytkownika. Uważam, że są to najbardziej przydatne wskazówki. Dzięki nim możemy dostosowywać środowisko do potrzeb użytkowników, zmieniając sposób, w jaki dostarczamy zasoby klientom korzystającym z wolnego połączenia.
RTT
Wskazówka RTT podaje w warstwie aplikacji przybliżony czas podróży w obie strony (w milisekundach). Wskazówka RTT, w przeciwieństwie do RTT w warstwie transportowej, uwzględnia czas przetwarzania serwera.
RTT: 125
Ta wskazówka jest przydatna ze względu na rolę opóźnienia wczytywania.
Dzięki wskazówkom RTT możemy podejmować decyzje na podstawie czasu reagowania sieci, co może przyspieszyć dostarczanie całego interfejsu (np. przez pominięcie niektórych żądań).
Link odbierany
Choć opóźnienie jest ważne dla wydajności wczytywania, przepustowość ma również wpływ na wydajność. Wskazówka Downlink, wyrażona w megabitach na sekundę (Mb/s), wskazuje przybliżoną szybkość pobierania połączenia użytkownika:
Downlink: 2.5
W połączeniu z zasadą RTT Downlink może przydać się do zmiany sposobu dostarczania treści do użytkowników na podstawie jakości połączenia sieciowego.
ECT
Wskazówka ECT oznacza Effective Connection Type (Efektywny typ połączenia). Jego wartość to jedna z podanych list typów połączeń, z których każdy opisuje połączenie mieszczące się w określonych zakresach zarówno wartości RTT, jak i Downlink.
Ten nagłówek nie wyjaśnia, jaki jest rzeczywisty typ połączenia – na przykład nie informuje, czy brama to stacja bazowa, czy punkt dostępu Wi-Fi. Analizuje natomiast opóźnienie i przepustowość bieżącego połączenia, a następnie ustala, jaki profil sieciowy do niego najbardziej przypomina. Jeśli na przykład łączysz się przez Wi-Fi z wolną siecią, w polu ECT może się pojawić wartość 2g, która jest najbliższa wartościom efektywnego połączenia:
ECT: 2g
Prawidłowe wartości pola ECT to 4g, 3g, 2g i slow-2g. Ta wskazówka może służyć jako punkt wyjścia do oceny jakości połączenia, a następnie do zastosowania wskazówek RTT i Downlink.
Zapisz dane
Parametr Save-Data nie jest raczej wskazówką dotyczącą warunków sieciowych, tylko wskazówką użytkownika, która twierdzi, że strony powinny przesyłać mniej danych.
Wolę klasyfikować usługę Save-Data jako wskazówkę dotyczącą sieci, ponieważ wiele czynności, które można z nią zrobić, przypomina te związane z innymi wskazówkami dotyczącymi sieci. Użytkownicy mogą też włączyć tę funkcję w środowiskach o dużym opóźnieniach lub niskiej przepustowości. Ta wskazówka zawsze wygląda tak:
Save-Data: on
Tutaj rozmawialiśmy o możliwościach narzędzia Save-Data.
Wpływ może być ogromny. To sygnał, że użytkownicy
proszą o przesyłanie mniejszej ilości treści. Jeśli wysłuchasz tego sygnału i zaczniesz go wykorzystać, użytkownicy docenią to.
Jak zastosować teorię w praktyce
Sposób, w jaki będziesz korzystać ze wskazówek klientów, zależy od Ciebie. Ponieważ oferują one tak wiele informacji, masz wiele możliwości. Zobaczmy, co można wykorzystać dzięki wskazówkom klienta dla Sconnie Timber, fikcyjnej firmy zajmującej się produkcją drewna z siedzibą w wiejskiej okolicy Środkowego Zachodu. Tak jak to często bywa w odległych obszarach, połączenia sieciowe mogą być słabe. To właśnie technologia, np. wskazówki dotyczące klientów, może mieć naprawdę duże znaczenie dla użytkowników.
Obrazy elastyczne
Wszystkie oprócz najprostszych przypadków użycia obrazów elastycznych bywają skomplikowane. Co się stanie, jeśli masz kilka wersji i tych samych obrazów na potrzeby różnych rozmiarów ekranów i różnych formatów? Ten znacznik bardzo bardzo
szybki.
Łatwo się pomylić, a ważne pojęcia (np. sizes) łatwo zapomnieć lub źle zrozumieć.
<picture> i srcset to niewątpliwie świetne narzędzia, ale ich tworzenie i utrzymywanie może być czasochłonne w złożonych przypadkach użycia. Możemy zautomatyzować generowanie znaczników, ale jest to utrudnione, ponieważ funkcje <picture> i srcset są na tyle złożone, że automatyzacja musi być wykonywana w sposób zapewniający zachowanie elastyczności.
Wskazówki dla klientów mogą to ułatwić. Negocjowanie odpowiedzi graficznych za pomocą wskazówek dla klienta może wyglądać tak:
- W odpowiednich przypadkach najpierw wybierz Obróbkę obrazu (np. zdjęcia skierowane do sztuki), sprawdzając wskazówkę
Viewport-Width. - Wybierz rozdzielczość obrazu, sprawdzając wskazówkę
WidthiDPR. Następnie wybierz źródło, które pasuje do rozmiaru układu i gęstości ekranu (podobnie jak działają deskryptoryxiwwsrcset). - Wybierz najbardziej optymalny format pliku obsługiwany przez przeglądarkę (
Acceptpomaga nam to w większości przeglądarek).
Na potrzeby fikcyjnego klienta firmy z branży drewna stworzyłem naiwną procedurę elastycznego wyboru obrazów w języku PHP, która korzysta ze wskazówek klienta. Oznaczało to, że zamiast wysyłać te znaczniki 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>
Udało mi się ograniczyć je do następujących, w zależności od obsługi poszczególnych przeglądarek:
<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, po którym następują parametry przepisane przez mod_rewrite. Przyjmuje ona nazwę pliku obrazu i dodatkowe parametry, dzięki którym skrypt backendu może wybrać najlepszy obraz w danych warunkach.
Pomyślałem: „Ale czy nie jest to po prostu ponowne wdrożenie <picture> i srcset na zapleczu?” to pierwsze pytanie.
W pewnym sensie, ale z ważną różnicą: gdy aplikacja korzysta ze wskazówek klienta do tworzenia odpowiedzi multimedialnych, większość czynności (a nie wszystkie) jest znacznie łatwiejsza do zautomatyzowania. Może to być usługa (np. CDN), która może to robić w Twoim imieniu. W przypadku rozwiązań HTML trzeba napisać nowe znaczniki, które będą pasować do każdego przypadku użycia. Oczywiście, możesz zautomatyzować generowanie znaczników. Jeśli jednak Twój wygląd lub wymagania ulegną zmianie, konieczne może być ponowne sprawdzenie strategii automatyzacji.
Dzięki wskazówkom klienta można zacząć od bezstratnego obrazu o wysokiej rozdzielczości, którego rozmiar można następnie dynamicznie zmieniać, tak by uzyskać optymalny rozmiar dla dowolnej kombinacji ekranu i układu. W przeciwieństwie do zasady srcset, która wymaga wyliczania stałej listy możliwych obrazów do wyboru przez przeglądarkę, to podejście może być bardziej elastyczne. Podczas gdy właściwość srcset wymaga podania przeglądarkom szerokiego zestawu wariantów, np. 256w, 512w, 768w i 1024w, rozwiązanie oparte na podpowiedziach klienta może wyświetlać reklamy na wszystkich szerokościach bez gigantycznego stosu znaczników.
Oczywiście nie musisz samodzielnie tworzyć logiki wyboru obrazów. Cloudinary wykorzystuje wskazówki dotyczące klienta do tworzenia odpowiedzi graficznych, gdy używasz parametru w_auto. Zaobserwowano, że mediana użytkowników pobierających o 42% mniej bajtów podczas korzystania z przeglądarek obsługujących wskazówki dotyczące klienta.
Ale zachowajcie ostrożność! Zmiany w komputerowej wersji Chrome 67 zakończyły obsługę wskazówek dla klientów z innych domen. Na szczęście te ograniczenia nie wpływają na mobilne wersje Chrome i zostaną całkowicie zniesione na wszystkich platformach po zakończeniu pracy nad zasadą funkcji.
Pomoc dla użytkowników korzystających z wolniejszych sieci
Wydajność adaptacyjna polega na dostosowywaniu sposobu dostarczania zasobów na podstawie informacji udostępnionych nam przez klienta we wskazówkach klienta, a w szczególności informacji o bieżącym stanie połączenia sieciowego użytkownika.
W przypadku obaw związanych z witryną Sconnie Timber staramy się zmniejszyć obciążenie w przypadku powolnych sieci. W kodzie zaplecza sprawdzamy nagłówki Save-Data, ECT, RTT i Downlink. Następnie generujemy wynik jakości sieci, na podstawie którego możemy określić, czy należy podjąć interwencję w celu poprawy wrażeń użytkownika. Wynik tej sieci mieści się w przedziale od 0 do 1, gdzie 0 to najgorsza możliwa jakość sieci, a 1 to najlepsza.
Początkowo sprawdzamy, czy Save-Data jest dostępny. Jeśli tak, wynik jest ustawiany na 0, ponieważ zakładamy, że użytkownik chce, abyśmy zrobili wszystko, co jest potrzebne, aby korzystanie z aplikacji było prostsze i szybsze.
Jeśli jednak brakuje Save-Data, przechodzimy dalej i ważamy wartości wskazówek ECT, RTT i Downlink, aby obliczyć wynik opisujący jakość połączenia sieciowego. Kod źródłowy generowania wyników sieci jest dostępny na GitHubie. Wniosek jest taki, że jeśli w jakiś sposób wykorzystamy wskazówki związane z siecią, będziemy mogli ulepszyć ich działanie dla użytkowników, którzy korzystają z wolniejszych sieci.
Gdy witryna dostosowuje się do informacji podawanych przez klientów, nie musimy stosować podejścia „wszystko albo nic”. Możemy samodzielnie zdecydować, które zasoby chcemy wysłać. Możemy zmodyfikować nasz mechanizm elastycznego wyboru obrazów, aby na danym wyświetlaczu wysyłać obrazy w niższej jakości. Pozwoli to przyspieszyć wczytywanie w przypadku słabej jakości sieci.
W tym przykładzie widzimy wpływ wskazówek dla klientów na poprawę wydajności witryn w wolniejszych sieciach. Poniżej znajduje się kaskada witryny w powolnej sieci, która nie dostosowuje się do wskazówek dotyczących klienta:
Teraz witryna z tym samym wolnym połączeniem ma teraz kaskadę dla tej samej witryny, ale tym razem korzysta ze wskazówek dotyczących klienta, aby wyeliminować mniej istotne zasoby:
Wskazówki dotyczące klienta skróciły czas wczytywania strony z ponad 45 sekund do mniej niż 1/10 tego czasu. W tym scenariuszu nie da się podkreślić zalet wskazówek dotyczących klientów i mogą być bardzo przydatne dla użytkowników szukających kluczowych informacji w powolnych sieciach.
Można też korzystać ze wskazówek dotyczących klienta, nie powodując problemów w przypadku przeglądarek, które ich nie obsługują. Jeśli np. chcesz dostosować dostarczanie zasobów na podstawie wartości wskazówki ECT, a jednocześnie zapewnić pełną funkcjonalność użytkownikom nieobsługiwanym przeglądarek, możemy ustawić wartość domyślną, np.:
// Set the ECT value to "4g" by default.
$ect = isset($_SERVER["HTTP_ECT"]) ? $_SERVER["HTTP_ECT"] : "4g";
W tym przypadku "4g" reprezentuje najwyższej jakości połączenie sieciowe opisane w nagłówku ECT. Zainicjowanie $ect za pomocą polecenia "4g" nie będzie miało wpływu na przeglądarki, które nie obsługują wskazówek dotyczących klienta. Wyraź zgodę!
Uważaj na te pamięci podręczne!
Za każdym razem, gdy zmieniasz odpowiedź na podstawie nagłówka HTTP, musisz wiedzieć, jak pamięci podręczne będą obsługiwać przyszłe pobieranie tego zasobu. Nagłówek Vary jest tu niezbędny, ponieważ kluczuje wpisy pamięci podręcznej zgodnie z wartościami przekazanych do niego nagłówków żądań. Mówiąc prościej, gdy zmodyfikujesz odpowiedź na podstawie danego nagłówka żądania HTTP, prawie zawsze uwzględnij żądanie tego nagłówka w Vary w taki sposób:
Vary: DPR, Width
Jest jednak duże zastrzeżenie: nie warto Vary umieszczać w pamięci podręcznej odpowiedzi w często zmieniającym się nagłówku (np. Cookie), bo takie zasoby w praktyce nie są zapisywane w pamięci podręcznej. Dlatego lepiej unikać Vary nagłówków wskazówek dla klienta, takich jak RTT czy Downlink, ponieważ są to czynniki związane z połączeniem, które często się zmieniają. Jeśli chcesz zmodyfikować odpowiedzi z tych nagłówków, rozważ kluczowanie tylko nagłówka ECT, co minimalizuje braki w pamięci podręcznej.
Oczywiście ma to zastosowanie tylko wtedy, gdy zapisujesz odpowiedź w pamięci podręcznej.
Zasoby HTML nie mogą być np. zapisywane w pamięci podręcznej, jeśli ich zawartość jest dynamiczna, ponieważ może to negatywnie wpłynąć na wrażenia użytkownika przy kolejnych wizytach. W takich przypadkach możesz zmieniać te odpowiedzi na dowolny temat, jeśli uznasz to za konieczne. Nie musisz się przejmować usługą Vary.
Wskazówki dotyczące klienta w mechanizmach Service Worker
Negocjowanie treści nie jest już dostępne tylko w przypadku serwerów. Mechanizmy Service Worker działają jak serwery proxy między klientami a serwerami, dlatego masz kontrolę nad sposobem dostarczania zasobów za pomocą JavaScriptu. Dotyczy to też wskazówek dla klientów. W zdarzeniu fetch skryptu service worker możesz użyć metody request.headers.get obiektu event do odczytu nagłówków żądań 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 odczytywać każdy nagłówek wskazówek dla klienta. Chociaż nie jest to jedyny sposób,
w jaki możesz uzyskać część tych informacji. Wskazówki specyficzne dla sieci można odczytać w tych równoważnych właściwościach JavaScript w obiekcie navigator:
| Wskazówka klienta | Odpowiednik JS |
|---|---|
| „ECT” | `navigator.connection.effectiveType` |
| „RTT” | „navigator.connection.rtt” |
| Zapisz dane | `navigator.connection.saveData` |
| Link w dół | `navigator.connection.downlink` |
| `Pamięć-urządzenia` | „navigator.deviceMemory” |
Te interfejsy API nie są dostępne wszędzie tam, gdzie trzeba sprawdzić funkcje za pomocą operatora in:
if ('connection' in navigator) {
// Work with netinfo API properties in JavaScript!
}
Możesz tutaj użyć logiki podobnej do tej na serwerze, z tą różnicą, że nie potrzebujesz serwera do negocjowania treści z wykorzystaniem wskazówek dla klienta. Mechanizmy Service Worker pozwalają na przyspieszenie działania i zwiększenie odporności użytkownika dzięki dodatkowej możliwości wyświetlania treści, gdy użytkownik jest offline.
Podsumowanie
Dzięki wskazówkom dotyczącym klientów możemy przyspieszyć działanie i usprawnić korzystanie z usług w stopniowy sposób. Możemy wyświetlać multimedia na podstawie możliwości urządzenia użytkownika w sposób, który ułatwia wyświetlanie elastycznych obrazów niż poleganie na technologii <picture> i srcset, zwłaszcza w złożonych przypadkach. Dzięki temu możemy nie tylko skrócić czas i nakład pracy po stronie programistycznej, ale też zoptymalizować zasoby, a zwłaszcza obrazy, w sposób, który pozwala precyzyjniej kierować reklamy na ekrany użytkowników niż w przypadku metod
Co ważniejsze, możemy wychwytywać słabe połączenia sieciowe i wypełniać luki pomiędzy użytkownikami, modyfikując to, co wysyłasz oraz w jaki sposób to przekazujemy. Może to znacznie ułatwić dostęp do witryn użytkownikom w łagodnych sieciach. W połączeniu z mechanizmami Service Worker możemy tworzyć niezwykle szybkie strony dostępne offline.
Wskazówki dotyczące klienta są dostępne tylko w Chrome i przeglądarkach opartych na Chromium. Można jednak z nich korzystać w sposób, który nie obciąża przeglądarek, które ich nie obsługują. Warto korzystać ze wskazówek klientów, aby tworzyć usługi, które są naprawdę inkluzywne i elastyczne. Mają uwzględniać możliwości urządzeń każdego użytkownika oraz sieci, z którymi się łączy. Być może inni dostawcy przeglądarek doceni ich wartość i wykażą chęć ich wdrożenia.
Zasoby
- Automatyczne obrazy elastyczne ze wskazówkami klienta
- Wskazówki dotyczące klientów i obrazy elastyczne – co się zmieniło w Chrome 67
- Skorzystaj z podpowiedzi (klienta) (Prezentacje)
- Przesyłanie szybkich i lekkich aplikacji w
Save-Data
Dziękujemy Ilyi Grigorik, Ericowi Portis, Jeffowi Posnick, Yoavowi Weiss i Estelle Weyl za ich cenne opinie i zmiany w tym artykule.