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

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

Potrzeba uproszczonych stron

Statystyki Weblight

Wszyscy zgadzają się, że szybsze i lżejsze strony internetowe zapewniają użytkownikom lepsze wrażenia, lepsze zrozumienie treści i utrzymanie ich uwagi, a także zwiększają liczbę konwersji i przychody. Badania Google wykazały, że „...zoptymalizowane strony wczytują się 4 razy szybciej niż ich oryginalne wersje” i wykorzystują o 80% mniej bajtów. Szybsze wczytywanie spowodowało również zwiększenie ruchu na zoptymalizowanych stronach o 50%”.

Choć liczba połączeń 2G wreszcie maleje, w 2015 roku nadal dominującą technologią sieciową była 2G. Zasięg i dostępność sieci 3G i 4G gwałtownie rośnie, ale związane z nimi koszty posiadania i ograniczenia sieciowe są nadal ważnym czynnikiem dla setek milionów użytkowników.

To silne argumenty za optymalizowaniem strony.

Istnieją alternatywne metody poprawiania szybkości witryny bez angażowania programistów, np. przeglądarki proxy i usługi transkodowania. Chociaż takie usługi są dość popularne, mają jednak poważne wady, np. prostą (i czasem nieakceptowalną) kompresję obrazów i tekstów, problemy z przetwarzaniem bezpiecznych stron (HTTPS), optymalizowanie tylko stron odwiedzonych za pomocą wyniku wyszukiwania i wiele innych. Wysoka popularność tych usług sama w sobie wskazuje, że deweloperzy niezbyt dobrze zaspokajają rosnące zapotrzebowanie użytkowników na szybkie i lekkie aplikacje oraz strony. Osiągnięcie tego celu to jednak skomplikowana i czasami trudna ścieżka.

Nagłówek żądania Save-Data

Jedną z prostych metod jest umożliwienie przeglądarce korzystania z pomocy przy użyciu nagłówka żądania Save-Data. Dzięki temu można dostosować stronę internetową i zapewnić jej wygodę użytkownikom o ograniczonych kosztach i wydajności.

Obsługiwane przeglądarki (poniżej) pozwalają użytkownikowi włączyć *tryb oszczędzania danych, który umożliwia przeglądarce zastosowanie zestawu optymalizacji zmniejszających ilość danych wymaganych do wyrenderowania strony. Gdy ta funkcja jest ujawniana lub reklamowana, przeglądarka może żądać obrazów w niższej rozdzielczości, opóźniać wczytywanie niektórych zasobów lub kierować żądania przez usługę stosującą inne optymalizacje związane z treścią, np. kompresję obrazów i zasobów tekstowych.

Obsługiwane przeglądarki

  • Chrome 49 i nowsze wersje reklamują: Save-Data, gdy użytkownik włączy opcję „Oszczędzanie danych” na urządzeniu mobilnym, a w przeglądarkach na komputerze – rozszerzenie „Oszczędzanie danych”.
  • Opera 35+ reklamuje Save-Data, gdy użytkownik włączy tryb „OperaTurbo” na komputerze, lub opcję „Oszczędność danych” w przeglądarkach na Androida.
  • Yandex 16.2 lub nowszy reklamuje Save-Data, gdy na komputerach i w przeglądarkach mobilnych jest włączony tryb turbo.

Wykrywam ustawienie Save-Data

Aby określić, kiedy udostępnić użytkownikom „lekki” interfejs, aplikacja może sprawdzać nagłówek żądania wskazówki dla klienta Save-Data. Ten nagłówek żądania wskazuje, że klient preferuje ograniczenie użycia danych z powodu wysokich kosztów przesyłania, wolnego połączenia lub innych przyczyn.

Gdy użytkownik włączy tryb oszczędzania danych w przeglądarce, do wszystkich żądań wychodzących (zarówno HTTP, jak i HTTPS) przeglądarka dołączy nagłówek żądania Save-Data. Na razie przeglądarka rozgłasza tylko 1 token *on w nagłówku (Save-Data: on), ale w przyszłości możemy to zmienić, aby wskazać inne ustawienia użytkownika.

Dodatkowo można sprawdzić, czy usługa Save-Data jest włączona w języku JavaScript:

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 Chrome, Chrome na Androida i przeglądarkach internetowych Samsung. Teraz musisz tylko sprawdzić, czy navigator.connection.saveData ma wartość true, i wdrożyć w tym warunku dowolne operacje oszczędzania danych.

Nagłówek Zapisz dane widoczny w Narzędziach dla programistów w Chrome obok rozszerzenia Oszczędzanie danych.
Włącz rozszerzenie Oszczędzanie danych w Chrome na komputerze.

