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

Dave Gash

Ilya Grigorik

Jeremy Wagner

Nagłówek żądania wskazówek dla klienta Save-Data, który jest dostępny w przeglądarkach Chrome, Opera i Yandex, pozwala deweloperom udostępniać lżejsze i szybsze aplikacje użytkownikom, którzy włączyli tryb oszczędzania danych w przeglądarce.

Konieczność tworzenia uproszczonych stron

Wszyscy zgadzają się, że szybsze i lżejsze strony internetowe zapewniają lepsze wrażenia użytkownika, ułatwiają zrozumienie i zapamiętanie treści oraz zwiększają liczbę konwersji i przychody. Badania Google wykazały, ż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ż wzrost ruchu na nich o 50%”.

Chociaż liczba połączeń 2G w końcu spada, w 2015 r. 2G nadal była dominującą technologią sieciową. Penetracja i dostępność sieci 3G i 4G szybko rośnie, ale związane z tym koszty i ograniczenia sieci są nadal istotnym czynnikiem dla setek milionów użytkowników.

To mocne argumenty przemawiające za optymalizacją stron.

Istnieją alternatywne metody zwiększania szybkości strony bez bezpośredniego udziału programistów, takie jak przeglądarki proxy i usługi transkodowania. Chociaż takie usługi są dość popularne, mają one znaczne wady – prostą (i czasami nieakceptowalną) kompresję obrazów i tekstu, brak możliwości przetwarzania bezpiecznych stron (HTTPS) i optymalizację tylko stron odwiedzanych za pomocą wyników wyszukiwania. Popularność tych usług jest sama w sobie wskaźnikiem, że programiści internetowi nie spełniają w pełni oczekiwań użytkowników dotyczących szybkich i lekkich aplikacji oraz stron. Osiągnięcie tego celu jest jednak skomplikowane i czasami trudne.

Nagłówek żądania Save-Data

Jedną z prostych metod jest poproszenie przeglądarki o pomoc za pomocą nagłówka żądania Save-Data. Dzięki identyfikacji tego nagłówka strona internetowa będzie mogła dostosowywać się do potrzeb użytkowników z ograniczoną wydajnością i kosztami oraz zapewniać jej optymalne wrażenia.

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

Obsługa przeglądarek

• Chrome 49 i nowsze wersje wyświetlają reklamySave-Data gdy użytkownik włączy opcję „Oszczędzanie danych” w telefonie lub rozszerzenie „Oszczędzanie danych” w przeglądarce na komputerze.
• Opera 35 lub nowsza wyświetla reklamy 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+ wyświetla reklamy Save-Data, gdy tryb Turbo jest włączony w przeglądarkach na komputerze lub mobilnych.

Wykrywam ustawienie Save-Data

Aby określić, kiedy użytkownicy mają do dyspozycji „proste” środowisko, aplikacja może sprawdzić nagłówek żądania wskazówek dla klienta Save-Data. Ten nagłówek żądania wskazuje preferencje klienta dotyczące zmniejszonego wykorzystania danych ze względu na wysokie koszty przesyłania, wolne połączenie lub inne przyczyny.

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

Dodatkowo można wykryć, czy w JavaScript jest włączona opcja Save-Data:

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

Sprawdzanie obecności obiektu connection w obiekcie navigator jest bardzo ważne, ponieważ reprezentuje on interfejs Network Information API, który jest implementowany tylko w przeglądarkach Chrome, Chrome na Androida i Samsung Internet. W tym celu wystarczy sprawdzić, czy navigator.connection.saveData jest równe true. W takim przypadku możesz zastosować dowolną operację zapisu danych.

Jeśli aplikacja używa skryptu service worker, może sprawdzać nagłówki żądań i stosować odpowiednią logikę, aby zoptymalizować działanie usługi. Serwer może też poszukać rozgłaszanych preferencji w nagłówku żądania Save-Data i zwrócić inną odpowiedź – inne znaczniki, mniejsze obrazy i filmy itd.

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

1. Gdy używasz Save-Data, udostępnij interfejsy obsługiwane przez urządzenia, aby użytkownicy mogli ł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.
   • Umożliw użytkownikom identyfikację i wybór trybu za pomocą odpowiednich promptów oraz intuicyjnych przycisków włączania/wyłączania lub pól wyboru.
   • Gdy wybrany jest tryb oszczędzania danych, należy poinformować o możliwości wyłączenia tego trybu i przywrócenia pełnej funkcjonalności.
