Dostosowywanie do użytkowników przy użyciu wskazówek klienta

Tworzenie witryn, które są szybkie wszędzie, może być trudne. Zróżnicowane możliwości urządzeń i jakość sieci, z którymi się łączą, mogą sprawiać wrażenie nie do pokonania. Chociaż możemy wykorzystywać funkcje przeglądarki do poprawy wydajności wczytywania, jak możemy wiedzieć, na co stać urządzenie użytkownika lub jaką ma jakość połączenia z internetem? Rozwiązaniem są wskazówki klienta.

Wskazówki klienta to zestaw nagłówków żądań HTTP, które umożliwiają nam uzyskanie informacji o tych aspektach urządzenia użytkownika i sieci, z którą jest połączony. Korzystając z tych informacji po stronie serwera, możemy zmienić sposób dostarczania treści na podstawie warunków na urządzeniu lub w sieci. Pomoże nam to tworzyć bardziej zintegrowane usługi.

Wskazówki klienta to kolejna metoda negocjowania treści, która polega na zmianie odpowiedzi na treści na podstawie nagłówków żądań przeglądarki.

Przykładem negocjacji treści jest nagłówek żądania Accept. Określa on typy treści, które przeglądarka rozumie, i które serwer może wykorzystać do negocjowania odpowiedzi. W przypadku żądań obrazów zawartość nagłówka Accept w Chrome to:

Accept: image/webp,image/apng,image/*,*/*;q=0.8

Chociaż wszystkie przeglądarki obsługują formaty obrazów, takie jak JPEG, PNG i GIF, w tym przypadku opcja Akceptuj informuje, że przeglądarka obsługuje również formaty WebPAPNG. Dzięki tym informacjom możemy negocjować najlepsze typy obrazów dla poszczególnych przeglądarek:

<?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, podpowiedzi klienta to kolejny sposób na negocjowanie 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 zasoby niekrytyczne powinny być dostarczane użytkownikom w warunkach złej jakości sieci. W tym przewodniku opisujemy wszystkie dostępne wskazówki i sposoby ich wykorzystania, aby ułatwić użytkownikom odbiór treści.

Włączanie opcji

W przeciwieństwie do nagłówka Accept podpowiedzi klienta nie pojawiają się magicznie (z wyjątkiem Save-Data, o którym opowiemy później). Aby ograniczyć 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 żądanych wskazówek oddzielonych przecinkami, których strona będzie używać do określania wyników kolejnych żądań zasobów. Gdy klient odczytuje ten nagłówek, zobaczy informację „ta witryna chce korzystać z wskazówek klienta Viewport-WidthDownlink”. Nie musisz się martwić o konkretne wskazówki. Zajmiemy się nimi za chwilę.

Te nagłówki zgody możesz skonfigurować w dowolnym języku obsługiwanym na zapleczu. Można na przykład użyć funkcji header języka PHP. Możesz też ustawić te nagłówki z opcją opt-in 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ą 1 z 2 rzeczy: urządzenie, którego używają użytkownicy, oraz sieć, której używają, aby uzyskać dostęp do Twojej witryny. Omówmy pokrótce wszystkie dostępne wskazówki.

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 ekranie danego użytkownika, ale nie wszystkie z nich są zorientowane na multimedia.

Zanim przejdziemy do tej listy, warto poznać kilka kluczowych terminów używanych do opisu ekranów i rozdzielczości multimediów:

Pierwotny rozmiar: rzeczywiste wymiary zasobu multimedialnego. Jeśli na przykład otworzysz obraz w Photoshopie, wymiary widoczne w oknie dialogowym z rozmiarem obrazu opisują jego właściwy rozmiar.

Rozmiar wewnętrzny skorygowany pod kątem gęstości pikseli: wymiary zasobu multimedialnego po skorygowaniu pod kątem gęstości pikseli. Jest to właściwy rozmiar obrazu podzielony przez współczynnik pikseli urządzenia. Weźmy 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 rozmiar obrazu 1x w tym przypadku wynosi 320 x 240, a obrazu 2x – 640 x 480. Jeśli ten znacznik jest parsowany przez klienta zainstalowanego na urządzeniu z udziałem współczynnika pikseli ekranu wynoszącego 2 (np. ekranu Retina), żądany jest obraz 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 reguł CSS i innych czynników układu (takich jak atrybuty widthheight). Załóżmy, że masz element <img>, który wczytuje obraz o rozmiarze wewnętrznym 320 x 240 z poprawką na gęstość, ale ma też właściwości CSS widthheight, do których zastosowano odpowiednio wartości 256px192px. W tym przykładzie zewnętrzny rozmiar elementu <img> wynosi 256 x 192.