Jeśli Twoja aplikacja używa skryptu service worker, może sprawdzić nagłówki żądań i zastosować odpowiednią logikę w celu optymalizacji działania. Serwer może też poszukać reklamowanych preferencji w nagłówku żądania Save-Data i zwrócić alternatywną odpowiedź – inne znaczniki, mniejsze obrazy i filmy itd.

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

  1. Jeśli używasz Save-Data, zapewnij kilka urządzeń z interfejsem, które go obsługują, i umożliw użytkownikom łatwe przełączanie się między różnymi wersjami. Na przykład:
    • Powiadom użytkowników, że usługa Save-Data jest obsługiwana, i zachęć ich do korzystania z niej.
    • Aplikacje tego typu pozwalają użytkownikom identyfikować i wybierać tryb za pomocą odpowiednich promptów oraz intuicyjnych przycisków lub pól wyboru do włączania i wyłączania.
    • Gdy wybrany jest tryb oszczędzania danych, poinformuj nas o tym i udostępnij prosty oraz oczywisty sposób jego wyłączenia oraz, w razie potrzeby, przywrócenia go do pełnej wersji.
  2. Pamiętaj, że lekkie aplikacje to nie mniej popularne aplikacje. Nie pomijają ważnych funkcji i danych, a po prostu lepiej rozumieją związane z tym koszty i wrażenia użytkowników. Na przykład:
    • Aplikacja galerii zdjęć może wyświetlać podgląd w niższej rozdzielczości lub używać mechanizmu karuzeli z dużą ilością kodu.
    • Wyszukiwarka może zwrócić mniej wyników jednocześnie, ograniczyć liczbę wyników z dużą ilością multimediów lub zmniejszyć liczbę zależności wymaganych do wyrenderowania strony.
    • Witryna poświęcona wiadomościom może pokazywać mniej artykułów, pomijać mniej popularne kategorie lub udostępniać mniejsze fragmenty treści multimedialnych.
  3. Udostępnij logikę serwera, aby sprawdzić nagłówek żądania Save-Data i rozważyć udostępnienie alternatywnej, lżejszej odpowiedzi strony, gdy jest ona włączona – np. zmniejsz liczbę wymaganych zasobów i zależności, zastosuj 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 poinformować górne pamięci podręczne, że powinny być w pamięci podręcznej i udostępniać tę wersję tylko wtedy, gdy istnieje nagłówek żądania Save-Data. 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 włączona jest opcja 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 przepisać żądanie, aby pobrać mniej bajtów, czy użyć już pobranej odpowiedzi.
  5. Rozważ uzupełnienie parametru Save-Data o inne sygnały, np. informacje o typie połączenia i technologii użytkownika (patrz NetInfo API). Możesz na przykład udostępnić uproszczone środowisko każdemu użytkownikowi korzystającego z połączenia 2G, nawet jeśli zasada Save-Data nie jest włączona. I na odwrót: to, że użytkownik korzysta z „szybkiego” połączenia 4G, nie oznacza, że nie jest zainteresowany oszczędzaniem danych, np. w roamingu. Możesz też uzupełnić obecność elementu Save-Data o wskazówkę klienta Device-Memory, aby lepiej dostosować się do użytkowników urządzeń z ograniczoną ilością pamięci. Pamięć urządzenia użytkownika jest też reklamowana we wskazówce klienta navigator.deviceMemory.

Szablony

To, co możesz osiągnąć za pomocą Save-Data, ogranicza się tylko do tego, co możesz sobie wyobrazić. Aby przybliżyć Ci możliwe możliwości, przyjrzymy się kilku przykładom. Czytając ten tekst, mogą Państwo wymyślić własne przypadki użycia, więc swobodnie poeksperymentować i zobaczyć, co jest możliwe.

Sprawdzam pole Save-Data w kodzie po stronie serwera

Chociaż stan Save-Data można wykryć w JavaScript za pomocą właściwości navigator.connection.saveData, czasami zalecane jest jego wykrycie po stronie serwera. W niektórych przypadkach JavaScript może się nie udać. Poza tym wykrywanie po stronie serwera to jedyny sposób modyfikowania znaczników przed wysłaniem ich do klienta. Ta metoda ma zastosowanie w kilku z najbardziej przydatnych przypadków użycia Save-Data.

Składnia wykrywania nagłówka Save-Data w kodzie po stronie serwera zależy od użytego języka, ale główna koncepcja powinna być taka sama w przypadku każdej aplikacji. Na przykład w języku 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 znaczników do klienta, zmienna $saveData będzie zawierać stan Save-Data i będzie dostępna do użycia na stronie w dowolnym miejscu. Przeanalizujmy ten mechanizm na kilku przykładach, aby ograniczyć ilość danych wysyłanych do użytkownika.

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

Typowym przypadkiem użycia obrazów w internecie jest prezentowanie 2 obrazów w zestawach: 1 obrazu dla „standardowych” ekranów (1x) i dwukrotnie większych (2x) do wyświetlania na ekranach o wysokiej rozdzielczości (np. Wyświetlacz Retina). Ta klasa ekranów o wysokiej rozdzielczości nie musi być ograniczona do urządzeń zaawansowanych i staje się coraz częstsza. W sytuacjach, gdy preferowana jest lżejsza aplikacja, lepiej wysyłać na te ekrany obrazy w niższej rozdzielczości (1x) zamiast większych (2x). Aby to zrobić, gdy występuje nagłówek 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
}

