Introduzione
Un'app web veloce è un'app web di successo. Il tuo lavoro di sviluppatore non è finito finché non hai ottimizzato il rendimento reale e percepito della tua app. Non solo è semplicemente la cosa giusta da fare per garantire agli utenti un'esperienza eccellente, ma esistono motivi commerciali molto pratici e importanti per l'ottimizzazione. Amazon ha registrato un calo delle vendite dell'1% per ogni 100 ms di latenza del sito e Google ha registrato un calo del 20% del traffico per ogni 0, 5 secondi di ritardo (citazione). Si tratta di numeri reali con implicazioni reali per la tua attività e la tua app web.
La velocità del web è così importante che Google ha persino un intero progetto dedicato a rendere il web più veloce. Se hai bisogno di un altro motivo per ottimizzare il rendimento della tua app, Google ha annunciato che la velocità della pagina è stata aggiunta al suo algoritmo di ranking.
Esistono molte best practice pubblicate per ottimizzare le prestazioni della tua app web, tra cui due ottimi libri (High Performance Web Sites e Even Faster Web Sites). Le tecniche sul server (implementazione delle intestazioni di controllo della cache corrette) e sul client (fornitura degli attributi larghezza e altezza dell'immagine) vengono combinate in una strategia end-to-end per l'ottimizzazione del rendimento. Con così tanti suggerimenti e trucchi, a volte è difficile capire come si mappano tutti alla vita reale e alla tua app web reale.
Fortunatamente, Chrome DevTools (incluso in ogni istanza di Chrome) fornisce uno strumento eccellente che ispeziona la tua app web e offre consigli personalizzati per migliorare le prestazioni e ridurre la latenza. Questo articolo illustra il riquadro degli audit, che ha un ambito simile allo strumento molto popolare YSlow, e spiega come utilizzarlo per velocizzare il tuo sito web, ridurre la latenza e aumentare la soddisfazione degli utenti.
Tieni presente che lo strumento Riquadro di controllo è attualmente disponibile solo in Chrome, ma prevediamo che altri browser WebKit lo integreranno a breve.
Per iniziare
Per illustrare come la scheda Controlli può consigliare miglioramenti alle prestazioni delle app web, utilizzeremo lo strumento sul nostro sito www.html5rocks.com. Utilizzeremo la scheda Controlli per contribuire a rendere il nostro sito ancora più veloce.
Per avviare DevTools, è sufficiente utilizzare l'icona di Chrome (nell'angolo in alto a destra della finestra di Chrome) e selezionare Strumenti > Strumenti per sviluppatori.
Per ulteriori informazioni su come iniziare a utilizzare DevTools, leggi la documentazione ufficiale.
Il riquadro Audit si trova nel riquadro dei pulsanti degli strumenti principali. Una volta selezionato, il riquadro degli audit non ha ancora eseguito l'analisi della tua app web. L'esecuzione di tutte le procedure di euristica può essere lenta, in particolare per un'app web di grandi dimensioni come Gmail, pertanto lo strumento è disattivato per impostazione predefinita.
Per iniziare, fai clic sul pulsante Esegui, che ricarica l'app web con le strategie di ottimizzazione delle prestazioni attivate. Dopo il ricaricamento della pagina, vedrai un elenco di consigli simile allo screenshot di seguito.
Noterai che il riquadro Controlli classifica i suggerimenti in base alla gravità, con i più gravi contrassegnati da un punto rosso e quelli di gravità media contrassegnati da un punto giallo. Questa codifica a colori ti aiuta ad assegnare la priorità ai suggerimenti, concentrandoti prima su quelli più importanti (e con i maggiori utili).
Il numero tra parentesi, che segue il suggerimento, indica il numero di istanze rilevate dallo strumento di controllo. Ad esempio, sono state registrate 12 istanze di "Sfrutta la memorizzazione nella cache del browser". Questo ti dà un'idea di quanto spesso può essere applicato il suggerimento.
Strategie di velocità
Come accennato in precedenza, esistono molte strategie ben note e ampiamente testate per ottimizzare le prestazioni delle app web. Non le tratteremo tutte in dettaglio in questo articolo, ma è facile trovare ulteriori informazioni e dettagli. Risorse utili per scoprire di più sulle specifiche dell'ottimizzazione delle app web includono i tutorial di Rendere il web più veloce e La latenza dell'elevata scalabilità è ovunque e ti costa vendite.
Il riquadro Controlli raggruppa i suggerimenti in due categorie: Utilizzo della rete e Prestazioni della pagina web.
Secondo il riquadro degli audit, per migliorare l'utilizzo della rete dobbiamo:
- sfrutta la memorizzazione nella cache del browser
- sfruttare la memorizzazione nella cache del proxy
- ridurre al minimo le dimensioni dei cookie
- pubblicare contenuti statici da un dominio senza cookie
- specifica le dimensioni delle immagini
Per migliorare il rendimento della pagina web, dobbiamo:
- Ottimizzare l'ordine di stili e script
- rimuovi le regole CSS inutilizzate
Diamo un'occhiata a una delle strategie su cui possiamo concentrarci per migliorare il rendimento di htmlrocks.com.
Sfrutta la memorizzazione nella cache del browser
Ad esempio, diamo prima un'occhiata al consiglio per sfruttare la memorizzazione nella cache del browser. Che cosa significa nello specifico? Se apriamo l'opzione nell'interfaccia utente, vengono visualizzati i seguenti dettagli:
- Per le seguenti risorse manca una scadenza della cache. Le risorse che non specificano una scadenza potrebbero non essere memorizzate nella cache dai browser.
- Le seguenti risorse cacheabili hanno una durata breve.
- Le seguenti risorse non sono esplicitamente cacheabili. Valuta la possibilità di renderli memorizzabili nella cache, se possibile.
La memorizzazione nella cache delle risorse è un ottimo modo per migliorare l'utilizzo della rete, il che comporta una riduzione delle fatture relative alla larghezza di banda per lo sviluppatore e tempi di risposta più rapidi per l'utente. Purtroppo, lo strumento non ti dice esattamente cosa devi fare, quindi dobbiamo esaminare un po' i consigli e utilizzare le nostre conoscenze sulle ottimizzazioni delle prestazioni delle app web per applicare questi suggerimenti.
Memorizzazione nella cache
Senza addentrarci nella memorizzazione nella cache HTTP, possiamo sicuramente illustrare alcune nozioni di base. Il protocollo HTTP include istruzioni di memorizzazione nella cache, che consentono al server e al client di ridurre la quantità di dati da trasferire tramite la rete. Ad esempio, il server può chiedere al client di salvare la risorsa localmente per un determinato periodo di tempo, eliminando così la necessità di richiederla di nuovo. Il client può anche chiedere se la risorsa del server è più recente di quella archiviata localmente. Idealmente, se una risorsa è statica, il server dovrebbe indicare al client di memorizzarla localmente ed evitare di chiederla al server in futuro. Come puoi immaginare, esistono una quantità incredibile di dettagli sulla memorizzazione nella cache HTTP, ma il tema generale è "riduci la quantità di dati inviati tramite la rete memorizzando le risorse localmente sul client".
Correggere le risorse non cacheabili
Esaminiamo un consiglio in dettaglio e scopriamo come collegare il consiglio di controllo ad altri strumenti in DevTools. In particolare, vediamo come correggere l'errore "Le seguenti risorse non sono esplicitamente memorizzabili nella cache".
Poiché la memorizzazione nella cache viene eseguita tramite il protocollo HTTP, dobbiamo esaminare la richiesta e la risposta HTTP per la risorsa http://www.html5rocks.com/. Basta fare clic sulla risorsa per visualizzare i dettagli e le intestazioni della richiesta e della risposta originali.
Viene visualizzato il riquadro Rete, Risorse o Origini (a seconda del tipo di risorsa su cui è stato fatto clic) con ulteriori informazioni. In questo caso, si aprirà il riquadro Rete.
Stiamo cercando di confermare che il server abbia detto al client di non memorizzare nella cache la home page di html5rocks.com. Per farlo, facciamo clic sulla risorsa per esaminare le intestazioni di risposta, ovvero le intestazioni e le istruzioni inviate dal server.
Cache-Control.Infatti, il server ha inviato l'intestazione "Cache-Control: no-cache" al client. Come puoi immaginare, questo indica al client di richiedere sempre la risorsa e di non memorizzarla nella cache localmente. Nello specifico, la specifica HTTP per "no-cache" recita:
"Se la direttiva no-cache non specifica un nome campo, una cache NON DEVE utilizzare la risposta per soddisfare una richiesta successiva senza una convalida riuscita con il server di origine. In questo modo, un server di origine può impedire la memorizzazione nella cache anche da parte di cache che sono state configurate per restituire risposte non aggiornate alle richieste dei client."
È esattamente per questo motivo che la scheda Controlli consiglia di attivare la memorizzazione nella cache, perché altrimenti il server e il client inviano informazioni potenzialmente ridondanti.
Ora che abbiamo confermato la causa principale del suggerimento di controllo, come possiamo risolvere il problema? In questo caso, la soluzione prevede la configurazione o il codice lato server. A seconda della configurazione, puoi attivare la memorizzazione nella cache tramite la configurazione del server web o tramite le configurazioni nel framework dell'app web. Nello specifico, devi includere un'intestazione Expires e Cache-Control: private con un parametro max-age per qualsiasi risorsa che vuoi memorizzare nella cache.
I suggerimenti sono solo suggerimenti
Tieni presente che il riquadro Controlli consiglia miglioramenti basati su regole generiche. Si tratta di applicare le best practice, apprese nel corso di molti anni, alla tua app web specifica. Nella maggior parte dei casi, questi consigli sono molto precisi e dovrebbero essere presi in considerazione.
Tuttavia, in alcuni casi il consiglio potrebbe essere corretto, ma non portare a un miglioramento. Ad esempio, se la tua pagina contiene una sola immagine di grandi dimensioni, il riquadro degli audit consiglia di aggiungere gli attributi larghezza e altezza al tag <img> (in modo che il motore di rendering conosca le dimensioni dell'immagine senza doverla scaricare e ispezionare). Sebbene questo sia un ottimo consiglio in generale, non sarà molto utile se l'immagine è l'unico elemento della pagina.
Ricordati di applicare questi suggerimenti dopo averli compresi. Inoltre, non dimenticare di misurare il rendimento prima e dopo le modifiche per assicurarti che sia effettivamente presente un miglioramento.
Riepilogo
Il riquadro Controlli è uno strumento eccellente e facile da usare che ti mostra rapidamente come ottimizzare il rendimento della tua app web. La velocità è un attributo fondamentale delle app web, poiché molte aziende hanno riscontrato correlazioni dirette tra rendimento e entrate o attività. Ottimizzare il rendimento dell'app non è solo la cosa giusta da fare per i tuoi utenti, ma anche per i profitti della tua attività.