Ilustracja przedstawiająca rozmiar bezwzględny w porównaniu z rozmiarem bezwzględnym. Pole o wymiarach 320 x 240 pikseli z etykietą INTRINSIC

SIZE. Wewnątrz znajduje się mniejsze pole o wymiarach 256 x 192 pikseli, które reprezentuje element HTML img z zaaplikowanym kodem CSS. To pole jest oznaczone jako ROZMIAR ZEWNĘTRZNY. Po prawej stronie znajduje się pole z kodem CSS zastosowanym do elementu, który modyfikuje układ elementu img, tak aby jego rozmiar zewnętrzny różnił się od rozmiaru wewnętrznego.
Rysunek 1. Ilustracja przedstawiająca rozmiar bezwzględny i bezwzględny. Obraz uzyskuje swój rozmiar zewnętrzny po zastosowaniu czynników układu. W tym przypadku zastosowanie reguł CSS width: 256px;height: 192px; spowoduje przekształcenie obrazu o właściwym rozmiarze 320 x 240 w obraz o zewnętrznym rozmiarze 256 x 192.

Po zapoznaniu się z terminologią przejdźmy do listy dostępnych wskazówek dotyczących klienta na poszczególnych urządzeniach.

Szerokość widocznego obszaru

Viewport-Width to szerokość widocznego obszaru w pikselach CSS:

Viewport-Width: 320

Ten hint może być używany z innymi hintami dotyczącymi ekranu w celu wyświetlania różnych wersji obrazu (np. przycięć) optymalnych dla określonych rozmiarów ekranu (np. kierunek artystyczny) lub pomijania zasobów, które nie są potrzebne przy bieżącej szerokości ekranu.

DPR

DPR, czyli skrót od współczynnika pikseli urządzenia, podaje stosunek fizycznych pikseli do pikseli CSS ekranu użytkownika:

DPR: 2

Ten podpowiedź jest przydatny podczas wybierania źródeł obrazów, które odpowiadają gęstości pikseli ekranu (jak w przypadku atrybutów x w atrybucie srcset).

Szerokość

Wskazówka Width pojawia się w przypadku zapytań o zasoby obrazów wywołanych przez tagi <img> lub <source> za pomocą atrybutu sizes. sizes informuje przeglądarkę, jaki będzie rozmiar zewnętrzny zasobu; Width używa tego rozmiaru zewnętrznego, aby poprosić o obraz o rozmiarze wewnętrznym, który jest optymalny dla bieżącego układu.

Załóżmy na przykład, że użytkownik żąda strony o szerokości 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 w przypadku wszystkich rozmiarów ekranu). Jeśli opcja Width jest włączona, klient wyśle Width do serwera z prośbą o src:<img>

Width: 544

W tym przypadku klient sugeruje serwerowi, że optymalna szerokość bezwzględna żądanego obrazu powinna wynosić 85% szerokości widoku (272 piksele) pomnożonej przez DPR ekranu (2), co daje 544 piksele.

Ten podpowiedź jest szczególnie skuteczny, ponieważ bierze pod uwagę nie tylko szerokość ekranu skorygowaną pod kątem gęstości, ale też dopasowuje tę ważną informację do rozmiaru zewnętrznego obrazu w ramach układu. Umożliwia to serwerom negocjowanie odpowiedzi obrazów, które są optymalne zarówno dla ekranu, jak dla układu.

Content-DPR

Wiesz już, że ekrany mają współczynnik pikseli urządzenia, ale zasoby mają też własne współczynniki pikseli. W najprostszych przypadkach wyboru zasobów współczynniki pikseli między urządzeniami a zasobami mogą być takie same. Ale! W przypadku, gdy są używane nagłówki DPRWidth, rozmiar zewnętrzny zasobu może prowadzić do sytuacji, w której oba te rozmiary się różnią. Wtedy przydaje się podpowiedź Content-DPR.

W przeciwieństwie do innych wskazówek klienta Content-DPR nie jest nagłówkiem żądania, który serwery mogą używać, ale nagłówkiem odpowiedzi, który serwery muszą wysyłać, gdy do wyboru zasobu używane są wskazówki DPRWidth. 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 skalować dany obraz pod kątem współczynnika pikseli urządzenia i układu. Bez niego obrazy mogą nie skalować się prawidłowo.

Pamięć urządzenia

