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 są zgodni, że szybsze i lżejsze strony internetowe są bardziej satysfakcjonujące dla użytkowników, ułatwiają zrozumienie i utrzymanie treści, a także zwiększają liczbę konwersji i przychody. Badania Google wykazały, że „...zoptymalizowane strony wczytują się 4 razy szybciej niż strona oryginalna i mają o 80% mniej bajtów. Szybsze wczytywanie spowodowało również wzrost ruchu na nich o 50%”.
Mimo że liczba połączeń 2G nareszcie maleje, w 2015 roku 2G pozostałe dominującą technologią sieciową. Dostępność sieci 3G i 4G szybko rośnie, ale związane z nią koszty posiadania i ograniczenia sieci nadal mają istotny wpływ na setki milionów użytkowników.
To są solidne argumenty przemawiające za optymalizacją strony.
Istnieją alternatywne metody zwiększania szybkości witryny bez pomocy programistów, np. 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 przy użyciu wyników wyszukiwania. Popularność tych usług wskazuje, że deweloperzy nie zaspokajają należytej potrzeby użytkowników, którzy chcą szybko i łatwo korzystać z szybkich i prostych aplikacji oraz stron. Osiągnięcie tego celu to jednak złożona i czaso trudna ścieżka.
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 może dostosować stronę internetową i zapewnić użytkownikom z ograniczeniami kosztów i wydajnością optymalną wygodę korzystania z witryny.
Obsługiwane przeglądarki (poniżej) pozwalają użytkownikowi włączyć tryb *danych-oszczędzania, który daje przeglądarce uprawnienia do zastosowania zestawu optymalizacji w celu zmniejszenia ilości danych niezbędnych do wyrenderowania 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ługiwane przeglądarki
- Chrome w wersji 49 i nowszych reklamuje
Save-Data, gdy użytkownik włączy opcję „Oszczędzanie danych” na urządzeniach mobilnych lub rozszerzenie „Oszczędzanie danych” w przeglądarkach na komputerach. - Opera 35 i nowsze wyświetla reklamę
Save-Data, gdy użytkownik włączy tryb „Opera Turbo” na komputerze lub „Oszczędzanie danych” w przeglądarkach na Androida. - Yandex w wersji 16.2 lub nowszej reklamuje usługę
Save-Datapo włączeniu trybu turbo na komputerze lub w przeglądarkach 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 określa preferencję klienta w zakresie mniejszego wykorzystania danych ze względu na wysokie koszty transferu, powolne połączenie lub inne przyczyny.
Gdy użytkownik włączy tryb oszczędzania danych w przeglądarce, przeglądarka dołącza nagłówek Save-Data do wszystkich żądań wychodzących (zarówno HTTP, jak i HTTPS).
W związku z tym przeglądarka reklamuje w nagłówku (Save-Data: on) tylko jeden token *on-, ale w przyszłości może zostać rozszerzony, aby uwzględnić inne preferencje użytkownika.
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.
}
}
Sprawdzanie obecności obiektu connection w obiekcie navigator jest kluczowe, ponieważ reprezentuje interfejs Network Information API, który jest zaimplementowany tylko w przeglądarkach Chrome, Chrome na Androida i Samsung. Następnie musisz tylko sprawdzić, czy navigator.connection.saveData ma wartość true. Możesz wtedy zaimplementować dowolne operacje oszczędzania danych, które spełnią ten warunek.
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
- Jeśli korzystasz z usługi
Save-Data, udostępnij im urządzenia, które ją obsługują, i umożliwij użytkownikom łatwe przełączanie się między interfejsami. Na przykład:- Powiadom użytkowników, że usługa
Save-Datajest obsługiwana, i zachęć ich do jej używania. - Aplikacje tego typu pozwalają użytkownikom zidentyfikować i wybrać tryb za pomocą odpowiednich promptów, intuicyjnych przycisków włączania i wyłączania oraz pól wyboru.
- Po wybraniu trybu oszczędzania danych poinformuj o tym i w łatwy i oczywisty sposób wskaż go, jak wyłączyć go i w razie potrzeby powrócić do pełnej wersji.
- Powiadom użytkowników, że usługa
- Pamiętaj, że lekkie aplikacje nie są mniejsze. Nie pomijają ważnych funkcji ani danych, ale lepiej wiedzą związane z nimi koszty i wrażenia użytkownika. Na przykład:
- Aplikacja galerii zdjęć może wyświetlać podglądy w niższej rozdzielczości lub używać mechanizmu karuzeli, który nie wymaga dużego nakładu kodu.
- Wyszukiwarka może zwracać mniej wyników naraz, ograniczać liczbę wyników z dużą ilością multimediów lub ograniczać liczbę zależności wymaganych do wyrenderowania strony.
- Witryna poświęcona wiadomościom może wyświetlać mniej artykułów, pomijać mniej popularne kategorie lub wyświetlać mniejsze podglądy treści multimedialnych.
- Podaj logikę serwera w celu sprawdzenia nagłówka żądania
Save-Datai rozważ udostępnienie alternatywnej, lżejszej odpowiedzi dla strony, gdy jest 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 wskazać nadrzędne pamięci podręczne, że powinny buforować dane w pamięci podręcznej i wyświetlać tę wersję tylko wtedy, gdy dostępny jest nagłówek żądaniaSave-Data. Więcej informacji znajdziesz w sprawdzonych metodach interakcji z pamięcią podręczną.
- Jeśli udostępniasz odpowiedź alternatywną na podstawie nagłówka
- Jeśli używasz skryptu service worker, aplikacja może wykryć, czy opcja zapisywania danych jest włączona, sprawdzając obecność nagłówka żądania
Save-Datalub wartość właściwościnavigator.connection.saveData. Jeśli ta opcja jest włączona, zastanów się, czy można zmodyfikować żądanie, aby pobrać mniej bajtów, czy użyć pobranej już odpowiedzi. - Rozważ dodanie do
Save-Datainnych sygnałów, np. informacji o typie połączenia i technologii użytkownika (patrz NetInfo API). Możesz na przykład chcieć, aby wszyscy użytkownicy korzystający z połączenia 2G mogli korzystać z prostej wersji, nawet jeśli usługaSave-Datanie jest włączona. Z kolei to, że użytkownik korzysta z „szybkiego” połączenia 4G, nie oznacza, że nie jest zainteresowany oszczędzaniem danych (np. podczas roamingu). Dodatkowo możesz zwiększyć obecność produktuSave-Dataza pomocą wskazówki dla klientaDevice-Memory, aby jeszcze lepiej dostosować ją do potrzeb użytkowników urządzeń z ograniczoną pamięcią. Pamięć urządzenia użytkownika jest również rozgłaszana we wskazówce klientanavigator.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. Podczas lektury możesz wymyślić inne przykłady użycia, więc warto poeksperymentować, aby przekonać się, jakie dają możliwości.
Sprawdzam kod po stronie serwera Save-Data
Choć stan Save-Data można wykryć w JavaScript za pomocą właściwości navigator.connection.saveData, czasami lepiej jest wykryć go po stronie serwera. W niektórych przypadkach może się nie udać. Poza tym wykrywanie po stronie serwera to jedyny sposób modyfikowania znaczników przed wysłaniem ich do klienta, co jest związane z jednym z najkorzystniejszych przypadków użycia Save-Data.
Konkretna składnia wykrywania nagłówka Save-Data w kodzie po stronie serwera zależy od użytego języka, ale podstawowa zasada powinna być taka sama w każdej 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 zaznaczysz to pole przed wysłaniem jakichkolwiek znaczników do klienta, zmienna $saveData będzie zawierać stan Save-Data i będzie dostępna w dowolnym miejscu na stronie. Przeanalizujmy ten mechanizm i zobaczmy, jak 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 przypadkiem użycia obrazów w internecie są dwa zestawy obrazów: jeden na „standardowe” ekrany (1x) i drugi dwa razy większy (2x) na ekranach o wysokiej rozdzielczości (np. Wyświetlacz Retina). Ta klasa ekranów o wysokiej rozdzielczości staje się coraz bardziej powszechna i nie musi ograniczać się do urządzeń wysokiej klasy. Jeśli preferujesz lżejszy interfejs aplikacji, lepiej przesyłać do tych ekranów obrazy o niższej rozdzielczości (1x), a nie większych (2x) odmianach. Aby to osiągnąć, gdy dostępny jest nagłówek Save-Data, wystarczy zmienić 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 łatwo jest dostosować się do potrzeb osoby, która prosi o przesłanie mniejszej ilości danych. Jeśli nie chcesz zmieniać znaczników w backendzie, możesz osiągnąć taki sam efekt, korzystając z modułu przepisywania adresów URL takiego jak Apache mod_rewrite. Istnieją przykłady, jak to zrobić 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; ?>">
Możesz tu ustawić kierowanie na klasę save-data w elemencie <html> w stylu CSS, aby zmienić sposób wyświetlania obrazów. Możesz wysłać obrazy tła o niskiej rozdzielczości na ekrany o wysokiej rozdzielczości, tak jak w przykładzie powyżej, lub całkowicie pominąć niektóre zasoby.
Pomiń mniej ważne zdjęcia
Niektóre treści graficzne w internecie są po prostu mało ważne. Takie zdjęcia mogą stanowić dobrą dodatki do treści, ale mogą nie być zadowalające dla osób, które starają się wycisnąć wszystko z abonamentów z pomiarem użycia danych. W najprostszym przypadku użycia funkcji Save-Data możemy użyć wcześniejszego kodu wykrywania PHP i pominąć niepotrzebne 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:
Oczywiście pominięcie obrazów nie jest jedyną możliwością. Możesz też postąpić w odniesieniu do Save-Data, aby zrezygnować z wysyłania innych niekrytycznych zasobów, takich jak określone kroje pisma.
Pomiń mniej ważne czcionki internetowe
Czcionki internetowe zwykle nie stanowią prawie tak dużego obciążenia danej strony, jak często mają to miejsce w przypadku obrazów, ale są dość popularne. Nie zużywają też nieistotnej ilości danych. Poza tym sposób pobierania i renderowania czcionek przez przeglądarki jest bardziej skomplikowany, niż mogłoby się wydawać. Pojęcia takie jak FOIT i FOUT oraz heurystyka przeglądarki sprawiają, że renderowanie jest bardziej złożone.
W takiej sytuacji może być jasne, że warto pominąć mniej ważne czcionki internetowe i udostępnić je użytkownikom, którym zależy na wygodnym korzystaniu z witryny. Dzięki Save-Data jest to całkiem łatwe.
Załóżmy np., że w swojej witrynie umieścisz Fira Sans z Google Fonts. Fira Sans to świetna czcionka do tekstu treści,
ale może nie jest aż tak ważna dla użytkowników, którzy próbują 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 obecny jest 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 zostawić fragment kodu <link> z Google Fonts, ponieważ przeglądarka spekulacyjnie wczytuje zasoby CSS (w tym czcionki internetowe), stosując najpierw style do interfejsu DOM, a następnie sprawdzając, czy któreś z elementów HTML wywołują któreś z zasobów w arkuszu stylów. Jeśli ktoś zdarzy się przy włączonym interfejsie Save-Data, Fira Sans nigdy się nie załaduje, ponieważ model DOM nigdy go nie wywołuje. Zamiast niej włączy się {8}. Nie jest to tak wygodne jak Fira Sans, ale
może być bardziej przydatne dla użytkowników, którzy starają się zwiększyć limit danych.
Podsumowanie
W nagłówku Save-Data nie ma zbyt wielu niuansów – jest on włączony lub wyłączony, a aplikacja odpowiada za zapewnienie odpowiednich funkcji w zależności od ustawienia, niezależnie od przyczyny.
Na przykład niektórzy użytkownicy mogą nie zezwolić na tryb oszczędzania danych, jeśli podejrzewają, że nastąpi utrata zawartości lub funkcji aplikacji, nawet w przypadku słabego połączenia. I na odwrót: niektórzy użytkownicy mogą włączyć tę opcję w celu zachowania jak najmniejszych i prostych stron nawet przy dobrym połączeniu internetowym. Najlepiej zakładać w aplikacji, że użytkownik chce mieć pełny i nieograniczony komfort obsługi, dopóki nie wyraźnie poinformujesz użytkownika, że jest inaczej.
Jako właściciele witryn i programiści stron internetowych odpowiadamy za zarządzanie naszymi treściami, aby poprawić wrażenia użytkowników, którzy mają ograniczony dostęp do danych i ograniczają koszty.
Więcej informacji o właściwości Save-Data i znakomite przykłady praktyczne znajdziesz w artykule Pomóż użytkownikom Save Data.