La richiesta di hint del client Save-Data
intestazione
disponibili nei browser Chrome, Opera e Yandex,
consentono agli sviluppatori di offrire
applicazioni più veloci per gli utenti che attivano la modalità di risparmio dati nel browser.
La necessità di creare pagine leggere
Tutti concordano sul fatto che le pagine web più veloci e leggere offrano un'esperienza utente un'esperienza migliore, migliorare la comprensione e la fidelizzazione dei contenuti di aumento delle conversioni e delle entrate. Google ricerca ha dimostrato che "...le pagine ottimizzate si caricano quattro volte più velocemente rispetto alla pagina originale e utilizzano l'80% di byte in meno. Poiché queste pagine si caricano molto più velocemente, abbiamo registrato anche un aumento del 50% nel traffico verso queste pagine".
E, sebbene il numero di connessioni 2G sia finalmente disponibile sul rifiutare, Il 2G è stata ancora la rete dominante per la disabilità nel 2015. La penetrazione e la disponibilità di reti 3G e 4G stanno crescendo rapidamente, ma i costi di proprietà e i vincoli di rete associati sono ancora fattore significativo per centinaia di milioni di utenti.
Questi sono degli argomenti convincenti per l'ottimizzazione della pagina.
Esistono metodi alternativi per migliorare la velocità del sito senza uno sviluppatore diretto come i browser proxy e i servizi di transcodifica. Sebbene tali sono molto popolari, presentano notevoli svantaggi: la semplicità compressione di immagini e testo (e talvolta inaccettabile), impossibilità di elaborare pagine sicure (HTTPS), ottimizzando solo le pagine visitate tramite un risultato di ricerca e altro ancora. La popolarità di questi servizi di per sé è un indicatore che il Web gli sviluppatori non rispondono correttamente all'elevata richiesta di velocità e leggerezza degli utenti applicazioni e pagine. Ma raggiungere questo obiettivo è un compito complesso e a volte un percorso difficile.
Intestazione della richiesta Save-Data
Una tecnica abbastanza semplice è quella di lasciare che sia il browser ad aiutarti utilizzando il comando
Intestazione della richiesta Save-Data
. Se identifichi questa intestazione, una pagina web può personalizzare
e offrire un'esperienza utente ottimizzata
a limiti di costi e prestazioni
utenti.
I browser supportati (di seguito) consentono all'utente di attivare una modalità di *risparmio dati- che autorizza il browser ad applicare un insieme di ottimizzazioni per ridurre necessaria per il rendering della pagina. Quando questa funzionalità è esposta oppure pubblicizzato, il browser potrebbe richiedere immagini a risoluzione più bassa, rinviare il caricamento di alcune risorse o instradare le richieste attraverso un servizio che applica altri ottimizzazioni specifiche dei contenuti, come la compressione di risorse di immagini e testo.
Supporto browser
- Chrome 49+ pubblicizza
Save-Data
quando l'utente attiva la funzionalità "Risparmio dati" sull'app mobile oppure l'opzione "Risparmio dati" sui browser desktop. - Opera 35+ pubblicizza
Save-Data
quando l'utente attiva "Opera Turbo" su computer, o "Risparmio dati" opzione sui browser Android. - Yandex 16.2+ pubblicizza
Save-Data
quando Turbo è attivata su computer o dispositivi mobili dal browser.
Rilevamento dell'impostazione Save-Data
in corso...
Per determinare quando inviare la "luce" la tua esperienza agli utenti,
l'applicazione può controllare l'intestazione della richiesta di suggerimento del client Save-Data
. Questo
intestazione della richiesta indica la preferenza del client per un utilizzo ridotto dei dati a causa
costi di trasferimento elevati, velocità di connessione lente o altri motivi.
Quando l'utente attiva la modalità di risparmio dati nel proprio browser, il browser aggiunge
l'intestazione della richiesta Save-Data
a tutte le richieste in uscita (sia HTTP che HTTPS).
Al momento della stesura del presente documento, il browser pubblicizza solo un token *on- nell'intestazione
(Save-Data: on
), ma questa modifica potrebbe essere estesa in futuro per indicare un altro utente
preferenze.
Inoltre, è possibile rilevare se Save-Data
è attivato in JavaScript:
if ('connection' in navigator) {
if (navigator.connection.saveData === true) {
// Implement data saving operations here.
}
}
Controllo della presenza dell'oggetto connection
all'interno di navigator
è fondamentale, in quanto rappresenta l'API Network Information, che è
implementato nei browser Internet Chrome, Chrome per Android e Samsung. Da
lì, devi solo verificare se navigator.connection.saveData
è uguale a
true
e potrai implementare qualsiasi operazione di salvataggio dei dati in questa condizione.
![La
Intestazione Save-Data rivelata negli Strumenti per sviluppatori di Chrome mostrata insieme alla
Estensione Risparmio dati.](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-save-data/image/the-save-data-header-reve-3d6257f960c6c.png?authuser=5&hl=it)
Se la tua applicazione utilizza un servizio
worker, può
Controllare le intestazioni delle richieste e applicare la logica pertinente per ottimizzare l'esperienza.
In alternativa, il server può cercare le preferenze annunciate nel
Save-Data
richiede un'intestazione e restituisce una risposta alternativa (diversa)
markup, immagini e video più piccoli e così via.
Suggerimenti e best practice per l'implementazione
- Quando utilizzi
Save-Data
, fornisci alcuni dispositivi UI che la supportano e consentano agli utenti per passare facilmente da un'esperienza all'altra. Ad esempio:- Comunica agli utenti che
Save-Data
è supportato e incoraggiali a utilizzarlo. - Consenti agli utenti di identificare e scegliere la modalità con prompt appropriati e pulsanti di attivazione e disattivazione intuitivi.
- Quando è selezionata la modalità Risparmio dati, annuncia e fornisci una descrizione semplice e ovvia per disattivarlo e tornare all'esperienza completa, se vuoi.
- Comunica agli utenti che
- Ricorda che le applicazioni leggere non sono applicazioni di dimensioni inferiori. Non
funzionalità o dati importanti, diventano più consapevoli
in termini di costi e esperienza utente. Ad esempio:
- Un'applicazione galleria fotografica può offrire anteprime a bassa risoluzione o utilizzare una meccanismo a carosello che richiede molto codice.
- Un'applicazione di ricerca potrebbe restituire meno risultati alla volta; limita il numero di o riduci il numero di dipendenze necessarie per il rendering della pagina.
- Un sito orientato alle notizie può mostrare meno notizie, omettere categorie meno popolari o fornire anteprime multimediali più piccole.
- Fornisci la logica del server per verificare l'intestazione della richiesta
Save-Data
e valutare fornire una risposta di pagina alternativa e leggera quando è abilitata, ad esempio ridurre il numero di risorse e dipendenze richieste, applicare criteri più aggressivi compressione delle risorse e così via.- Se pubblichi una risposta alternativa basata sull'intestazione
Save-Data
, ricordati di aggiungerlo all'elenco Vary -Vary: Save-Data
- per indicare memorizza nella cache upstream che devono memorizzare nella cache e pubblicare questa versione solo se L'intestazione della richiestaSave-Data
è presente. Per ulteriori dettagli, consulta le best practice della con le cache.
- Se pubblichi una risposta alternativa basata sull'intestazione
- Se utilizzi un service worker, la tua applicazione può rilevare quando viene eseguito il salvataggio dei dati
viene attivata controllando la presenza della richiesta
Save-Data
intestazione o controllando il valore dell'attributonavigator.connection.saveData
proprietà. Se abilitato, valuta se puoi riscrivere la richiesta per recuperare meno byte o utilizza una risposta già recuperata. - Valuta la possibilità di integrare
Save-Data
con altri indicatori, come informazioni su il tipo di connessione e la tecnologia dell'utente (vedi NetInfo API). Ad esempio, vogliamo offrire un'esperienza leggera a tutti gli utenti che utilizzano una connessione 2G, anche seSave-Data
non è abilitato. Al contrario, solo perché l'utente è di tipo "rapido" 4G connessione non significa che il cliente non è interessato a salvare i dati, perché ad esempio in roaming. Inoltre, potresti aumentare la presenzaSave-Data
con il suggerimento clientDevice-Memory
per adattarsi ulteriormente agli utenti su su dispositivi con memoria limitata. La memoria del dispositivo dell'utente è pubblicizzata anche Suggerimento clientnavigator.deviceMemory
.
Ricette
I risultati che puoi ottenere tramite Save-Data
si limitano solo ai risultati che riesci a raggiungere
con. Per darti un'idea di cosa puoi fare, vediamo un paio di esempi
d'uso diversi. Mentre leggi queste informazioni, potresti trovare altri casi d'uso, quindi
fai degli esperimenti e scopri le possibilità.
Controllo di Save-Data
nel codice lato server in corso...
Mentre lo stato Save-Data
è un elemento che puoi rilevare in JavaScript tramite
navigator.connection.saveData
, rileva che sul lato server è
a volte preferibile. In alcuni casi, JavaScript può non essere eseguito. Inoltre,
il rilevamento lato server è l'unico modo per modificare il markup prima che venga inviato al server
coinvolto in alcuni dei casi d'uso più vantaggiosi di Save-Data
.
La sintassi specifica per rilevare l'intestazione Save-Data
nel codice lato server
dipende dal linguaggio utilizzato, ma l'idea di base dovrebbe essere la stessa per qualsiasi
del backend dell'applicazione. In PHP, ad esempio, le intestazioni delle richieste sono archiviate nel
$_SERVER
superglobale
array agli indici
che iniziano con HTTP_
. Ciò significa che puoi rilevare l'intestazione Save-Data
tramite
Controllare l'esistenza e il valore della variabile $_SERVER["HTTP_SAVE_DATA"]
in questo modo:
// 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;
}
Se effettui questo controllo prima di inviare qualsiasi markup al cliente, $saveData
conterrà lo stato Save-Data
e sarà disponibile ovunque per
usare nella pagina. Dopo aver illustrato questo meccanismo, guardiamo alcuni esempi
come possiamo utilizzarlo per limitare la quantità di dati che inviamo all'utente.
Pubblicare immagini a bassa risoluzione per schermi ad alta risoluzione
Un caso d'uso comune per le immagini sul web prevede la pubblicazione di immagini in gruppi di due:
Un'immagine per "standard" schermo (1x) e un'altra immagine due volte più grande
(2x) per schermi ad alta risoluzione (ad es. Retina
Display). Questa classe di
con risoluzione minima non è necessariamente limitata ai dispositivi di fascia alta,
sta diventando sempre più comune. Nei casi in cui per un'applicazione più leggera
potrebbe essere prudente inviare immagini a bassa risoluzione (1x) a questi
anziché varianti più grandi (2x). A questo scopo, quando Save-Data
è presente, ma modifichiamo semplicemente il markup inviato al client:
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
}
Questo caso d'uso è un esempio perfetto di quanto poco impegno sia richiesto
che ti sta specificamente chiedendo di inviare meno dati. Se non ti piace
modificando il markup sul backend, potete ottenere lo stesso risultato anche
utilizzando un modulo di riscrittura di URL come Apache's
mod_rewrite
. Là
sono esempi di come raggiungere
questo con
una configurazione relativamente scarsa.
Puoi anche estendere questo concetto alle proprietà background-image
del CSS utilizzando
semplicemente aggiungendo una classe all'elemento <html>
:
<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">
Da qui, puoi scegliere come target la classe save-data
sull'elemento <html>
nel tuo
CSS per modificare la modalità di pubblicazione delle immagini. Potresti inviare uno sfondo a bassa risoluzione
le immagini su schermi ad alta risoluzione, come mostrato nell'esempio HTML riportato sopra, oppure ometti
alcune risorse.
Ometti immagini non essenziali
Alcuni contenuti di immagini sul web sono semplicemente non essenziali. Sebbene queste immagini possano
per aggiungere elementi interessanti ai contenuti, potrebbero non essere appetibili a chi cerca di
spremere tutto il possibile dai piani di dati a consumo. In quello che forse è il più semplice
caso d'uso di Save-Data
, possiamo usare il codice di rilevamento PHP della versione precedente e omettere
markup delle immagini non essenziali:
<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
}
Questa tecnica può sicuramente avere un effetto pronunciato, come puoi vedere nel nella figura seguente:
![Confronto di immagini non critiche
vengono caricate quando i dati di salvataggio non sono presenti, mentre le stesse immagini vengono omesse.
quando è presente Save-Data.](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-save-data/image/a-comparison-non-critica-f5ac2f016e117.png?authuser=5&hl=it)
Naturalmente, l'omissione di immagini non è l'unica possibilità. Puoi anche intervenire su
Save-Data
per evitare di inviare altre risorse non critiche, come alcune
i caratteri tipografici.
Ometti caratteri web non essenziali
Sebbene i caratteri web di solito non rappresentino una parte quasi del tutto il totale di una determinata pagina come spesso accade per le immagini, sono comunque molto popolari. Non consumano una quantità non significativa di dati di Google. Inoltre, il modo in cui i browser recuperano e visualizzano i caratteri è più complicato rispetto a si potrebbe pensare, con concetti come FOIT FOUT e browser euristica che rende il rendering un'operazione articolata.
Potrebbe essere ovvio che tu voglia escludere le risorse
per gli utenti che desiderano esperienze più snelle. Save-Data
rende questo un
una cosa ragionevolmente indolore.
Ad esempio, supponiamo che tu abbia incluso Fira
Sans di Google
Caratteri sul tuo sito. Fira Sans è un corpo eccellente
copia carattere, ma forse non è così importante per gli utenti che tentano di salvare i dati. Aggiungendo
una classe save-data
all'elemento <html>
quando l'intestazione Save-Data
è
possiamo scrivere stili che richiamino inizialmente il carattere non essenziale,
ma poi la disattiva quando è presente l'intestazione 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;
}
Con questo approccio, puoi lasciare lo snippet <link>
di Google Fonts in
perché il browser carica in modo speculativo le risorse CSS (incluse le risorse
) applicando prima gli stili al DOM e poi controllando se c'è
richiamano una qualsiasi delle risorse nel foglio di stile. Se qualcuno si verifica
con Save-Data
attivo, Fira Sans non verrà mai caricato perché il DOM con stile non non verrà mai
lo richiama. Arial, invece, interverrà. Non è bello come Fira Sans, ma
è preferibile che gli utenti vogliano ampliare i propri piani dati.
Riepilogo
L'intestazione Save-Data
non ha molte sfumature; sia acceso o spento
l'applicazione ha l'onere di fornire esperienze appropriate in base
a prescindere dal motivo.
Ad esempio, alcuni utenti potrebbero non consentire la modalità Risparmio dati se sospettino che si verifica una perdita di funzioni o contenuti dell'app, anche in caso di connettività scadente la situazione. Al contrario, alcuni utenti potrebbero abilitarla ovviamente per pagine il più piccole e semplici possibile, anche in una buona situazione di connettività. È meglio che l'app presuma che l'utente voglia l'accesso completo e illimitato esperienza utente immediata finché non ricevi indicazioni chiare tramite un utente un'azione.
In qualità di proprietari di siti e sviluppatori web, prendiamoci la responsabilità di gestire i nostri contenuti al fine di migliorare l'esperienza utente per gli utenti con limiti di dati e costi.
Per ulteriori dettagli su Save-Data
ed esempi pratici utili, consulta
Utenti Save Data
.