Technicznie jest to część interfejsu API dotyczącego pamięci urządzenia, Device-Memory, która ujawnia przybliżoną ilość pamięci w GB na bieżącym urządzeniu:

Device-Memory: 2

Możliwe zastosowanie tego podpowiedzi to ograniczenie ilości kodu JavaScript przesyłanego do przeglądarek na urządzeniach z ograniczoną pamięcią, ponieważ JavaScript to typ treści, który zużywa najwięcej zasobów. Możesz też wysyłać obrazy o niższym DPR, ponieważ zajmują one mniej pamięci podczas dekodowania.

Wskazówki dotyczące sieci

Interfejs Network Information API udostępnia kolejną kategorię wskazówek klienta, które opisują wydajność połączenia z siecią 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 o wolnych połączeniach.

RTT

Wskazówka RTT podaje przybliżony czas błądzenia w milisekundach na poziomie aplikacji. Wskazówka RTT, w przeciwieństwie do RTT w warstwie transportowej, obejmuje czas przetwarzania na serwerze.

RTT: 125

Ten podpowiedź jest przydatny, ponieważ opóźnienie ma wpływ na wydajność wczytywania. Dzięki podpowiedzi RTT możemy podejmować decyzje na podstawie szybkości działania sieci, co może przyspieszyć wyświetlanie całej strony (np. przez pominięcie niektórych żądań).

Opóźnienie ma znaczenie dla szybkości wczytywania, ale przepustowość też ma znaczenie. Wskazówka Downlink, wyrażona w megabitach na sekundę (Mb/s), pokazuje przybliżoną prędkość przesyłania danych w dół na połączeniu użytkownika:

Downlink: 2.5

W połączeniu z RTT funkcja Downlink może być przydatna do zmiany sposobu dostarczania treści użytkownikom na podstawie jakości połączenia z internetem.

ECT

Wskazówka ECT oznacza użyty typ połączenia. Jego wartość jest jedną z wymienionych na liście typów połączeń, z których każdy opisuje połączenie w określonym zakresie wartości RTTDownlink.

Ten nagłówek nie podaje rzeczywistego typu połączenia. Nie informuje na przykład, czy brama jest wieżą telefoniczną czy punktem dostępu Wi-Fi. Zamiast tego analizuje opóźnienie i przepustowość bieżącego połączenia oraz określa, któremu profilowi sieci najbardziej je przypomina. Jeśli na przykład połączysz się przez Wi-Fi z wolną siecią, ECT może zostać wypełnione wartością 2g, która jest najbliższym przybliżeniem skutecznego połączenia:

ECT: 2g

Prawidłowe wartości dla ECT to 4g, 3g, 2gslow-2g. Ten podpowiedź może służyć jako punkt wyjścia do oceny jakości połączenia, a następnie do dopracowania za pomocą podpowiedzi RTTDownlink.

Save-Data

Save-Data to nie tyle wskazówka dotycząca warunków w sieci, ile preferencja użytkownika, która mówi, że strony powinny wysyłać mniej danych.

Uważam, że Save-Data należy zaklasyfikować jako podpowiedź sieci, ponieważ wiele czynności, które można z nią wykonać, jest podobnych do innych podpowiedzi sieci. Użytkownicy mogą też włączyć tę funkcję w środowiskach o wysokiej latencji lub niskiej przepustowości. Ten podpowiedź, jeśli jest obecny, zawsze wygląda tak:

Save-Data: on

W Google rozmawialiśmy o tym, co możesz zrobić za pomocą Save-Data. Może to mieć znaczny wpływ na wydajność. To sygnał, że użytkownicy dosłownie proszą o mniejszą liczbę wiadomości. Jeśli weźmiesz pod uwagę ich opinie i zaczniesz działać zgodnie z nimi, użytkownicy to docenią.

Jak zastosować teorię w praktyce

To, co zrobisz z podpowiedziami klienta, zależy od Ciebie. Ponieważ zawierają one tak dużo informacji, masz wiele opcji. Aby zainspirować Cię, pokażemy, jak wskazówki dotyczące klienta mogą pomóc Sconnie Timber, fikcyjnej firmie zajmującej się wyrębem drzewa, która działa na obszarach wiejskich w północno-wschodnich Stanach Zjednoczonych. Jak to często bywa w odległych miejscach, połączenia sieciowe mogą być niestabilne. Właśnie w takich sytuacjach technologie takie jak wskazówki dotyczące klienta mogą naprawdę pomóc użytkownikom.

Obrazy elastyczne

