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

Dave Gash

Ilya Grigorik

Jeremy Wagner

Nagłówek żądania wskazówek dotyczących klienta Save-Data dostępny w przeglądarkach Chrome, Opera i Yandex umożliwia deweloperom dostarczanie lżejszych i szybszych aplikacji użytkownikom, którzy wyrazili zgodę na tryb oszczędzania danych w przeglądarce.

Potrzeba lekkich stron

Wszyscy zgadzają się, że szybsze i lżejsze strony internetowe zapewniają użytkownikom większą wygodę, umożliwiają lepsze zrozumienie i zapamiętanie treści oraz zwiększają liczbę konwersji i przychody. Badania Google pokazują, że „…zoptymalizowane strony wczytują się 4 razy szybciej niż ich oryginalne wersje, a ich rozmiar w bajtach jest mniejszy nawet o 80%. Szybsze wczytywanie spowodowało również zwiększenie ruchu na zoptymalizowanych stronach o 50%”.

Chociaż liczba połączeń 2G wreszcie spada, w 2015 roku 2G nadal było dominującą technologią sieciową. Zasięg i dostępność sieci 3G i 4G szybko rosną, ale związane z nimi koszty i ograniczenia sieciowe nadal stanowią istotny czynnik dla setek milionów użytkowników.

To mocne argumenty za optymalizacją strony.

Istnieją alternatywne metody zwiększania szybkości witryny bez bezpośredniego udziału programisty, takie jak przeglądarki proxy i usługi transkodowania. Chociaż takie usługi są dość popularne, mają istotne wady – prosta (i czasem niedopuszczalna) kompresja obrazów i tekstu, brak możliwości przetwarzania bezpiecznych stron (HTTPS), optymalizacja tylko stron odwiedzanych z wyników wyszukiwania i inne. Sama popularność tych usług wskazuje, że twórcy stron internetowych nie odpowiadają właściwie na wysokie zapotrzebowanie użytkowników na szybkie i lekkie aplikacje oraz strony. Jednak osiągnięcie tego celu jest złożonym i czasami trudnym procesem.

Nagłówek żądania Save-Data

Jedną z prostych metod jest skorzystanie z pomocy przeglądarki za pomocą nagłówka żądania Save-Data. Dzięki temu nagłówkowi strona internetowa może dostosować i zoptymalizować działanie dla użytkowników, którzy mają ograniczenia związane z kosztami i wydajnością.

Obsługiwane przeglądarki (poniżej) umożliwiają użytkownikowi włączenie trybu oszczędzania danych, który pozwala przeglądarce na stosowanie zestawu optymalizacji w celu zmniejszenia ilości danych wymaganych do renderowania strony. Gdy ta funkcja jest dostępna lub reklamowana, przeglądarka może żądać obrazów o niższej rozdzielczości, opóźniać wczytywanie niektórych zasobów lub kierować żądania przez usługę, która stosuje inne optymalizacje dotyczące treści, takie jak kompresja zasobów graficznych i tekstowych.

Obsługa przeglądarek

• Chrome 49 i nowsze wysyła nagłówek Save-Data, gdy użytkownik włączy opcję „Oszczędzanie danych” na urządzeniu mobilnym lub rozszerzenie „Oszczędzanie danych” w przeglądarce na komputerze.
• Opera 35+ rozgłasza Save-Data, gdy użytkownik włączy tryb „Opera Turbo” na komputerze lub opcję „Oszczędzanie danych” w przeglądarkach na Androida.
• Yandex 16.2+ rozgłasza Save-Data, gdy na komputerze lub w przeglądarce mobilnej włączony jest tryb Turbo.

Wykrywanie ustawienia Save-Data

Aby określić, kiedy dostarczać użytkownikom „lekką” wersję, aplikacja może sprawdzać nagłówek żądania wskazówek dotyczących klienta Save-Data. Ten nagłówek żądania wskazuje, że klient preferuje mniejsze wykorzystanie danych ze względu na wysokie koszty transferu, wolną szybkość połączenia lub inne przyczyny.

Gdy użytkownik włączy w przeglądarce tryb oszczędzania danych, przeglądarka dołącza nagłówek żądania Save-Data do wszystkich żądań wychodzących (zarówno HTTP, jak i HTTPS). W momencie pisania tego artykułu przeglądarka wyświetla w nagłówku tylko 1 token *on (Save-Data: on), ale w przyszłości może to zostać rozszerzone o inne preferencje użytkownika.