2. Pamiętaj, że lekkie aplikacje nie są gorsze od innych. Nie pomijają ważnych funkcji ani danych, ale są bardziej świadomi związanych z tym kosztów i wrażeń użytkowników. Na przykład:
   • Aplikacja z galeria zdjęć może wyświetlać podgląd w niższej rozdzielczości lub używać mechanizmu karuzeli z mniejszą ilością kodu.
   • Aplikacja wyszukiwania może zwracać mniej wyników naraz, ograniczać liczbę wyników z dużą ilością multimediów lub zmniejszać liczbę zależności wymaganych do renderowania strony.
   • Witryna informacyjna może wyświetlać mniej wiadomości, pomijać mniej popularne kategorie lub wyświetlać mniejsze podglądy multimediów.
3. Dodaj logikę serwera, która sprawdza nagłówek żądania Save-Data, i rozważ podanie alternatywnej, lżejszej odpowiedzi strony, gdy jest ona włączona. Możesz na przykład zmniejszyć liczbę wymaganych zasobów i zależności, zastosować bardziej agresywną kompresję zasobów itp.
   • Jeśli udostępniasz odpowiedź alternatywną na podstawie nagłówka Save-Data, pamiętaj o dodaniu jej do listy Vary – Vary: Save-Data – aby wskazać nadrzędne pamięci podręczne, że powinny zapisywać się w pamięci podręcznej i wyświetlać tę wersję tylko wtedy, gdy dostępny jest nagłówek żądania Save-Data. Więcej informacji znajdziesz w sprawdzonych metodach interakcji z pamięcią podręczną.
4. Jeśli używasz usługi w tle, Twoja aplikacja może wykryć, kiedy włączono opcję zapisywania danych, sprawdzając obecność nagłówka żądania Save-Data lub wartość właściwości navigator.connection.saveData. Jeśli ta opcja jest włączona, zastanów się, czy możesz zmienić żądanie, aby pobrać mniej bajtów, lub użyć już pobranej odpowiedzi.
5. Rozważ uzupełnienie Save-Data o inne sygnały, np. informacje o typie i technologii połączenia użytkownika (patrz NetInfo API). Możesz na przykład wyświetlać uproszczone wersje stron wszystkim użytkownikom korzystającym z połączenia 2G, nawet jeśli Save-Data jest wyłączona. Z drugiej strony, fakt, ż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ą podpowiedzi dla klienta Device-Memory, aby jeszcze lepiej dostosować aplikację do użytkowników na urządzeniach z ograniczoną pamięcią. Pamięć urządzenia użytkownika jest również rozgłaszana we wskazówce klienta navigator.deviceMemory.

Przepisy

To, co możesz osiągnąć za pomocą narzędzia Save-Data, jest ograniczone tylko do tego, co przychodzi Ci do głowy. Aby dać Ci pojęcie o możliwościach, omówimy kilka przypadków użycia. Czytając ten artykuł, możesz wymyślić inne zastosowania, więc eksperymentuj i sprawdź, co jest możliwe.

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

Stan Save-Data możesz wykryć w JavaScript za pomocą właściwości navigator.connection.saveData, ale czasami lepsze jest wykrywanie go po stronie serwera. W niektórych przypadkach skrypt JavaScript może nie działać. Poza tym wykrywanie po stronie serwera to jedyny sposób na modyfikowanie znaczników przed ich wysłaniem do klienta, co jest istotne w przypadku niektórych z najbardziej korzystnych zastosowań Save-Data.

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 koncepcja powinna być taka sama w przypadku każdego backendu aplikacji. Na przykład w języku PHP nagłówki żądań są przechowywane w superglobalnej tablicy $_SERVER w indeksach rozpoczynających się od HTTP_. Oznacza to, że możesz wykryć nagłówek Save-Data, sprawdzając obecność i wartość zmiennej $_SERVER["HTTP_SAVE_DATA"] w następujący 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 tę weryfikację przed wysłaniem znacznika do klienta, zmienna $saveData będzie zawierać stan Save-Data i będzie dostępna do użycia w dowolnym miejscu na stronie. Teraz, gdy już znasz ten mechanizm, przyjrzyjmy się kilku przykładom, w jaki sposób można go wykorzystać do ograniczenia ilości danych wysyłanych do użytkownika.

Wyświetlaj obrazy o niskiej rozdzielczości na ekranach o wysokiej rozdzielczości