Wszystkie przypadki użycia obrazów elastycznych, z wyjątkiem najprostszych, mogą być skomplikowane. Co zrobić, jeśli masz wiele metod i wariantów tych samych obrazów na różne rozmiary ekranu oraz w różnych formatach? Ten znacznik staje się bardzo skomplikowany bardzo szybko. Łatwo popełnić błąd, zapomnieć lub źle zrozumieć ważne pojęcia (np. sizes).

Chociaż <picture>srcset to niewątpliwie świetne narzędzia, ich tworzenie i utrzymywanie w przypadku złożonych zastosowań może być czasochłonne. Możemy zautomatyzować generowanie znaczników, ale jest to trudne, ponieważ funkcje udostępniane przez <picture> i srcset są na tyle złożone, że ich automatyzacja musi być przeprowadzona w sposób, który zachowuje ich elastyczność.

Wskazówki dla klienta mogą to uprościć. Negocjowanie odpowiedzi dotyczących obrazów z użyciem podpowiedzi klienta może wyglądać tak:

  1. Jeśli jest to odpowiednie w Twoim przypadku, najpierw wybierz sposób prezentacji obrazu (np. obraz z kierunkiem artystycznym), zaznaczając podpowiedź Viewport-Width.
  2. Wybierz rozdzielczość obrazu, zaznaczając podpowiedź Width i DPR oraz wybierając źródło, które pasuje do rozmiaru układu obrazu i gęstości ekranu (podobnie jak w przypadku opisu x i w w srcset).
  3. Wybierz optymalny format pliku obsługiwany przez przeglądarkę (co Acceptpomaga nam w większości przeglądarek).

W przypadku fikcyjnej firmy zajmującej się obróbką drewna opracowałem w PHP prostą procedurę dobierania obrazów w ramach strony responsywnej, która korzysta z wskazówek klienta. Oznacza to, że zamiast wysyłać ten znacznik 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ę ograniczyć listę do tych 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 zastąpione przez mod_rewrite.mod_rewrite Pobiera on nazwę obrazu i dodatkowe parametry, aby pomóc skryptowi backendu wybrać najlepszy obraz w danych warunkach.

Zakładam, że Twoje pierwsze pytanie brzmi „Czy to tylko ponowne wdrożenie funkcji <picture>srcset na zapleczu?”.

W pewnym sensie tak, ale z jednym ważnym wyjątkiem: gdy aplikacja używa podpowiedzi klienta do tworzenia odpowiedzi medialnych, większość (jeśli nie wszystkie) czynności jest znacznie łatwiejsza do zautomatyzowania, co może obejmować usługę (np. sieć CDN), która może to zrobić w Twoim imieniu. W przypadku rozwiązań HTML trzeba natomiast napisać nowe oznaczenia, aby uwzględnić wszystkie przypadki użycia. Oczywiście możesz zautomatyzować generowanie znaczników. Jeśli jednak zmieni się Twój projekt lub wymagania, być może w przyszłości będzie trzeba ponownie przeanalizować strategię automatyzacji.

Wskazówki klienta umożliwiają rozpoczęcie od bezstratnego obrazu w wysokiej rozdzielczości, którego rozmiar można następnie dynamicznie zmieniać, aby uzyskać optymalne rozwiązanie dla dowolnej kombinacji ekranu i schematu. W odróżnieniu od srcset, które wymaga wyliczenia stałej listy możliwych obrazów, z których przeglądarka może wybrać, to podejście może być bardziej elastyczne. Podczas gdy srcset zmusza Cię do oferowania przeglądarkom nieprecyzyjnego zestawu wersji, np. 256w, 512w, 768w i 1024w, rozwiązanie oparte na wskazówkach klienta może wyświetlać wszystkie szerokości bez konieczności stosowania ogromnej ilości znaczników.

Oczywiście nie musisz samodzielnie pisać logiki wyboru obrazu. Cloudinary używa podpowiedzi klienta do tworzenia odpowiedzi obrazowych, gdy używasz parametru w_auto. Zauważyliśmy, że średnio użytkownicy pobierają o 42% mniej bajtów, gdy korzystają z przeglądarek obsługujących podpowiedzi klienta.

Uwaga! Zmiany w wersji na komputery stacjonarne Chrome 67 spowodowały wycofanie obsługi podpowiedzi klienta w innych domenach. Na szczęście te ograniczenia nie dotyczą wersji mobilnych przeglądarki Chrome, a zostaną całkowicie zniesione na wszystkich platformach, gdy zakończymy prace nad zasadami dotyczącymi funkcji.