Możesz też sprawdzić, czy funkcja Save-Data jest włączona w JavaScripcie:

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // Implement data saving operations here.
  }
}

Sprawdzenie obecności obiektu connection w obiekcie navigator jest kluczowe, ponieważ reprezentuje on interfejs Network Information API, który jest zaimplementowany tylko w przeglądarkach internetowych Chrome, Chrome na Androida i Samsung Internet. Następnie wystarczy sprawdzić, czy navigator.connection.saveData jest równe true, i w tym warunku można zaimplementować dowolne operacje zapisywania danych.

Włączanie rozszerzenia Oszczędzanie danych w Chrome na komputerze

Jeśli aplikacja używa skryptu service worker, może sprawdzać nagłówki żądań i stosować odpowiednią logikę, aby optymalizować działanie. Serwer może też wyszukać reklamowane preferencje w nagłówku żądania Save-Data i zwrócić alternatywną odpowiedź – inne znaczniki, mniejsze obrazy i filmy itd.

Wskazówka: jeśli do optymalizacji stron używasz PageSpeed dla Apache lub Nginx, przeczytaj ten wątek, aby dowiedzieć się, jak włączyć oszczędzanie danych (Save-Data) dla użytkowników._

Wskazówki i sprawdzone metody dotyczące wdrażania

1. Jeśli używasz Save-Data, udostępnij elementy interfejsu, które obsługują tę funkcję i umożliwiają użytkownikom łatwe przełączanie się między trybami. Na przykład:
   • Poinformuj użytkowników, że Save-Data jest obsługiwany, i zachęć ich do korzystania z niego.
   • Umożliwiaj użytkownikom identyfikowanie i wybieranie trybu za pomocą odpowiednich komunikatów oraz intuicyjnych przycisków włączania/wyłączania lub pól wyboru.
   • Gdy wybrany jest tryb oszczędzania danych, poinformuj o tym i zapewnij łatwy i oczywisty sposób na wyłączenie go i powrót do pełnej wersji, jeśli użytkownik sobie tego życzy.
2. Pamiętaj, że lekkie aplikacje nie są gorsze. Nie pomijają ważnych funkcji ani danych, ale są bardziej świadome związanych z nimi kosztów i wrażeń użytkowników. Na przykład:
   • Aplikacja galerii zdjęć może wyświetlać podglądy w niższej rozdzielczości lub używać mniej skomplikowanego mechanizmu karuzeli.
   • Aplikacja do wyszukiwania może zwracać mniej wyników naraz, ograniczać liczbę wyników zawierających dużo multimediów lub zmniejszać liczbę zależności wymaganych do wyrenderowania strony.
   • Witryna z wiadomościami może wyświetlać mniej artykułów, pomijać mniej popularne kategorie lub udostępniać mniejsze podglądy multimediów.
3. Zapewnij logikę serwera, która sprawdza nagłówek żądania Save-Data i rozważ udostępnienie alternatywnej, lżejszej odpowiedzi strony, gdy jest on włączony – np. zmniejsz liczbę wymaganych zasobów i zależności, zastosuj bardziej agresywną kompresję zasobów itp.
   • Jeśli wyświetlasz alternatywną odpowiedź na podstawie nagłówka Save-Data, pamiętaj, aby dodać go do listy Vary – Vary: Save-Data – aby poinformować pamięci podręczne wyższego poziomu, że powinny przechowywać i wyświetlać tę wersję tylko wtedy, gdy nagłówek żądania Save-Data jest obecny. Więcej informacji znajdziesz w sprawdzonych metodach dotyczących interakcji z pamięciami podręcznymi.
