Chrome Dev Summit - Riepilogo del rendimento

Paul Lewis

#perfmatters: tecniche di preparazione per i ninja delle prestazioni

Conoscere l'orientamento degli strumenti di sviluppo è fondamentale per diventare esperti di rendimento. Colt ha attraversato i tre pilastri delle prestazioni: rete, computing e rendering, fornendo una panoramica del problema chiave in ogni area e gli strumenti a disposizione per individuarli ed eliminarli.

Presentazioni

  • Ora puoi profilare Chrome su Android con i DevTools che conosci e ami da desktop.
  • Il ciclo di iterazione per il lavoro orientato al rendimento è la raccolta di dati, la generazione di approfondimenti, l'intervento.
  • Dai la priorità agli asset che si trovano nel percorso di rendering critico delle tue pagine.
  • Evita di dipingere, perché costa troppo.
  • Evita l'abbandono della memoria e l'esecuzione di codice durante i momenti critici nella tua app.

#perfmatters: ottimizzazione delle prestazioni della rete

La rete e la latenza rappresentano in genere il 70% del tempo di caricamento totale della pagina di un sito. Si tratta di una percentuale considerevole, ma significa anche che qualsiasi miglioramento apportato porterà enormi vantaggi agli utenti. In questa presentazione, Ilya ha presentato alcuni cambiamenti recenti in Chrome che miglioreranno il tempo di caricamento, nonché alcune modifiche che puoi apportare nel tuo ambiente per mantenere il carico di rete al minimo assoluto.

Presentazioni

  • Chrome M27 ha uno scheduler di risorse nuovo e migliorato.
  • Chrome M28 ha reso i siti SPDY (ancora) più veloci.
  • La semplice cache di Chrome è stata rinnovata.
  • SPDY / HTTP/2.0 offrono enormi miglioramenti della velocità di trasferimento. Sono disponibili moduli SPDY maturi per nginx, Apache e Jetty (per citarne solo tre).
  • QUIC è un protocollo nuovo e sperimentale basato su UDP; è solo all'inizio, ma sembra che gli utenti saranno in grado di vincere.

#perfmatters: layout e rendering a 60 fps

Raggiungere 60 FPS nei progetti è direttamente correlato al coinvolgimento degli utenti ed è fondamentale per il successo. In questo intervento Nat e Tom hanno parlato della pipeline di rendering di Chrome, di alcune cause comuni della perdita di frame e di come evitarli.

Presentazioni

  • Un frame dura 16 ms. Contiene JavaScript, calcoli di stile, disegno e compositing.
  • La pittura è extremely costosa. Una tempesta di vernice è il luogo in cui ripeti inutilmente dei costosi lavori di verniciatura.
  • I livelli vengono utilizzati per memorizzare nella cache gli elementi dipinti.
  • I gestori di input (ascoltatori touch e rotellina del mouse) possono interrompere la reattività; se possibile, evitali. Dove non è possibile limitarli al minimo.

#perfmatters: app web istantanee mobile

Il percorso di rendering critico si riferisce a qualsiasi elemento (JavaScript, HTML, CSS, immagini) necessario al browser prima di poter iniziare a colorare la pagina. Dare la priorità alla pubblicazione degli asset nel percorso di rendering critico è fondamentale, in particolare per gli utenti di dispositivi con limitazioni di rete, come gli smartphone che utilizzano reti cellulari. Bryan ci ha spiegato come il team di Google ha intrapreso il processo di identificazione e priorità delle risorse per il sito web PageSpeed Insights, che è passato da un tempo di caricamento di 20 secondi a poco più di 1 secondo.

Presentazioni

  • Elimina i file JavaScript e CSS che bloccano la visualizzazione.
  • Dai la priorità ai contenuti visibili.
  • Carica gli script in modo asincrono.
  • Esegue il rendering della visualizzazione iniziale lato server in formato HTML e aumenta con JavaScript.
  • Riduci al minimo gli stili CSS che bloccano la visualizzazione; pubblica solo gli stili necessari per mostrare l'area visibile iniziale e pubblica gli altri.
  • Gli URI di dati di grandi dimensioni incorporati in CSS che bloccano la visualizzazione sono dannosi per le prestazioni del rendering; bloccano le risorse in cui gli URL immagine non bloccano la visualizzazione.