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

Dave Gash

Ilya Grigorik

Jeremy Wagner

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

Potrzeba lekkich stron

Wszyscy zgadzają się, że szybsze i lżejsze strony internetowe zapewniają większą wygodę użytkownikom, pozwalają lepiej zrozumieć i zapamiętać treści oraz zwiększają liczbę konwersji i przychodów. 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ż zwiększenie ruchu na zoptymalizowanych stronach o 50%.

Chociaż liczba połączeń 2G wreszcie maleje, w 2015 r. technologia 2G była nadal 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 są istotnym czynnikiem 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 – prostą (a czasem niedopuszczalną) kompresję obrazów i tekstu, brak możliwości przetwarzania bezpiecznych stron (HTTPS), optymalizację tylko stron odwiedzanych z wyników wyszukiwania i inne. Sama popularność tych usług jest wskaźnikiem, że programiści stron internetowych nie zaspokajają w odpowiedni sposób dużego zapotrzebowania użytkowników na szybkie i lekkie aplikacje oraz strony. Jednak osiągnięcie tego celu jest skomplikowane i czasami trudne.

Nagłówek żądania Save-Data

Jedną z dość prostych metod jest skorzystanie z pomocy przeglądarki za pomocą nagłówka żądania Save-Data. Dzięki rozpoznaniu tego nagłówka strona internetowa może dostosować i zapewnić zoptymalizowane wrażenia użytkownikom, którzy mają ograniczone możliwości związane z kosztami i wydajnością.

Obsługiwane przeglądarki (wymienione poniżej) umożliwiają użytkownikowi włączenie trybu oszczędzania danych, który daje przeglądarce uprawnienia do zastosowania zestawu optymalizacji w celu zmniejszenia ilości danych wymaganych do renderowania strony. Gdy ta funkcja jest udostępniana lub reklamowana, przeglądarka może wysyłać żądania obrazów o niższej rozdzielczości, odraczać wczytywanie niektórych zasobów lub kierować żądania przez usługę, która stosuje inne optymalizacje dotyczące treści, takie jak kompresja obrazów i zasobów tekstowych.

Obsługa przeglądarek

• Chrome w wersji 49 lub nowszej wysyła sygnał 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 w wersji 35 lub nowszej zgłasza Save-Data, gdy użytkownik włączy tryb „Opera Turbo” na komputerze lub opcję „Oszczędzanie danych” w przeglądarce na Androida.
• Yandex w wersji 16.2 lub nowszej wyświetla reklamę Save-Data, gdy na komputerze lub urządzeniu mobilnym włączony jest tryb Turbo.

Wykrywanie ustawienia Save-Data

Aby określić, kiedy wyświetlać użytkownikom „lżejszą” wersję strony, aplikacja może sprawdzać nagłówek żądania wskazówki klienta Save-Data. Ten nagłówek żądania wskazuje preferencje klienta dotyczące zmniejszonego zużycia danych z powodu wysokich kosztów przesyłania, niskiej szybkości połączenia lub innych przyczyn.

Gdy użytkownik włączy w przeglądarce tryb oszczędzania danych, przeglądarka dołącza do wszystkich wychodzących żądań (zarówno HTTP, jak i HTTPS) nagłówek żądania Save-Data. W momencie pisania tego artykułu przeglądarka reklamuje 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 JavaScript:

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 zaimplementowany tylko w przeglądarkach Chrome, Chrome na Androida i Samsung Internet. Następnie wystarczy sprawdzić, czy navigator.connection.saveData jest równe true, i w tym warunku możesz wdrożyć dowolne operacje zapisywania danych.

Jeśli Twoja aplikacja korzysta z service workera, może sprawdzać nagłówki żądań i stosować odpowiednią logikę, aby zoptymalizować działanie. Serwer może też wyszukiwać reklamowane preferencje w nagłówku żądania Save-Data i zwracać alternatywną odpowiedź – inny kod, mniejsze obrazy i filmy itp.