Pomoc dla użytkowników korzystających z wolnych sieci

Adaptacyjna wydajność to koncepcja polegająca na dostosowywaniu sposobu dostarczania zasobów na podstawie informacji udostępnianych przez klienta. Chodzi tu konkretnie o informacje dotyczące bieżącego stanu połączenia z siecią użytkownika.

W przypadku witryny Sconnie Timber podejmujemy działania, aby zmniejszyć obciążenie sieci, gdy są one wolne. W naszym kodzie back-endu sprawdzamy nagłówki Save-Data, ECT, RTT i Downlink. Następnie generujemy wynik jakości sieci, który pozwala nam określić, czy należy podjąć działania w celu poprawy jakości. Ten 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 Save-Data. Jeśli tak, wartość jest ustawiana na 0, ponieważ zakładamy, że użytkownik chce, abyśmy zrobili wszystko, co możliwe, aby aplikacja była lżejsza i szybsza.

Jeśli jednak nie ma atrybutu Save-Data, przechodzimy dalej i uwzględniamy wartości atrybutów ECT, RTTDownlink, aby obliczyć wynik opisujący jakość połączenia z siecią. Kod źródłowy służący do generowania wyników sieci jest dostępny na GitHubie. Jeśli w jakimś stopniu wykorzystamy wskazówki dotyczące sieci, możemy poprawić wrażenia użytkowników korzystających z wolnych sieci.

Porównanie witryny, która nie korzysta z podpowiedzi klienta, aby dostosować się do wolnego połączenia z internetem (po lewej), z tą samą witryną, która korzysta z podpowiedzi (po prawej).
Rysunek 2. Strona „O nas” w witrynie firmy lokalnej. Podstawowe działanie obejmuje czcionki internetowe, JavaScript do obsługi karuzeli i zachowania harmonijki, a także obrazy treści. To wszystko, co możemy pominąć, gdy warunki sieciowe są zbyt wolne, aby wczytać je szybko.

Gdy witryny dostosowują się do informacji zawartych w wskazówkach klienta, nie musimy stosować podejścia „wszystko albo nic”. Możemy inteligentnie decydować, które zasoby wysłać. Możemy zmodyfikować naszą logikę wyboru obrazów dostosowanych do wyświetlacza, aby przesyłać obrazy o niższej jakości dla danego wyświetlacza, co przyspieszy wczytywanie, gdy jakość sieci jest niska.

W tym przykładzie widać wpływ wskazówek klienta na poprawę wydajności witryn w wolniejszych sieciach. Poniżej znajduje się kaskada WebPagetest witryny w wolnej sieci, która nie dostosowuje się do wskazówek klienta:

Kaskada WebPagetest dla witryny SconnieTimber wczytującej wszystkie zasoby przy wolnym połączeniu z internetem.
Rysunek 3. Witryna zużywająca dużo zasobów, która wczytuje obrazy, skrypty i czcionki przy wolnym połączeniu.

A teraz kaskada dla tej samej witryny na tym samym wolnym połączeniu, ale tym razem witryna używa wskazówek klienta, aby wyeliminować niekrytyczne zasoby strony:

Kaskada WebPagetest witryny SconnieTimber, która korzysta z podpowiedzi klienta, aby nie wczytywać zasobów niekrytycznych przy wolnym połączeniu z siecią.
Rysunek 4. Ta sama witryna na tym samym połączeniu, z wykluczeniem zasobów „dodatkowych” na rzecz szybszego wczytywania.

Wskazówki klienta skróciły czas wczytywania strony z ponad 45 sekund do mniej niż jednej dziesiątej tego czasu. W tym scenariuszu trudno przecenić zalet podpowiedzi klienta, które mogą być bardzo przydatne dla użytkowników szukających ważnych informacji w wolnych sieciach.

Ponadto w przypadku przeglądarek, które nie obsługują wskazówek klienta, można używać tych wskazówek bez wpływu na wrażenia użytkowników. Jeśli na przykład chcemy dostosować dostarczanie zasobów, korzystając z wartości podpowiedzi ECT, a jednocześnie zapewniając pełną funkcjonalność w nieobsługiwanych przeglądarkach, możemy ustawić wartość domyślną 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" to połączenie sieci o najwyższej jakości, które opisuje nagłówek ECT. Jeśli zainicjujemy $ect jako "4g", przeglądarki, które nie obsługują podpowiedzi klienta, nie zostaną tym dotknięte. Zaakceptuj, to jest to!

