The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Misurazione del percorso di rendering critico con Navigation Timing

Non puoi ottimizzare ciò che non puoi misurare. Fortunatamente, Navigation Timing API ci offre tutti gli strumenti necessari per misurare ciascun passaggio del percorso di rendering critico.

TL;DR

  • Navigation Timing offre informazioni cronologiche ad alta risoluzione per la misurazione di CRP.
  • Il browser emette una serie di eventi non riproducibili che registrano varie fasi di CRP.

La base di ogni strategia prestazionale solida è una buona misurazione e strumentazione. A quanto pare è esattamente ciò che offre Navigation Timing API.

Navigation Timing

Ciascuna delle etichette del diagramma di cui sopra corrisponde a un'informazione cronologica ad alta risoluzione di cui il browser tiene traccia per ogni pagina che carica. In realtà, in questo caso specifico stiamo mostrando solo una parte di tutte le informazioni cronologiche — per adesso stiamo ignorando tutte le informazioni cronologiche relative alla rete, ma ci torneremo in una lezione futura.

Quindi cosa significano queste informazioni cronologiche?

  • domLoading: questa è l'informazione cronologica di inizio dell'intero processo, il browser sta per iniziare ad analizzare i primi byte ricevuti del documento HTML.
  • domInteractive: segna il punto in cui il browser ha completato l'analisi di tutto l'HTML e la costruzione DOM è completa.
  • domContentLoaded: segna il punto in cui il DOM è pronto e non ci sono fogli di stile che bloccano l'esecuzione di JavaScript, quindi adesso possiamo (idealmente) costruire la struttura di rendering.
    • Molti framework di JavaScript attendono questo evento prima di iniziare ad eseguire la propria logica. Per questo motivo, il browser acquisisce le informazioni temporali EventStart e EventEnd per consentirci di monitorare la durata dell'esecuzione.
  • domComplete: come implica il nome, l'intera elaborazione è completa e tutte le risorse sulla pagina (immagini e così via) hanno terminato il download, ad esempio il rotante di caricamento ha smesso di girare.
  • loadEvent: come passaggio finale in ogni caricamento della pagina, il browser lancia un evento di onload che può attivare un'ulteriore logica dell'applicazione.

La specifica HTML detta condizioni precise per ogni evento: quando deve essere attivato, quali condizioni devono essere soddisfatte e così via. Per i nostri scopi, ci concentreremo solo su alcuni traguardi relativi al percorso di rendering critico:

  • domInteractive segna quando DOM è pronto.
  • domContentLoaded solitamente segna quando sia DOM che CSSOM sono pronti.
    • In assenza di JavaScript con blocco parser, DOMContentLoaded verrà attivato immediatamente dopo domInteractive.
  • domComplete segna quando la pagina e tutte le relative sottorisorse sono pronte.

^

<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <script>
      function measureCRP() {
        var t = window.performance.timing,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;
        var stats = document.createElement('p');
        stats.textContent = 'interactive: ' + interactive + 'ms, ' +
            'dcl: ' + dcl + 'ms, complete: ' + complete + 'ms';
        document.body.appendChild(stats);
      }
    </script>
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

L'esempio di cui sopra potrebbe sembrare leggermente scoraggiante a prima vista, ma in realtà è davvero abbastanza semplice. Navigation Timing API acquisisce tutte le informazioni temporali pertinenti e il nostro codice attende semplicemente che l'evento onload sia attivato — ricorda che l'evento onload si attiva dopo domInteractive, domContentLoaded e domComplete &mdash e calcola la differenza tra le varie informazioni cronologiche. Demo di NavTiming

Detto questo, adesso disponiamo di traguardi specifici da monitorare e una funzione semplice per l'output di queste misurazioni. Invece di stampare queste metriche sulla pagina, puoi anche modificare il codice così da inviarle a una server di analisi (Google Analytics esegue l'operazione automaticamente), che rappresenta un ottimo modo per controllare le performance delle tue pagine che possono trarre beneficio da un lavoro di ottimizzazione.