Wskazówki i sprawdzone metody 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 różnymi trybami. Na przykład:
   • Poinformuj użytkowników, że Save-Data jest obsługiwane, i zachęć ich do korzystania z tej funkcji.
   • Umożliwiaj użytkownikom identyfikowanie i wybieranie trybu za pomocą odpowiednich komunikatów oraz intuicyjnych przycisków włączania i wyłączania lub pól wyboru.
   • Gdy wybrany jest tryb oszczędzania danych, poinformuj o tym użytkownika i zapewnij mu łatwy i oczywisty sposób na wyłączenie tego trybu i powrót do pełnej wersji, jeśli będzie tego chciał.
2. Pamiętaj, że aplikacje o niewielkich rozmiarach nie są gorsze od innych. Nie pomijają one ważnych funkcji ani danych, tylko bardziej uwzględniają koszty i wrażenia użytkownika. Na przykład:
   • Aplikacja galerii zdjęć może wyświetlać podglądy w niższej rozdzielczości lub korzystać z mniej złożonego 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 renderowania 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 będzie sprawdzać nagłówek żądania Save-Data i w razie potrzeby udostępniać alternatywną, lżejszą odpowiedź strony – 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 buforować i udostępniać tę wersję tylko wtedy, gdy występuje nagłówek żądania Save-Data. Więcej informacji znajdziesz w artykule ze sprawdzonymi metodami interakcji z pamięcią podręczną.
4. Jeśli używasz skryptu service worker, aplikacja może wykryć, kiedy opcja zapisywania danych jest włączona, 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 przepisać żądanie, aby pobrać mniejszą liczbę bajtów, lub użyć już pobranej odpowiedzi.
5. Rozważ uzupełnienie Save-Data innymi sygnałami, np. informacjami o typie połączenia i technologii użytkownika (patrz NetInfo API). Możesz na przykład 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, sam fakt, że użytkownik korzysta z „szybkiego” połączenia 4G, nie oznacza, że nie jest zainteresowany oszczędzaniem danych – na przykład w roamingu. Dodatkowo możesz zwiększyć obecność Save-Data za pomocą wskazówki klienta Device-Memory, aby jeszcze lepiej dostosowywać się do użytkowników korzystających z urządzeń z ograniczoną pamięcią. Pamięć urządzenia użytkownika jest też reklamowana w navigator.deviceMemorywskazówce klienta.

Przepisy

To, co możesz osiągnąć dzięki Save-Data, jest ograniczone tylko Twoją wyobraźnią. Aby dać Ci wyobrażenie o możliwościach, omówmy kilka przypadków użycia. Podczas czytania tego artykułu możesz wymyślić inne zastosowania, więc eksperymentuj i sprawdzaj, co jest możliwe.

Sprawdzanie występowania znaku Save-Data w kodzie po stronie serwera

Stan Save-Data można wykryć w JavaScript za pomocą właściwości navigator.connection.saveData, ale czasami lepiej jest wykrywać go po stronie serwera. W niektórych przypadkach wykonanie JavaScriptu może się nie udać. Dodatkowo wykrywanie po stronie serwera to jedyny sposób na modyfikowanie kodu przed wysłaniem go do klienta, co jest przydatne w niektórych z najbardziej korzystnych przypadków użycia Save-Data.

Konkretna składnia wykrywania nagłówka Save-Data w kodzie po stronie serwera zależy od używanego języka, ale podstawowa idea powinna być taka sama w przypadku każdego zaplecza aplikacji. Na przykład w PHP nagłówki żądań są przechowywane w $_SERVER superglobalnej tablicy pod indeksami zaczynającymi 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 ten warunek przed wysłaniem do klienta jakiegokolwiek kodu, zmienna $saveData będzie zawierać stan Save-Data i będzie dostępna w dowolnym miejscu na stronie. Po wyjaśnieniu tego mechanizmu przyjrzyjmy się kilku przykładom, jak możemy go używać, aby ograniczyć ilość danych wysyłanych do użytkownika.

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