Uważaj na skrytki!

Zawsze, gdy zmieniasz odpowiedź na podstawie nagłówka HTTP, musisz wiedzieć, jak pamięć podręczna będzie obsługiwać przyszłe pobieranie tego zasobu. Nagłówek Vary jest tutaj niezbędny, ponieważ służy do kluczowania wpisów w pamięci podręcznej do wartości nagłówków żądania. Krótko mówiąc, jeśli modyfikujesz jakąkolwiek odpowiedź na podstawie danego nagłówka żądania HTTP, prawie zawsze musisz uwzględnić ten nagłówek w Varyna przykład:

Vary: DPR, Width

Jest jednak duża uwaga: nigdy nie używaj Vary odpowiedzi do umieszczania w pamięci podręcznej w przypadku nagminnie zmieniającego się nagłówka (np. Cookie), ponieważ te zasoby stają się praktycznie niemożliwe do umieszczenia w pamięci podręcznej. Mając to na uwadze, możesz unikać Varying na nagłówkach wskazówek klienta, takich jak RTT czy Downlink, ponieważ są to czynniki połączenia, które mogą się dość często zmieniać. Jeśli chcesz zmodyfikować odpowiedzi na podstawie tych nagłówków, rozważ wpisanie tylko nagłówka ECT, co zminimalizuje błędy pamięci podręcznej.

Oczywiście dotyczy to tylko sytuacji, gdy odpowiedź jest przechowywana w pamięci podręcznej. Na przykład nie będziesz przechowywać w pamięci podręcznej komponentów HTML, jeśli ich zawartość jest dynamiczna, ponieważ może to pogorszyć wrażenia użytkownika podczas powtarzających się wizyt. W takich przypadkach możesz modyfikować takie odpowiedzi w dowolny sposób, nie martwiąc się o to, czy Vary.

Wskazówki dotyczące klienta w usługach działających w tle

Negocjacje treści nie dotyczą już tylko serwerów. Ponieważ serwisowe workery 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 service workerfetch 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 został przez Ciebie wybrany. Nie jest to jednak jedyny sposób na uzyskanie niektórych informacji. Wskazówki dotyczące konkretnej sieci można odczytać z tych odpowiednich właściwości 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`
Wtyczki Imagemin dla typów plików.

Te interfejsy API nie są dostępne wszędzie, dlatego przed użyciem danej funkcji skontaktuj się z inoperatorem:

if ('connection' in navigator) {
 
// Work with netinfo API properties in JavaScript!
}

Tutaj możesz użyć logiki podobnej do tej, której używasz na serwerze, z tą różnicą, że nie musisz negocjować treści z podpowiedziami klienta. Pracownicy obsługi klienta mogą zwiększyć szybkość i odporność usług dzięki dodatkowej możliwości wyświetlania treści, gdy użytkownik jest offline.

Podsumowanie

Dzięki wskazówkom klienta możemy przyspieszyć działanie aplikacji w sposób stopniowy. Możemy wyświetlać multimedia na podstawie możliwości urządzenia użytkownika w sposób, który ułatwia wyświetlanie obrazów responsywnych bardziej niż korzystanie z funkcji <picture>srcset, zwłaszcza w skomplikowanych przypadkach użycia. Dzięki temu nie tylko skracamy czas i zmniejszamy nakład pracy po stronie programistów, ale też optymalizujemy zasoby, zwłaszcza obrazy, w sposób, który pozwala dopasować je do ekranów użytkowników z większą precyzją niż i srcset.

Co ważniejsze, możemy wykrywać słabe połączenia sieciowe i zapewnić użytkownikom płynność działania, zmieniając to, co i jak wysyłamy. Może to znacznie ułatwić użytkownikom korzystanie z witryn w sieciach o słabej jakości. W połączeniu z usługami w tle możemy tworzyć niezwykle szybkie witryny, które są dostępne w trybie 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 obciążać przeglądarek, które ich nie obsługują. Zastanów się nad użyciem wskazówek klienta, aby tworzyć naprawdę wszechstronne i elastyczne rozwiązania, które uwzględniają możliwości urządzeń użytkowników i sieci, z którymi się łączą. Mamy nadzieję, że inni producenci przeglądarek również dostrzegą ich wartość i zdecydują się na ich wdrożenie.

Zasoby

Dziękujemy Ilya Grigorik, Ericowi Porisowi, Jeffowi Posnickowi, Yoavowi WeissowiEstelle Weyl za cenne opinie i poprawki dotyczące tego artykułu.