Ten przypadek użycia to świetny przykład tego, jak niewiele wysiłku trzeba włożyć, by spełnić oczekiwania osoby, która prosi o przesyłanie mniejszej ilości danych. Jeśli nie chcesz modyfikować znaczników w backendzie, możesz osiągnąć ten sam efekt, stosując moduł przepisywania adresów URL, taki jak Apache mod_rewrite. Istnieją przykłady, jak to osiągnąć przy stosunkowo niewielkiej konfiguracji.

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

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

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

Pomiń mniej ważne zdjęcia

Niektóre treści graficzne w internecie są po prostu zbędne. Takie zdjęcia mogą wzbogacać treści, ale mogą być nieprzydatne dla osób, które starają się wydobyć z planów danych z pomiarem użycia dane. W najprostszym przypadku użycia Save-Data możemy użyć kodu wykrywania PHP z wcześniejszego kodu i całkowicie pominąć mniej ważne 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 z pewnością daje wyraźne efekty, jak widać na ilustracji poniżej:

Porównanie obrazów niekrytycznych, które są wczytywane, gdy brakuje parametru Save-Data, z tymi samymi obrazami pomijanymi, gdy istnieje parametr Save-Data.
Porównanie obrazów niekrytycznych wczytywanych, gdy nie ma parametru Save-Data, z tymi samymi obrazami pomijanymi, gdy obecne są dane Save-Data.

Oczywiście pominięcie obrazów nie jest jedyną możliwością. Możesz też wykonać działanie na Save-Data, aby nie wysyłać innych zasobów o znaczeniu krytycznym, na przykład określonych krojów pisma.

Pomiń zbędne czcionki internetowe

Czcionki internetowe nie stanowią zazwyczaj prawie tak dużego ładunku na danej stronie, jak zwykle, ale nadal są całkiem popularne. Nie zużywają też zbyt wielu danych. Ponadto pobieranie i renderowanie czcionek przez przeglądarki jest bardziej skomplikowane, ponieważ takie pojęcia jak FOIT i FOUT oraz heurystyka przeglądarki sprawiają, że renderowanie jest złożone z różnych niuansów.

Z tego powodu warto zrezygnować z czcionek internetowych, które nie są niezbędne dla użytkowników, którym zależy na wygody użytkownika. Dzięki Save-Data jest to dość bezproblemowe.

Załóżmy na przykład, że w swojej witrynie używasz czcionki Fira San z Google Fonts. Fira Sans to świetna czcionka dla treści, ale być może nie jest tak ważna dla użytkowników, którzy chcą oszczędzać dane. Gdy dodasz klasę save-data do elementu <html> w momencie, gdy występuje nagłówek Save-Data, możemy pisać style, które najpierw wywołują niewystarczający krój czcionki, ale potem z niej rezygnuje, 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;
}

Korzystając z tego podejścia, możesz pozostawić fragment kodu <link> z Google Fonts bez zmian, ponieważ przeglądarka wczytuje zasoby CSS (w tym czcionki internetowe) spekulacyjnie, najpierw stosując style do elementu DOM, a potem sprawdzając, czy jakieś elementy HTML wywołują jakiekolwiek zasoby w arkuszu stylów. Jeśli ktoś ma włączoną funkcję Save-Data, Fira Sans nigdy nie będzie się ładować, ponieważ styl DOM nigdy go nie wywołuje. Zamiast tego do akcji wkracza VAST. Nie jest tak przyjemna jak Fira Sans, ale może być preferowana dla użytkowników chcących rozszerzyć pakiet danych.

Podsumowanie

Nagłówek Save-Data nie ma wielu niuansów – jest włączony lub wyłączony, a aplikacja ponosi ciężar zapewnienia odpowiednich treści zależnie od swojego ustawienia, niezależnie od przyczyny.

Na przykład niektórzy użytkownicy mogą nie zezwalać na tryb oszczędzania danych, jeśli podejrzewają, że może dojść do utraty treści lub funkcji aplikacji, nawet jeśli połączenie będzie słabe. Niektórzy użytkownicy mogą oczywiście sprawić, że strony będą maksymalnie małe i proste, nawet w przypadku dobrego połączenia. Najlepiej, aby aplikacja zakładała, że chce korzystać z pełnej i nieograniczonej usługi, dopóki nie poinformujesz użytkownika, że jest inaczej, po otrzymaniu wyraźnego działania.

Jako właściciele witryn i programiści stron internetowych wzięliśmy odpowiedzialność za zarządzanie treścią, by poprawić wygodę użytkowników korzystających z danych i ograniczyć koszty.

Więcej informacji na temat właściwości Save-Data i doskonałych praktycznych przykładów znajdziesz w artykule Pomagaj użytkownikomSave Data.