#perfmatters: tecniche di utilizzo degli strumenti per i ninja del rendimento
Conoscere gli strumenti di sviluppo è fondamentale per diventare un esperto di rendimento. Colt ha illustrato i tre pilastri delle prestazioni: rete, calcolo e rendering, fornendo un tour del problema principale in ogni area e gli strumenti disponibili per trovarli ed eliminarli.
- Ora puoi eseguire il profiling di Chrome su Android con gli strumenti DevTools che conosci e utilizzi sul computer.
- Il ciclo di iterazione per il lavoro sul rendimento è: raccogli dati, ottieni informazioni, intervieni.
- Dai la priorità agli asset che si trovano nel percorso di rendering critico per le tue pagine.
- Evita di dipingere, è molto costoso.
- Evita la rotazione della memoria e l'esecuzione di codice in momenti critici della tua app.
#perfmatters: ottimizzazione delle prestazioni della rete
In genere, la rete e la latenza rappresentano il 70% del tempo di caricamento totale di una pagina di un sito. Si tratta di una percentuale elevata, ma significa anche che qualsiasi miglioramento apportato avrà enormi vantaggi per i tuoi utenti. In questo intervento, Ilya ha illustrato le modifiche recenti apportate a Chrome che miglioreranno i tempi di caricamento, nonché alcune modifiche che puoi apportare al tuo ambiente per ridurre al minimo il carico della rete.
- Chrome M27 ha un pianificatore delle risorse nuovo e migliorato.
- Chrome M28 ha reso i siti SPDY (ancora) più veloci.
- La cache semplice di Chrome è stata sottoposta a una revisione.
- SPDY / HTTP/2.0 offrono enormi miglioramenti della velocità di trasferimento. Esistono moduli SPDY maturi disponibili per nginx, Apache e Jetty (solo per citarne tre).
- QUIC è un protocollo nuovo ed sperimentale basato su UDP; è ancora agli inizi, ma in ogni caso gli utenti ne trarranno vantaggio.
#perfmatters: layout e rendering a 60 fps
Raggiungere i 60 fps nei tuoi progetti è direttamente correlato al coinvolgimento degli utenti ed è fondamentale per il loro successo. In questo talk, Nat e Tom hanno parlato della pipeline di rendering di Chrome, di alcune cause comuni di frame persi e di come evitarli.
- Un frame dura 16 ms. Contiene JavaScript, calcoli degli stili, pittura e composizione.
- La pittura è estremamente costosa. Una tempesta di vernice si verifica quando ripeti inutilmente lavori di verniciatura costosi.
- I livelli vengono utilizzati per memorizzare nella cache gli elementi dipinti.
- I gestori degli input (eventi di tocco e rotella del mouse) possono ridurre la reattività; se possibile, evitali. Dove non puoi ridurli al minimo.
#perfmatters: app web mobile istantanee
Per percorso di rendering critico si intende qualsiasi elemento (JavaScript, HTML, CSS, immagini) necessario al browser prima di poter iniziare a dipingere la pagina. Dare la priorità al caricamento degli asset nel percorso di rendering critico è un must, in particolare per gli utenti che utilizzano dispositivi con limitazioni di rete, come gli smartphone su reti cellulari. Bryan ha spiegato in che modo il team di Google ha seguito la procedura di identificazione e definizione delle priorità degli asset per il sito web di PageSpeed Insights, passando da un tempo di caricamento di 20 secondi a poco più di 1 secondo.
- Elimina JavaScript e CSS che bloccano la visualizzazione.
- Dai la priorità ai contenuti visibili.
- Carica gli script in modo asincrono.
- Esegui il rendering della visualizzazione iniziale lato server come HTML e aumentala con JavaScript.
- Riduci al minimo il CSS che blocca il rendering; carica solo gli stili necessari per visualizzare l'area visibile iniziale, poi carica il resto.
- Gli URI di dati di grandi dimensioni incorporati nel CSS che blocca il rendering sono dannosi per le prestazioni di rendering; bloccano le risorse, mentre gli URL delle immagini non sono bloccanti.