Typowy przypadek użycia obrazów w internecie polega na wyświetlaniu ich w zestawach po 2: jeden obraz na ekrany „standardowe” (1x) i drugi, 2 razy większy (2x), na ekrany o wysokiej rozdzielczości (np. Retina Display). Ta klasa ekranów o wysokiej rozdzielczości nie jest ograniczona do urządzeń z wyższej półki i staje się coraz bardziej popularna. W przypadku, gdy preferowane jest lżejsze działanie 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 znacznik wysyłany 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 przesyłanie mniejszej ilości danych. Jeśli nie chcesz modyfikować kodu po stronie serwera, możesz osiągnąć ten sam efekt, korzystając z modułu do przekształcania adresów URL, np. Apachemod_rewrite. 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; ?>">

W tym miejscu możesz kierować reklamy na klasę save-data w elemencie <html> w arkuszu 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 przykładzie kodu HTML powyżej, lub całkowicie pominąć niektóre zasoby.

Pomijaj nieistotne obrazy

Niektóre treści graficzne w internecie są po prostu nieistotne. Chociaż takie obrazy mogą być ciekawym dodatkiem do treści, nie są pożądane przez osoby, które chcą w pełni wykorzystać swoje pakiety danych. W najprostszym przypadku użycia Save-Data możemy użyć wcześniejszego kodu wykrywania PHP 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ć wyraźny wpływ, co widać na poniższym rysunku:

Oczywiście pominięcie obrazów to nie jedyna możliwość. Możesz też podjąć działaniaSave-Data, aby zrezygnować z wysyłania innych zasobów o mniejszym znaczeniu, takich jak niektóre kroje pisma.

Pomijaj zbędne czcionki internetowe

Czcionki internetowe zwykle nie stanowią tak dużej części całkowitego ładunku strony jak obrazy, ale są dość popularne. Nie zużywają też nieznacznej ilości danych. Sposób pobierania i renderowania czcionek przez przeglądarki 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 w przypadku użytkowników, którzy chcą korzystać z bardziej minimalistycznych stron, warto pominąć nieistotne czcionki internetowe. Save-Data sprawia, że jest to dość proste.

Załóżmy na przykład, że w swojej witrynie używasz czcionki Fira Sans z Google Fonts. Fira Sans to świetna czcionka do tekstu podstawowego, ale może nie jest tak ważna dla użytkowników, którzy chcą oszczędzać dane. Dodając klasę save-data do elementu <html>, gdy występuje nagłówek Save-Data, możemy napisać style, które początkowo wywołują nieistotną czcionkę, ale rezygnują z niej, 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 spekulatywnie wczytuje zasoby CSS (w tym czcionki internetowe), najpierw stosując style do DOM, a potem sprawdzając, czy któreś elementy HTML wywołują zasoby w arkuszu stylów. Jeśli ktoś przypadkowo włączy 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ć lepsza dla użytkowników, którzy chcą oszczędzać dane.

Podsumowanie

Nagłówek Save-Data nie ma wielu niuansów – jest włączony lub wyłączony, a aplikacja musi zapewniać odpowiednie funkcje w zależności od jego ustawienia, niezależnie od przyczyny.

Niektórzy użytkownicy mogą na przykład nie zezwolić na tryb oszczędzania danych, jeśli podejrzewają, że spowoduje on utratę treści lub funkcji aplikacji, nawet w przypadku słabego połączenia. Z drugiej strony niektórzy użytkownicy mogą włączać ten tryb domyślnie, aby strony były jak najmniejsze i najprostsze, nawet w przypadku dobrego połączenia. Najlepiej założyć, że użytkownik chce korzystać z pełnej i nieograniczonej wersji aplikacji, dopóki nie uzyskasz wyraźnego sygnału, że jest inaczej, w postaci działania użytkownika.

Jako właściciele witryn i deweloperzy internetowi weźmy na siebie odpowiedzialność za zarządzanie treściami, aby poprawić komfort użytkowników, którzy mają ograniczone możliwości korzystania z danych i ponoszenia kosztów.

Więcej informacji o Save-Data i świetne przykłady znajdziesz w artykule Pomaganie użytkownikomSave Data.