introduzione
Un'app web veloce è un'app web di successo. Il tuo lavoro come sviluppatore non termina finché non hai ottimizzato le prestazioni reali e percepite della tua app. Non solo è semplicemente la cosa giusta da fare per garantire agli utenti un'esperienza eccellente, ma ci sono motivi aziendali molto pratici e importanti da ottimizzare. Amazon ha misurato un calo delle vendite dell'1% per ogni 100 ms di latenza del sito e Google ha misurato un calo del 20% del traffico per ogni ritardo di 0, 5 secondi (citazione). Si tratta di cifre reali con implicazioni reali per la tua attività e la tua app web.
La velocità del Web è così importante che Google si impegna a fondo per rendere il Web più veloce. Se hai bisogno di un ulteriore motivo per ottimizzare le prestazioni della tua app, Google ha annunciato che la velocità delle pagine è stata aggiunta al suo algoritmo di ranking.
Sono state pubblicate numerose best practice per ottimizzare le prestazioni della tua applicazione web, inclusi due fantastici libri (High Performance Web Sites e Even Faster Web Sites). Le tecniche sul server (implementa le intestazioni corrette di controllo della cache) e sul client (fornisci gli attributi di larghezza e altezza dell'immagine) vengono combinate in una strategia end-to-end per ottimizzare le prestazioni. Con così tanti suggerimenti utili, a volte è difficile capire come si mappano tutti sulla vita reale e sulla tua app web reale.
Fortunatamente, Chrome DevTools (incluso in ogni istanza di Chrome) è uno strumento eccellente che esamina la tua app web e offre consigli personalizzati per migliorare le prestazioni e ridurre la latenza. Questo articolo illustrerà il riquadro di controllo, che ha un ambito simile al famoso strumento 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 Pannello di controllo è attualmente disponibile solo in Chrome, ma ci aspettiamo che altri browser WebKit lo integreranno.
Per iniziare
Per illustrare il modo in cui il riquadro Controlli può consigliare miglioramenti delle prestazioni delle applicazioni web, attiveremo il nostro strumento verso il nostro sito www.html5rocks.com. Utilizzeremo il riquadro dei controlli per rendere il nostro sito ancora più veloce.
Aprire DevTools è facile: basta utilizzare l'icona di Chrome (in alto a destra nella finestra di Chrome) e selezionare Strumenti > Strumenti per sviluppatori.
Per ulteriori informazioni su come iniziare a utilizzare DevTools, leggi la documentazione ufficiale.
Il riquadro Controlli si trova nel riquadro dei pulsanti degli strumenti principali. Noterai che, una volta selezionato, il riquadro Controlli non ha ancora analizzato la tua applicazione web. L'esecuzione di tutte le euristiche può essere lenta, in particolare per un'applicazione web di grandi dimensioni come Gmail, quindi lo strumento è disattivato per impostazione predefinita.
Iniziamo facendo clic sul pulsante Esegui, che ricarica l'app web con l'euristica delle prestazioni attivata. Dopo aver ricaricato la pagina, verrà visualizzato un elenco di consigli simili a quelli mostrati nello screenshot di seguito.
Noterai che il riquadro di controllo classifica i suggerimenti in base alla gravità: il livello più grave è contrassegnato da un punto rosso e i suggerimenti con gravità media sono contrassegnati da un punto giallo. Questa codifica dei colori ti aiuta a dare la priorità ai suggerimenti, concentrandoti prima sui più importanti (e sui maggiori guadagni).
Il numero tra parentesi, dopo il suggerimento, indica il numero di istanze rilevate dallo strumento di controllo. Ad esempio, erano presenti 12 istanze di "Utilizza la memorizzazione nella cache del browser". Questo ti dà un'idea della frequenza con cui può essere applicato il suggerimento.
Strategie per la velocità
Come accennato in precedenza, esistono molte strategie note e testate per ottimizzare le prestazioni delle app web. Questo articolo non li tratteremo tutti in dettaglio, ma è facile trovare ulteriori informazioni e dettagli. Risorse utili per saperne di più sulle specifiche dell'ottimizzazione delle app web includono tutorial per rendere il Web più veloce e la latenza dell'alta scalabilità è ovunque e costa vendite.
Il riquadro Controlli raggruppa i suggerimenti in due categorie: Utilizzo della rete e Prestazioni delle pagine web.
In base al panel di controllo, per migliorare l'utilizzo della rete dovremmo:
- Utilizzo della memorizzazione nella cache del browser
- utilizza la memorizzazione nella cache del proxy
- riduci al minimo la dimensione dei cookie
- pubblicare contenuti statici da un dominio senza cookie
- specifica dimensioni immagine
Per migliorare le prestazioni delle pagine web, dobbiamo:
- ottimizzare l'ordine di stili e script
- rimuovi le regole CSS inutilizzate
Esaminiamo una delle strategie su cui possiamo concentrarci per migliorare il rendimento di htmlrocks.com.
Sfrutta la memorizzazione nella cache del browser
Ad esempio, analizziamo innanzitutto il suggerimento relativo all'utilizzo della memorizzazione nella cache del browser. Che cosa significa, nello specifico? Quando si apre l'opzione nell'interfaccia utente, vengono presentati i seguenti dettagli:
- Nelle seguenti risorse manca una scadenza della cache. Le risorse che non specificano una scadenza non possono essere memorizzate nella cache dai browser.
- Le seguenti risorse memorizzabili nella cache hanno una durata di aggiornamento breve.
- Le seguenti risorse non possono essere memorizzate nella cache. Se possibile, valuta la possibilità di memorizzarle nella cache.
La memorizzazione delle risorse nella cache è un modo eccellente per migliorare l'utilizzo della rete, il che comporta una riduzione dei costi relativi alla larghezza di banda per lo sviluppatore e tempi di risposta più rapidi per l'utente. Purtroppo lo strumento non ti indica esattamente ciò che devi fare, quindi dobbiamo analizzare un po' i consigli e utilizzare la nostra conoscenza delle ottimizzazioni delle prestazioni delle app web per applicare questi suggerimenti.
Memorizzazione nella cache
Senza addentrarci nella memorizzazione nella cache HTTP, possiamo sicuramente trattare alcuni dei concetti di base. Il protocollo HTTP include istruzioni di memorizzazione nella cache, consentendo al server e al client di ridurre la quantità di dati da trasferire sulla rete. Ad esempio, il server può indicare al client di salvare la risorsa localmente per un determinato periodo di tempo, eliminando così la necessità di richiederla nuovamente. 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 archiviare la risorsa localmente ed evitare di chiedere al server la risorsa in futuro. Come puoi immaginare, esistono un'incredibile quantità di dettagli relativi alla memorizzazione nella cache HTTP, ma il tema generale è "ridurre la quantità di dati inviati via cavo archiviando le risorse localmente sul client".
Correzione delle risorse non memorizzabili nella cache
Diamo un'occhiata a un suggerimento in dettaglio e impareremo a collegarlo ad altri strumenti all'interno di DevTools. In particolare, vediamo come risolvere il problema "Le seguenti risorse non sono esplicitamente non 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 le intestazioni e i dettagli di richiesta e risposta originali.
Si apre il riquadro Rete, Risorse o Origini (a seconda del tipo di risorsa selezionato) con ulteriori informazioni. In questo caso, si aprirà il riquadro Network (Rete).
Stiamo cercando di confermare che il server ha indicato al client "non memorizzare nella cache la home page di html5rocks.com". Per farlo, facciamo clic sulla risorsa per visualizzare le intestazioni della risposta, che sono le intestazioni e le istruzioni inviate dal server.
Cache-Control.Certo, il server ha inviato l'intestazione "Cache-Control: no-cache" al client. Questo, come puoi immaginare, indica al client di chiedere sempre la risorsa e di non memorizzarla nella cache localmente. In particolare, la specifica HTTP per "no-cache" è:
"Se la direttiva no-cache non specifica un nome-campo, una cache NON DEVE utilizzare la risposta per soddisfare una richiesta successiva senza riconvalidarla con il server di origine. Ciò consente a un server di origine di evitare la memorizzazione nella cache anche da cache che sono state configurate per restituire risposte inattive alle richieste del client."
È esattamente per questo motivo che il riquadro di controllo consiglia di abilitare la memorizzazione nella cache, perché in caso contrario il server e il client inviano informazioni potenzialmente ridondanti.
Ora che abbiamo confermato la causa principale del suggerimento di controllo, come possiamo risolverlo? In questo caso, la soluzione prevede codice o configurazione lato server. A seconda della configurazione, puoi attivare la memorizzazione nella cache tramite la configurazione del server web o le configurazioni del framework dell'app web. In particolare, devi includere un'intestazione Scadenza e un oggetto Cache-Control: privato con un parametro max-age per qualsiasi risorsa che vuoi memorizzare nella cache.
I suggerimenti sono proprio questo, i suggerimenti
Ricorda che il panel di controllo consiglia miglioramenti basati su euristiche generiche. Si tratta dell'applicazione delle best practice, apprese nel corso degli anni, alla tua specifica app web. Nella maggior parte dei casi, questi consigli sono accurati e devono essere presi in considerazione.
Tuttavia, in alcuni casi i consigli potrebbero essere corretti ma non portare effettivamente a miglioramenti. Ad esempio, se la pagina contiene una sola immagine di grandi dimensioni, il riquadro di controllo consiglia di aggiungere gli attributi di larghezza e altezza al tag <img>, in modo che il motore di rendering possa conoscere le dimensioni dell'immagine senza doverla scaricare e ispezionare. In genere è un ottimo consiglio, ma non è di grande aiuto se l'immagine è l'unico elemento della pagina.
Ricorda di applicare questi suggerimenti dopo averli compresi. Inoltre, non dimenticare di misurare il rendimento prima e dopo le modifiche per assicurarti che ci sia effettivamente un miglioramento.
Riepilogo
Il riquadro Verifiche è uno strumento eccellente e facile da usare che ti mostrerà rapidamente come ottimizzare le prestazioni della tua applicazione web. La velocità è un attributo fondamentale per le app web, in quanto molte aziende hanno trovato correlazioni dirette tra prestazioni ed entrate o attività. Ottimizzare il rendimento della tua app non è solo la cosa giusta da fare per i tuoi utenti, ma è anche la cosa giusta da fare per i profitti della tua attività.