#perfmatters: tecniche di strumentazione per il ninja delle prestazioni
Sapere come muoversi negli strumenti di sviluppo è fondamentale per diventare un esperto del rendimento. Colt ha analizzato i tre pilastri delle prestazioni: rete, computing e rendering, offrendo una panoramica del problema chiave in ogni area e degli strumenti disponibili per individuarlo e eliminarlo.
- Ora puoi profilare Chrome su Android con i DevTools che conosci e apprezzi da computer.
- Il ciclo di iterazione per il lavoro relativo alle prestazioni è: raccolta di dati, acquisizione di informazioni, azioni.
- Dai la priorità agli asset che si trovano sul percorso di rendering critico per le tue pagine.
- Evita di dipingere. è super costoso.
- Evita il tasso di abbandono della memoria e l'esecuzione di codice durante i momenti critici nella tua app.
#perfmatters: Ottimizzazione delle prestazioni di rete
La rete e la latenza in genere rappresentano il 70% del tempo totale di caricamento della pagina di un sito. Si tratta di una percentuale elevata, ma significa anche che i miglioramenti apportati apportano enormi vantaggi agli utenti. In questa presentazione, Ilya ha illustrato le recenti modifiche a Chrome che miglioreranno il tempo di caricamento, oltre ad alcune modifiche che puoi apportare nel tuo ambiente per ridurre al minimo il carico di rete.
- Chrome M27 ha uno scheduler di risorse nuovo e migliorato.
- Chrome M28 ha reso i siti SPDY (persino) più veloci.
- La cache semplice di Chrome è stata rinnovata.
- SPDY / HTTP/2.0 offre eccellenti miglioramenti alla velocità di trasferimento. Sono disponibili moduli SPDY maturi per nginx, Apache e Jetty (per nominarne solo tre).
- QUIC è un nuovo protocollo sperimentale basato su UDP. Siamo ancora agli inizi, ma va bene che gli utenti vinceranno.
#perfmatters: layout e rendering a 60 f/s
Raggiungere i 60 fps nei tuoi progetti è direttamente correlato al coinvolgimento degli utenti ed è fondamentale per il suo successo. In questo discorso Nat e Tom hanno parlato della pipeline di rendering di Chrome, di alcune cause comuni dei frame interrotti e di come evitarli.
- Un frame dura 16 ms. Contiene JavaScript, calcoli di stile, pittura e compositing.
- Dipingere è estremamente costoso. Una tempesta di vernice è un luogo in cui ripeti inutilmente costosi lavori di verniciatura.
- I livelli vengono utilizzati per memorizzare elementi dipinti nella cache.
- I gestori di input (ascoltatori al tocco e alla rotellina del mouse) possono interrompere la reattività; evitali, se puoi. Dove non puoi ridurle al minimo.
#perfmatters: App web mobile istantanee
Con percorso di rendering critico si intende qualsiasi elemento (JavaScript, HTML, CSS, immagini) richiesto dal browser per poter iniziare a colorare la pagina. Dare priorità alla pubblicazione degli asset sul percorso di rendering critico è fondamentale, in particolare per gli utenti che utilizzano dispositivi con vincoli di rete, come gli smartphone sulle reti cellulari. Bryan ha spiegato in che modo il team di Google ha affrontato il processo di identificazione e assegnazione della priorità degli asset per il sito web PageSpeed Insights, passando da un tempo di caricamento di 20 secondi a poco più di un secondo.
- Elimina JavaScript e CSS che bloccano la visualizzazione.
- Dai la priorità ai contenuti visibili.
- Carica gli script in modo asincrono.
- Visualizza la visualizzazione iniziale lato server come HTML e aumentala con JavaScript.
- Riduci al minimo il codice CSS che blocca la visualizzazione. pubblicare solo gli stili necessari per mostrare l'area visibile iniziale, poi pubblicare il resto.
- Gli URI di dati di grandi dimensioni incorporati nei CSS che bloccano la visualizzazione sono dannosi per le prestazioni del rendering; poiché bloccano risorse in cui gli URL immagine non bloccano.