Szybkie i lekkie aplikacje dzięki funkcji oszczędzania danych

Dave Gash

Ilya Grigorik

Jeremy Wagner

Żą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.

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

1. 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.
2. 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,
3. 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 żądania Save-Data. Aby dowiedzieć się więcej, zapoznaj się ze sprawdzonymi metodami w przypadku interakcji z pamięcią podręczną.
4. 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ści navigator.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.
5. 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 Funkcja Save-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 klienta Device-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 w navigator.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:

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.