4. Jeśli używasz skryptu service worker, aplikacja może wykryć, kiedy opcja oszczędzania danych jest włączona, sprawdzając obecność nagłówka żądania Save-Data lub wartość właściwości navigator.connection.saveData. Jeśli jest włączona, zastanów się, czy możesz przepisać żądanie, aby pobierało mniej bajtów, lub użyć już pobranej odpowiedzi.
5. Rozważ uzupełnienie Save-Data o inne sygnały, takie jak informacje o typie i technologii połączenia użytkownika (zobacz NetInfo API). Możesz na przykład chcieć wyświetlać wersję uproszczoną każdemu użytkownikowi korzystającemu z połączenia 2G, nawet jeśli funkcja Save-Data nie jest włączona. Z drugiej strony to, że użytkownik korzysta z „szybkiego” połączenia 4G, nie oznacza, że nie chce oszczędzać danych – na przykład podczas roamingu. Dodatkowo możesz zwiększyć obecność Save-Data za pomocą wskazówki dotyczącej klienta Device-Memory, aby jeszcze lepiej dostosować się do użytkowników urządzeń z ograniczoną pamięcią. Pamięć urządzenia użytkownika jest też podawana we wskazówce dotyczącej klienta navigator.deviceMemory.

Przepisy

To, co możesz osiągnąć dzięki Save-Data, jest ograniczone tylko przez Twoją wyobraźnię. Aby pokazać, co jest możliwe, omówimy kilka przypadków użycia. Podczas czytania tego artykułu możesz wymyślić inne przypadki użycia, więc eksperymentuj i sprawdzaj, co jest możliwe.

Sprawdzam, czy w kodzie po stronie serwera występuje Save-Data

Stan Save-Data możesz wykryć w kodzie JavaScript za pomocą właściwości navigator.connection.saveData, ale czasami lepiej jest wykryć go po stronie serwera. W niektórych przypadkach JavaScript może nie zostać wykonany. Ponadto wykrywanie po stronie serwera to jedyny sposób na modyfikowanie znaczników przed wysłaniem ich do klienta, co jest wykorzystywane w niektórych z najbardziej korzystnych przypadków użycia Save-Data.

Konkretna składnia 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 w przypadku każdego backendu aplikacji. Na przykład w PHP nagłówki żądań są przechowywane w tablicy superglobalnej $_SERVER w indeksach zaczynających się od HTTP_. Oznacza to, że możesz wykryć nagłówek Save-Data, sprawdzając istnienie i wartość zmiennej $_SERVER["HTTP_SAVE_DATA"] w ten sposób:

// 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 umieścisz to sprawdzenie przed wysłaniem jakichkolwiek znaczników do klienta, zmienna $saveData będzie zawierać stan Save-Data i będzie dostępna do użycia w dowolnym miejscu na stronie. Skoro już wyjaśniliśmy ten mechanizm, przyjrzyjmy się kilku przykładom, jak możemy go wykorzystać do ograniczenia ilości danych wysyłanych do użytkownika.

Wyświetlanie obrazów o niskiej rozdzielczości na ekranach o wysokiej rozdzielczości

Typowym przypadkiem użycia obrazów w internecie jest wyświetlanie ich w zestawach po 2: jeden obraz na „standardowe” ekrany (1x) i drugi, który jest 2 razy większy (2x), na ekrany o wysokiej rozdzielczości (np. Retina Display). Ta klasa ekranów o wysokiej rozdzielczości nie musi być ograniczona do urządzeń z najwyższej półki i staje się coraz bardziej powszechna. W przypadkach, gdy preferowane jest mniejsze obciążenie aplikacji, warto wysyłać na te ekrany obrazy o niższej rozdzielczości (1x) zamiast większych wariantów (2x). Aby to osiągnąć, gdy nagłówek Save-Data jest obecny, po prostu modyfikujemy 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
}

Ten przypadek użycia jest doskonałym przykładem tego, jak niewiele wysiłku wymaga dostosowanie się do kogoś, kto prosi o wysyłanie mniejszej ilości danych. Jeśli nie chcesz modyfikować znaczników w backendzie, możesz osiągnąć ten sam efekt, używając modułu do przepisywania adresów URL, takiego jak mod_rewrite Apache. Istnieją przykłady, jak to osiągnąć przy stosunkowo niewielkiej konfiguracji.

Możesz też rozszerzyć tę koncepcję na właściwości CSS background-image, dodając klasę do elementu <html>:

<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">

Tutaj możesz kierować na klasę save-data w elemencie <html> w kodzie CSS, aby zmienić sposób wyświetlania obrazów. Możesz wysyłać obrazy tła o niskiej rozdzielczości na ekrany o wysokiej rozdzielczości, jak pokazano w powyższym przykładzie HTML, lub całkowicie pominąć niektóre zasoby.

