Żądanie wskazówek dla klienta Save-Data
nagłówek
w przeglądarkach Chrome, Opera i Yandex
szybsze działanie aplikacji w przypadku użytkowników, którzy włączyli tryb oszczędzania danych w przeglądarce.
Konieczność tworzenia uproszczonych stron
Wszyscy są zdania, że szybsze i lżejsze strony internetowe są bardziej satysfakcjonujące dla użytkownika, ułatwiają zrozumienie treści i ich utrwalenie oraz wzrost przychodów i liczby konwersji. Google badania wykazały, „...zoptymalizowane strony ładują się 4 razy szybciej niż strona oryginalna i wykorzystują 80% mniej bajtów. Szybsze wczytywanie spowodowało również wzrost o 50% i zwiększają ruch na tych stronach”.
Mimo że liczba połączeń 2G jest wreszcie odrzucenie, Sieć 2G pozostała siecią dominującą technologia w 2015 r. Sieci 3G i 4G są coraz bardziej dostępne i coraz lepiej dostępne ale związane z tym koszty własności i ograniczenia sieci wciąż mają istotne znaczenie dla setek milionów użytkowników.
To są solidne argumenty przemawiające za optymalizacją strony.
Istnieją alternatywne metody zwiększania szybkości witryny bez bezpośredniego programisty takie jak przeglądarki proxy i usługi transkodowania. Chociaż taki są dość popularne, ale mają też poważne wady. (a czasem niedopuszczalne) kompresję obrazów i tekstu, brak możliwości przetworzenia bezpiecznych stron (HTTPS) i optymalizować tylko strony otwierane po kliknięciu wyniku wyszukiwania; i innych. Popularność tych usług również wskazuje, że deweloperzy nie są prawidłowo zaspokajani przez duże zapotrzebowanie użytkowników na szybkie i łatwe w obsłudze produkty. aplikacji i stron. Osiągnięcie tego celu jest jednak trudne i czasami .
Nagłówek żądania Save-Data
Jedną z prostych metod jest pozwolić, by przeglądarka mu pomagała, wykorzystując
Nagłówek żądania Save-Data
. Dzięki określeniu tego nagłówka strona internetowa może dostosować
i zapewniać optymalne wrażenia użytkowników
przy ograniczonych kosztach i wydajności
użytkowników.
Obsługiwane przeglądarki (poniżej) pozwalają użytkownikowi włączyć tryb *oszczędzania danych, który umożliwia przeglądarce zastosowanie zestawu optymalizacji w celu zmniejszenia ilość danych wymaganych do wyrenderowania strony. po udostępnieniu tej funkcji; reklamowana, przeglądarka może zażądać obrazów o niższej rozdzielczości, opóźnić wczytywanie lub kierować żądania przez usługę, która stosuje inne optymalizacji pod kątem konkretnych treści, takich jak kompresja zasobów graficznych i tekstowych.
Obsługa przeglądarek
- W Chrome w wersji 49 i nowszych wyświetla się reklama
Save-Data
, gdy użytkownik włącza „Oszczędzanie danych”, na komórce lub „Oszczędzanie danych”, w przeglądarkach na komputerach. - Opera 35+ wyświetla reklamy
Save-Data
, gdy użytkownik włączy Opera „Turbo” w wersji na komputery, czy „Oszczędność danych” opcja w przeglądarkach na Androida. - Yandex 16.2+ reklamuje
Save-Data
, gdy Turbo tryb to włączona na komputerach lub urządzeniach mobilnych .
Wykrywam ustawienie Save-Data
Aby określić, kiedy wysłać „światło” użytkownikom,
aplikacja może sprawdzić nagłówek żądania wskazówek dla klienta Save-Data
. Ten
nagłówek żądania wskazuje preferencję klienta w zakresie mniejszego wykorzystania danych ze względu na
wysokie koszty przesyłania danych, wolne połączenie internetowe i inne.
Gdy użytkownik włączy tryb oszczędzania danych w przeglądarce, przeglądarka doda
nagłówek żądania Save-Data
do wszystkich żądań wychodzących (zarówno HTTP, jak i HTTPS).
W związku z tym przeglądarka reklamuje w nagłówku tylko jeden token *on-
(Save-Data: on
), ale w przyszłości możemy go wydłużyć, aby wskazać innego użytkownika
ustawieniach.
Można też sprawdzić, czy włączona jest obsługa języka Save-Data
w języku JavaScript:
if ('connection' in navigator) {
if (navigator.connection.saveData === true) {
// Implement data saving operations here.
}
}
Sprawdzam obecność obiektu connection
w obiekcie navigator
jest bardzo ważny, bo reprezentuje interfejs Network Information API, który jest
zaimplementowane w przeglądarkach Chrome, Chrome na Androida i Samsung. Od
tam, musisz tylko sprawdzić, czy navigator.connection.saveData
jest równe
true
i będziesz mieć możliwość zaimplementowania dowolnych operacji zapisywania danych w tym warunku.
![Nagłówek Save-Data widoczny w Narzędziach deweloperskich w Chrome
Rozszerzenie Oszczędzanie danych.](https://web.dev/static/articles/optimizing-content-efficiency-save-data/image/the-save-data-header-reve-3d6257f960c6c.png?authuser=7&hl=pl)
Jeśli aplikacja korzysta z usługi
Worker, może
sprawdzisz nagłówki żądań i zastosujesz odpowiednie funkcje logiczne, aby zoptymalizować wrażenia użytkownika.
Serwer może też poszukać rozgłaszanych preferencji w pliku
nagłówek żądania Save-Data
i zwrócona odpowiedź alternatywna – inna
znaczniki, mniejsze obrazy, filmy itd.
Wskazówki i sprawdzone metody dotyczące wdrażania
- Jeśli używasz interfejsu
Save-Data
, udostępnij kilka urządzeń z interfejsem, które go obsługują, i zezwól użytkownikom i łatwo przełączać się między nimi. Na przykład:- Powiadom użytkowników, że usługa
Save-Data
jest obsługiwana, i zachęć ich do jej używania. - Aplikacje tego typu pozwalają użytkownikom zidentyfikować i wybrać tryb za pomocą odpowiednich promptów oraz z intuicyjnymi przyciskami włączania i wyłączania oraz polami wyboru.
- Po wybraniu trybu oszczędzania danych poinformuj o tym i podaj proste, oczywiste jak ją wyłączyć i w razie potrzeby przywrócić do pełnej wersji usługi.
- Powiadom użytkowników, że usługa
- Pamiętaj, że lekkie aplikacje nie są mniejsze. Nie
pomijają ważne funkcje lub dane, ale lepiej poznają
związane z kosztami i wrażeniami użytkownika. Na przykład:
- Aplikacja galerii zdjęć może wyświetlać podglądy w niższej rozdzielczości lub wykorzystywać który wymaga dużo kodu i mechanizmu karuzeli.
- Wyszukiwarka może zwrócić mniej wyników jednocześnie. Ogranicz liczbę wyników, wyniki zawierające dużą ilość multimediów lub zmniejszyć liczbę zależności wymaganych do renderowania stronę.
- Witryna poświęcona wiadomościom może wyświetlać mniej artykułów, pomijać mniej popularne kategorie, lub wyświetlać mniejsze podglądy multimediów,
- Podaj logikę serwera, aby sprawdzić nagłówek żądania
Save-Data
i rozważ wyświetlanie alternatywnej, lżejszej strony, gdy jest włączona, np. zmniejsz liczbę wymaganych zasobów i zależności, stosuj bardziej agresywnie kompresja zasobów itp.- Jeśli wyświetlasz odpowiedź alternatywną na podstawie nagłówka
Save-Data
, pamiętaj, żeby dodać go do listy Vary —Vary: Save-Data
— aby powiedzieć nadrzędnych pamięci podręcznych, które powinny buforować i udostępniać tę wersję tylko wtedy, gdy Jest nagłówek żądaniaSave-Data
. Aby dowiedzieć się więcej, zapoznaj się ze sprawdzonymi metodami w przypadku interakcji z pamięcią podręczną.
- Jeśli wyświetlasz odpowiedź alternatywną na podstawie nagłówka
- Jeśli używasz skryptu service worker, aplikacja może wykryć, kiedy zapisywane są dane
jest włączona, sprawdzając obecność żądania
Save-Data
lub przez sprawdzenie wartościnavigator.connection.saveData
usłudze. Jeśli ta opcja jest włączona, zastanów się, czy możesz zmodyfikować żądanie pobierania lub użyj pobranej już odpowiedzi. - Rozważ uzupełnienie pola
Save-Data
o inne sygnały, np. informacje na temat: typ i technologia połączenia użytkownika (patrz NetInfo). API). Możesz na przykład: i zależy na tym, żeby każdy użytkownik korzystający z połączenia 2G mógł korzystać z prostego interfejsu, nawet jeśli FunkcjaSave-Data
nie jest włączona. I na odwrót – tylko dlatego, że użytkownik używa „szybkiej” lokalizacji. 4G nie oznacza, że nie są zainteresowani oszczędzaniem danych. na przykład w roamingu. Możesz też zwiększyć obecnośćSave-Data
ze wskazówką dla klientaDevice-Memory
umożliwiającą dalsze dostosowywanie się do użytkowników urządzeń z ograniczoną pamięcią. Pamięć urządzenia użytkownika jest również rozgłaszana wnavigator.deviceMemory
podpowiedź dla klienta.
Przepisy
To, co możesz osiągnąć za pomocą usługi Save-Data
, jest ograniczone tylko do tego, co potrafisz wymyślić
z naszymi usługami. Aby dać Ci pojęcie o możliwościach, omówimy kilka zastosowań
przypadków. Podczas lektury możesz wymyślić inne przykłady użycia,
śmiało eksperymentuj i zobacz, co możesz osiągnąć.
Sprawdzam kod po stronie serwera Save-Data
Chociaż stan Save-Data
jest czymś, co można wykryć w JavaScript za pomocą polecenia
navigator.connection.saveData
, wykrycie jej po stronie serwera to
czasami jest to lepsze. W niektórych przypadkach może się nie udać. Dodatkowo
wykrywanie po stronie serwera to jedyny sposób modyfikacji znaczników przed wysłaniem ich do
który należy do najkorzystniejszych przypadków użycia Save-Data
.
Konkretna składnia służąca do wykrywania nagłówka Save-Data
w kodzie po stronie serwera
zależy od używanego języka, ale podstawowa zasada powinna być taka sama
do aplikacji. Na przykład w PHP nagłówki żądań są przechowywane
$_SERVER
superglobalny
tablica w indeksach
zaczynając od HTTP_
. Oznacza to, że możesz wykryć nagłówek Save-Data
przez
sprawdzanie istnienia i wartości zmiennej $_SERVER["HTTP_SAVE_DATA"]
;
np.:
// false by default.
$saveData = false;
// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
// `Save-Data` detected!
$saveData = true;
}
Jeśli przeprowadzasz kontrolę przed wysłaniem jakichkolwiek znaczników do klienta, $saveData
będzie zawierać stan Save-Data
i będzie dostępna w przypadku
których używają na stronie. Omówimy ten mechanizm na kilku przykładach
jak możemy ograniczyć ilość danych wysyłanych do użytkownika.
Wyświetlaj obrazy o niskiej rozdzielczości na ekranach o wysokiej rozdzielczości
Typowy przykład zastosowania obrazów w internecie polega na wyświetlaniu ich w zestawach po 2 zestawy:
Jeden obraz dla „standardowego” ekranów (1x) i drugiego, który jest dwukrotnie większy.
(2x) w przypadku ekranów o wysokiej rozdzielczości (np. Retina
w sieci reklamowej). Ta klasa wysokości
nie muszą być ograniczone do urządzeń zaawansowanych.
stają się coraz bardziej powszechne. Jeśli aplikacja jest lżejsza,
lepiej wysłać do tych osób zdjęcia w niższej rozdzielczości (1x).
ekrany, a nie większe (2x) warianty. Aby to osiągnąć, gdy Save-Data
, zmieniamy po prostu znaczniki wysyłane do klienta:
if ($saveData === true) {
// Send a low-resolution version of the image for clients specifying `Save-Data`.
?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
// Send the usual assets for everyone else.
?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}
To świetny przykład tego, jak mało czasu potrzeba na dostosowanie
do kogoś, kto prosi Cię o przesyłanie mniejszej ilości danych. Jeśli Ci się nie podoba
nie modyfikując znaczników, możesz też osiągnąć ten sam efekt,
korzystając z modułu przepisywania adresów URL takiego jak Apache
mod_rewrite
OK
to przykłady tego, jak osiągnąć
to za pomocą
stosunkowo małą konfigurację.
Możesz również rozszerzyć tę koncepcję na właściwości CSS background-image
przez
wystarczy dodać klasę do elementu <html>
:
<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">
Teraz możesz ustawić kierowanie na klasę save-data
w elemencie <html>
w
CSS, by zmienić sposób wyświetlania obrazów. Możesz wysłać tło o niskiej rozdzielczości
na ekrany o wysokiej rozdzielczości, tak jak w przykładzie powyżej, lub pomiń
określonych zasobów.
Pomiń mniej ważne zdjęcia
Niektóre treści graficzne w internecie są po prostu mało ważne. Takie zdjęcia mogą
poza treściami, mogą być nieprzydatne dla osób starających się
Wydobyć wszystko z abonamentów z pomiarem użycia danych. W tym, co może być najprostsze,
przypadku użycia Save-Data
, możemy użyć kodu wykrywania PHP z wcześniejszego etapu i pominąć
możesz używać tagów,
które nie są niezbędne.
<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
// Only send this image if `Save-Data` hasn't been detected.
?><img src="meme.jpg" alt="One does not simply consume data."><?php
}
Technika ta daje oczywiście wyraźny efekt, jak widać na przykładzie ilustrację poniżej:
![porównanie mniej istotnych zdjęć.
wczytywane przy braku parametru Zapisz dane, a te same zdjęcia są pomijane
gdy jest dostępny element Save-Data.](https://web.dev/static/articles/optimizing-content-efficiency-save-data/image/a-comparison-non-critica-f5ac2f016e117.png?authuser=7&hl=pl)
Oczywiście pominięcie obrazów nie jest jedyną możliwością. Możesz też podjąć działania
Save-Data
, aby zrezygnować z wysyłania innych niekrytycznych zasobów, takich jak
kroju pisma.
Pomiń mniej ważne czcionki internetowe
Chociaż czcionki internetowe zwykle nie stanowią prawie tak dużej części całej strony, jak często robią to zdjęcia, są wciąż dość popularne. Nie wykorzystują nieistotna ilość dane. Ponadto pobieranie i renderowanie czcionek przez przeglądarki jest bardziej skomplikowane niż jak można się zastanowić, FOIT, FOUT i przeglądarka przez heurystykę i wyrenderowanie zniuansowanych operacji.
Być może warto wtedy pominąć reklamy z internetu, które nie są niezbędne.
z myślą o użytkownikach, którym zależy na wygodzie. Save-Data
sprawia, że to jest
dosyć łatwo.
Na przykład załóżmy, że w grupie reklam Fira
Sans od Google
Czcionki w witrynie. Fira Sans ma świetne ciało
ale nie jest to aż tak istotne dla użytkowników, którzy próbują oszczędzać dane. Dodając
klasę save-data
do elementu <html>
, gdy nagłówek Save-Data
jest
możemy pisać style, które najpierw wywołują zwykły krój pisma,
ale później zrezygnuje z niego, gdy występuje nagłówek Save-Data
:
/* Opt into web fonts by default. */
p,
li {
font-family: 'Fira Sans', 'Arial', sans-serif;
}
/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
font-family: 'Arial', sans-serif;
}
W ten sposób możesz pozostawić fragment <link>
z Google Fonts w
ponieważ przeglądarka spekulacyjnie wczytuje zasoby CSS (w tym zasoby
czcionki), najpierw stosując style do DOM, a potem sprawdzając, czy w interfejsie HTML
Elementy wywołują dowolny zasób w arkuszu stylów. Jeśli ktoś przez
z włączoną funkcją Save-Data
, Fira Sans nigdy się nie wczyta, ponieważ model DOM nigdy
który je wywołuje. Zamiast niej włączy się {8}. Nie jest tak fajny jak Fira Sans,
może to być lepsze dla tych użytkowników, którzy starają się zwiększyć limit.
Podsumowanie
Nagłówek Save-Data
nie zawiera zbyt wielu niuansów; ma włączone lub wyłączone ustawienie,
aplikacja ponosi ciężar zapewniania odpowiednich rozwiązań na podstawie
jego ustawienia niezależnie od przyczyny.
Na przykład niektórzy użytkownicy mogą nie zezwolić na tryb oszczędzania danych, jeśli podejrzewają, że jest włączony nawet przy słabym połączeniu, może wystąpić utrata zawartości lub funkcji aplikacji tę sytuację. I na odwrót, niektórzy użytkownicy mogą ją włączyć, aby zachować nawet przy dobrym połączeniu stron internetowych. Najlepiej jest zakładać w aplikacji, że użytkownik chce mieć dostęp do wszystkich treści dopóki użytkownik nie wyraźnie wskazał, że jest inaczej działania.
Jako właściciele witryn i programiści stron internetowych odpowiadajmy za zarządzanie aby zwiększyć wygodę użytkowników, którzy mają ograniczony dostęp do danych i ograniczają koszty.
Więcej informacji na temat Save-Data
oraz doskonałe przykłady praktyczne znajdziesz w artykule Pomóż
Użytkownicy Save Data
.