Distribuire applicazioni veloci e leggere con il risparmio di dati

Dave Gash

Ilya Grigorik

Jeremy Wagner

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.

Attivazione dell'estensione Risparmio dati nella versione desktop di Chrome.

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.

Suggerimento: se utilizzi PageSpeed for Apache o Nginx per ottimizzare le pagine, consulta questo discussione per scoprire come per consentire agli utenti di risparmiare Save-Data._

Suggerimenti e best practice per l'implementazione

1. 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.
2. 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.
3. 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 richiesta Save-Data è presente. Per ulteriori dettagli, consulta le best practice della con le cache.
4. 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'attributo navigator.connection.saveData proprietà. Se abilitato, valuta se puoi riscrivere la richiesta per recuperare meno byte o utilizza una risposta già recuperata.
5. 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 se Save-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 presenza Save-Data con il suggerimento client Device-Memory per adattarsi ulteriormente agli utenti su su dispositivi con memoria limitata. La memoria del dispositivo dell'utente è pubblicizzata anche Suggerimento client navigator.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:

Un confronto tra le immagini non critiche caricate quando viene selezionato Save-Data assenti, mentre le stesse immagini vengono omesse quando viene presenti.

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.