Pomiń nieistotne obrazy

Niektóre obrazy w internecie są po prostu nieistotne. Takie obrazy mogą być miłym dodatkiem do treści, ale niekoniecznie są pożądane przez osoby, które chcą jak najlepiej wykorzystać swoje pakiety danych. W najprostszym przypadku użycia Save-Data możemy użyć kodu wykrywania PHP z poprzedniego przykładu i całkowicie pominąć nieistotne znaczniki obrazów:

<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
}

Ta technika może mieć znaczący wpływ, co widać na poniższym rysunku:

Porównanie niekrytycznych obrazów wczytywanych, gdy nagłówek Save-Data jest nieobecny, z tymi samymi obrazami pomijanymi, gdy nagłówek Save-Data jest obecny.

Oczywiście pomijanie obrazów to nie jedyna możliwość. Możesz też podjąć działania w przypadku Save-Data, aby zrezygnować z wysyłania innych niekrytycznych zasobów, takich jak niektóre kroje pisma.

Pomiń nieistotne czcionki internetowe

Czcionki internetowe zwykle nie stanowią tak dużej części całkowitego rozmiaru strony jak obrazy, ale nadal są dość popularne. Nie zużywają też małej ilości danych. Ponadto sposób, w jaki przeglądarki pobierają i renderują czcionki, jest bardziej skomplikowany, niż mogłoby się wydawać. Koncepcje takie jak FOIT, FOUT i heurystyka przeglądarki sprawiają, że renderowanie jest złożoną operacją.

Można więc założyć, że warto pominąć nieistotne czcionki internetowe w przypadku użytkowników, którzy chcą korzystać z bardziej uproszczonych funkcji. Save-Data sprawia, że jest to stosunkowo proste.

Załóżmy na przykład, że w swojej witrynie używasz czcionki Fira Sans z Google Fonts. Fira Sans to doskonała czcionka do tekstu głównego, ale może nie być tak ważna dla użytkowników, którzy chcą oszczędzać dane. Dodając klasę save-data do elementu <html>, gdy nagłówek Save-Data jest obecny, możemy napisać style, które najpierw wywołują nieistotny krój pisma, ale potem rezygnują z niego, gdy nagłówek Save-Data jest obecny:

/* 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;
}

Dzięki temu możesz pozostawić fragment kodu <link> z Google Fonts na miejscu, ponieważ przeglądarka stosuje ładowanie spekulacyjne zasobów CSS (w tym czcionek internetowych), najpierw stosując style do DOM, a następnie sprawdzając, czy elementy HTML wywołują zasoby w arkuszu stylów. Jeśli ktoś odwiedzi stronę z włączonym Save-Data, czcionka Fira Sans nigdy się nie wczyta, ponieważ stylizowany DOM nigdy jej nie wywoła. Zamiast tego zostanie użyta czcionka Arial. Nie jest tak ładna jak Fira Sans, ale może być preferowana przez użytkowników, którzy chcą oszczędzać dane.

Podsumowanie

Nagłówek Save-Data nie jest zbyt skomplikowany – jest albo włączony, albo wyłączony, a aplikacja musi zapewniać odpowiednie działanie na podstawie jego ustawienia, niezależnie od przyczyny.

Na przykład niektórzy użytkownicy mogą nie zezwalać na tryb oszczędzania danych, jeśli podejrzewają, że spowoduje to utratę treści lub funkcji aplikacji, nawet w przypadku słabego połączenia. Z drugiej strony niektórzy użytkownicy mogą włączać tę funkcję, aby strony były jak najmniejsze i najprostsze, nawet przy dobrym połączeniu. Najlepiej, aby aplikacja zakładała, że użytkownik chce korzystać z pełnej i nieograniczonej wersji, dopóki nie otrzymasz wyraźnego sygnału, że jest inaczej, w postaci konkretnego działania użytkownika.

Jako właściciele witryn i twórcy stron internetowych weźmy na siebie odpowiedzialność za zarządzanie treściami, aby poprawić wrażenia użytkowników, którzy mają ograniczone pakiety danych i budżety.

Więcej informacji o Save-Data i praktyczne przykłady znajdziesz w artykule Pomaganie użytkownikom w Save Data.