Typowym zastosowaniem obrazów w internecie jest wyświetlanie ich w parach: jeden obraz na „standardowe” ekrany (1 x) i drugi obraz dwa razy większy (2 x) na ekrany o wysokiej rozdzielczości (np. Wyświetlacz Retina). Ta klasa ekranów o wysokiej rozdzielczości nie jest koniecznie ograniczona do urządzeń wysokiej klasy i staje się coraz bardziej popularna. W przypadku, gdy preferujesz lżejszą aplikację, możesz wysłać na te ekrany obrazy o niższej rozdzielczości (1x), a nie większe (2x). Aby to osiągnąć, gdy występuje nagłówek Save-Data , po prostu modyfikujemy znaczniki przesył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 prośby użytkownika o ograniczenie ilości danych. Jeśli nie chcesz zmieniać znaczników w backendzie, możesz osiągnąć taki sam efekt, używając modułu przepisywania adresów URL takiego jak Apache mod_rewrite. Poniżej znajdziesz przykłady, jak to zrobić przy użyciu stosunkowo niewielkiej konfiguracji.

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

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

Tutaj możesz ustawić kierowanie na klasę save-data w elemencie <html> w pliku CSS, aby zmienić sposób dostarczania obrazów. Możesz wysłać obrazy tła o niskiej rozdzielczości na ekrany o wysokiej rozdzielczości, jak pokazano w powyższym przykładzie kodu HTML, lub pominąć niektóre zasoby.

Pomiń mniej ważne zdjęcia

Niektóre obrazy w internecie są po prostu nieistotne. Takie obrazy mogą stanowić miłe urozmainięcie treści, ale mogą nie być pożądane przez osoby, które chcą w pełni wykorzystać limitowane pakiety danych. W najprostszym przypadku 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
}

Jak widać na ilustracji poniżej:

Pomijanie obrazów nie jest oczywiście jedyną możliwością. Możesz też użyć opcji Save-Data, aby pominąć wysyłanie innych zasobów, które nie są krytyczne, takich jak niektóre czcionki.

Pomiń niepotrzebne czcionki internetowe

Czcionki internetowe zwykle nie stanowią prawie tak dużej łącznej ładunku na danej stronie jak obrazy, ale są dość popularne. Nie zużywają też znacznej ilości danych. Ponadto sposób pobierania i renderowania czcionek przez przeglądarki jest bardziej skomplikowany, niż mogłoby się wydawać. W przypadku renderowania czcionek stosowane są takie pojęcia, jak FOIT, FOUT i heurystyki przeglądarki, które sprawiają, że renderowanie jest bardziej złożoną operacją.

W takim przypadku możesz pominąć niepotrzebne czcionki dla użytkowników, którzy chcą korzystać z prostszych rozwiązań. Dzięki Save-Data jest to całkiem łatwe.

Załóżmy na przykład, że w swojej witrynie masz włączoną czcionkę Fira Sans z Google Fonts. Fira Sans to świetna czcionka do tekstu, ale może nie być tak ważna dla użytkowników, którzy chcą oszczędzać dane. Dodanie klasy save-data do elementu <html>, gdy widoczny jest nagłówek Save-Data, umożliwia pisanie stylów, które najpierw wywołują zwykły krój pisma, ale potem wyłączają go, 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;
}

Dzięki temu możesz pozostawić fragment kodu <link> z Google Fonts, ponieważ przeglądarka wczytuje zasoby CSS (w tym czcionki internetowe) w sposób spekulatywny, najpierw stosując style do DOM, a potem sprawdzając, czy jakiekolwiek elementy HTML wywołują jakiekolwiek zasoby w arkuszu stylów. Jeśli ktoś przypadkowo otworzy stronę z włączoną opcją Save-Data, czcionka Fira Sans nigdy się nie załaduje, ponieważ stylizowany interfejs DOM nigdy jej nie wywołuje. Zamiast niej włączy się {8}. Nie jest to tak miłe jak Fira Sans, ale może być bardziej przydatne dla użytkowników, którzy starają się zwiększyć limit danych.

Podsumowanie

Nagłówek Save-Data nie ma zbyt wielu niuansów – jest włączony lub wyłączony, a aplikacja musi zapewnić odpowiednie działanie na podstawie tego ustawienia, niezależnie od przyczyny.

Niektórzy użytkownicy mogą na przykład nie zezwalać na tryb oszczędzania danych, jeśli podejrzewają, że może to spowodować utratę treści lub funkcji aplikacji, nawet w przypadku słabego połączenia z internetem. I na odwrót: niektórzy użytkownicy mogą włączyć tę opcję w celu zachowania jak najmniejszego i prostego w obsłudze stron nawet przy dobrym połączeniu internetowym. Aplikacja powinna zakładać, że użytkownik chce korzystać z pełnej i nieograniczonej funkcjonalności, dopóki nie otrzyma wyraźnego sygnału o innych intencjach użytkownika.

Jako właściciele witryn i programiści webowi bierzemy na siebie odpowiedzialność za zarządzanie treściami, aby poprawić wrażenia użytkowników, którzy mają ograniczony dostęp do danych i kosztów.

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