Lighthouse: ottimizza la velocità del sito web

Kayce Basques

Twitter GitHub Glitch

Sofia Emelianova

GitHub

Obiettivo del tutorial

Questo tutorial insegna a usare Chrome DevTools per capire come velocizzare il caricamento dei siti web.

Continua a leggere o guarda la versione video di questo tutorial:

Questo video è stato realizzato con Chrome 68. La maggior parte delle informazioni dettagliate è ancora vera, ma alcune funzioni sono state aggiornate. Ad esempio, il riquadro Controlli ora si chiama Lighthouse e ha un aspetto diverso, ma le stesse opzioni sono ancora disponibili.

Prerequisiti

Devi avere un'esperienza di sviluppo web di base, simile a quella indicata in questo corso di introduzione allo sviluppo web.

Non è necessario sapere nulla sulle prestazioni di caricamento.

Introduzione

Sono Tony. Tony è molto famoso nella società felina. Ha creato un sito web in modo che i suoi fan possano scoprire quali sono i suoi piatti preferiti. I suoi fan adorano il sito, ma Tony continua a sentire lamentele che il sito si carica lentamente. Tony ti ha chiesto di aiutarlo a velocizzare il sito.

Il gatto Tony.

Passaggio 1: controlla il sito

Ogni volta che intendi migliorare le prestazioni di caricamento di un sito, inizia sempre con un controllo. Il controllo svolge due importanti funzioni:

• Crea una base di riferimento in base al quale misurare le modifiche successive.
• Fornisce suggerimenti pratici sui cambiamenti che avranno il maggiore impatto.

Configura

Innanzitutto, devi configurare un nuovo ambiente di lavoro per il sito web di Tony, in modo da poterlo modificare in un secondo momento:

1. Esegui il remix del progetto del sito web su Glitch. Il nuovo progetto si apre in una scheda. Questa scheda verrà chiamata scheda dell'editor.

   

   Il nome del progetto cambia da tony a un nome generato in modo casuale. Ora disponi della tua copia modificabile del codice. In seguito, apporterai le modifiche a questo codice.

2. Nella parte inferiore della scheda dell'editor, fai clic su Anteprima > Visualizza l'anteprima in una nuova finestra. La demo si apre in una nuova scheda. Questa scheda sarà denominata scheda Demo. Il caricamento del sito potrebbe richiedere un po' di tempo.

   

3. Apri DevTools insieme alla demo.

   

Punto chiave:per gli altri screenshot di questo tutorial, DevTools viene mostrato in una finestra separata.

Stabilisci una base di riferimento

La base di riferimento è un record del rendimento del sito prima di apportare eventuali miglioramenti delle prestazioni.

1. Apri il riquadro Lighthouse. Potrebbe essere nascosto dietro Altri riquadri.

   Nota: questo pannello si basa sul suo omonimo, Lighthouse, uno strumento automatico per migliorare la qualità delle tue app web.

   

2. Abbina le impostazioni di configurazione dei report di Lighthouse a quelle nello screenshot. Ecco una spiegazione delle diverse opzioni:

   • Cancella dati archiviati. L'attivazione di questa casella di controllo cancella tutto lo spazio di archiviazione associato alla pagina prima di ogni controllo. Lascia attiva questa impostazione se vuoi controllare l'esperienza dei nuovi visitatori sul tuo sito. Disattiva questa impostazione quando vuoi l'esperienza di visite ripetute.
   • Limitazione simulata (impostazione predefinita) . Questa opzione simula le condizioni tipiche della navigazione su un dispositivo mobile. Viene chiamato "simulato" perché Lighthouse in realtà non rallenta durante il processo di controllo. Viene semplicemente estrapolato il tempo necessario per il caricamento della pagina in condizioni di dispositivi mobili. L'impostazione Limitazione di DevTools (avanzata), invece, limita effettivamente la CPU e la rete, scendendo a compromessi rispetto a un processo di controllo più lungo.
   • Modalità > Navigazione (predefinita). Questa modalità analizza un singolo caricamento pagina ed è proprio ciò di cui abbiamo bisogno in questo tutorial. Per ulteriori informazioni, consulta la sezione Le tre modalità.
   • Dispositivo > Dispositivo mobile. L'opzione mobile modifica la stringa user agent e simula un'area visibile sui dispositivi mobili. L'opzione desktop disattiva le modifiche ai dispositivi mobili.
   • Categorie > Rendimento. Una singola categoria attivata consente a Lighthouse di generare un report solo con l'insieme di controlli corrispondente. Puoi lasciare attivate le altre categorie se vuoi vedere i tipi di consigli che forniscono. La disattivazione di categorie non pertinenti velocizza leggermente il processo di controllo.

3. Fai clic su Analizza caricamento pagina. Dopo 10-30 secondi, il riquadro Lighthouse mostra un report sul rendimento del sito.

   

Gestione degli errori dei report

Se ti capita di ricevere un errore nel report Lighthouse, prova a eseguire la scheda demo da una finestra di navigazione in incognito senza altre schede aperte. In questo modo ti assicuri di eseguire Chrome senza problemi. In particolare, le estensioni di Chrome possono interferire con il processo di controllo.

Comprendere il report

Il numero nella parte superiore del report indica il punteggio di rendimento complessivo del sito. In seguito, man mano che apporti modifiche al codice, questo numero dovrebbe aumentare. Un punteggio più alto significa prestazioni migliori.

Metriche

Scorri verso il basso fino alla sezione Metriche e fai clic su Espandi vista. Per leggere la documentazione su una metrica, fai clic su Scopri di più....

Questa sezione fornisce misurazioni quantitative delle prestazioni del sito. Ogni metrica fornisce informazioni su un aspetto diverso del rendimento. Ad esempio, First Contentful Paint ti informa quando i contenuti vengono visualizzati per la prima volta sullo schermo, che è un traguardo importante nella percezione del caricamento pagina da parte dell'utente, mentre Tempo all'interattività indica il punto in cui la pagina appare abbastanza pronta per gestire le interazioni degli utenti.

Screenshot

Poi troverai una raccolta di screenshot che mostrano l'aspetto della pagina durante il caricamento.

Opportunità

La prossima sezione è Opportunità, che fornisce suggerimenti specifici su come migliorare il rendimento di caricamento di questa pagina.

Fai clic su un'opportunità per saperne di più.

Fai clic su Scopri di più... per visualizzare la documentazione sul motivo per cui un'opportunità è importante e i consigli specifici su come correggerla.

Diagnostica

La sezione Diagnostica fornisce ulteriori informazioni sui fattori che contribuiscono al tempo di caricamento della pagina.

Controlli superati

La sezione Controlli superati mostra che cosa sta facendo correttamente il sito. Fai clic per espandere la sezione.

Passaggio 2: esperimento

La sezione Opportunità del report Lighthouse fornisce suggerimenti su come migliorare le prestazioni della pagina. In questa sezione implementerai le modifiche consigliate al codebase, controllando il sito dopo ogni modifica per misurarne l'impatto sulla velocità del sito.

Attiva la compressione del testo

Il report indica che l'attivazione della compressione del testo è una delle principali opportunità per migliorare il rendimento della pagina.

La compressione del testo si verifica quando riduci o comprimi le dimensioni di un file di testo prima di inviarlo alla rete. Ad esempio, potresti comprimere una cartella prima di inviarla per email per ridurne le dimensioni.

Prima di abilitare la compressione, ecco un paio di modi per controllare manualmente se le risorse di testo sono compresse.

Apri il riquadro Rete e seleziona Impostazioni > Utilizza righe di richiesta grandi.

Punto chiave: se non vedi la colonna Dimensione nella tabella delle richieste di rete, fai clic con il tasto destro del mouse sull'intestazione della tabella e seleziona Dimensione.

Ogni cella Dimensione mostra due valori. Il valore superiore indica la dimensione della risorsa scaricata. Il valore "bottom" indica la dimensione della risorsa non compressa. Se i due valori sono uguali, la risorsa non viene compressa quando viene inviata sulla rete. In questo esempio, i valori superiore e inferiore di bundle.js sono entrambi 1.4 MB.

Puoi anche verificare la compressione ispezionando le intestazioni HTTP di una risorsa:

1. Fai clic su bundle.js e apri la scheda Intestazioni.

   

2. Cerca un'intestazione content-encoding nella sezione Intestazioni della risposta. Non dovresti vederne uno, significa che bundle.js non è stato compresso. Quando una risorsa è compressa, questa intestazione è generalmente impostata su gzip, deflate o br. Consulta le istruzioni per una spiegazione di questi valori.

Ma basta con le spiegazioni. È arrivato il momento di cambiare qualcosa. Abilita la compressione del testo aggiungendo un paio di righe di codice:

1. Nella scheda dell'editor, apri server.js e aggiungi le due righe seguenti (evidenziate):

   ...
   const fs = require('fs');
   const compression = require('compression');
   
   app.use(compression());
   app.use(express.static('build'));
   ...
   

2. Assicurati di inserire app.use(compression()) prima di app.use(express.static('build')).

   

   Nota: di solito dovresti installare il pacchetto compression tramite npm i -S compression, ma questa operazione è già stata effettuata.

3. Attendi che Glitch esegua il deployment della nuova build del sito. Un emoji felice nell'angolo in basso a sinistra indica che il deployment è stato eseguito correttamente.

Utilizza i flussi di lavoro illustrati in precedenza per verificare manualmente il funzionamento della compressione:

1. Torna alla scheda Demo e ricarica la pagina.

   La colonna Dimensioni ora dovrebbe mostrare due valori diversi per le risorse di testo, ad esempio bundle.js. Il valore superiore 269 KB per bundle.js corrisponde alle dimensioni del file inviato tramite la rete, mentre il valore inferiore 1.4 MB indica le dimensioni del file non compresso.

   

2. La sezione Intestazioni della risposta per bundle.js ora dovrebbe includere un'intestazione content-encoding: gzip.

   

Esegui di nuovo il report Lighthouse sulla pagina per misurare l'impatto della compressione del testo sulle prestazioni di caricamento della pagina:

1. Apri il riquadro Lighthouse e fai clic su Esegui un controllo... nella barra delle azioni in alto.

   

2. Lascia invariate le impostazioni di prima e fai clic su Analizza caricamento pagina.

   

Bene! Sembra un progresso. Il punteggio complessivo del rendimento dovrebbe essere aumentato, il che significa che il sito sta diventando più veloce.

Compressione del testo nel mondo reale

La maggior parte dei server dispone di semplici correzioni come questa per abilitare la compressione. Basta fare una ricerca su come configurare il server che usi per comprimere il testo.

Ridimensionamento delle immagini

Il nuovo report indica che il dimensionamento corretto delle immagini è un'altra grande opportunità.

Il ridimensionamento delle immagini consente di velocizzare il tempo di caricamento riducendo le dimensioni dei file delle immagini. Se l'utente visualizza le tue immagini sullo schermo di un dispositivo mobile largo 500 pixel, è davvero inutile inviare un'immagine larga 1500 pixel. L'ideale sarebbe inviare un'immagine larga 500 pixel al massimo.

1. Nel report, fai clic su Dimensioni adeguate delle immagini per vedere quali immagini devono essere ridimensionate. Tutte e quattro le immagini sono più grandi del necessario.

   

2. Torna alla scheda dell'editor e apri src/model.js.

3. Sostituisci const dir = 'big' con const dir = 'small'. Questa directory contiene copie delle stesse immagini che sono state ridimensionate.

4. Controlla di nuovo la pagina per vedere come questa modifica influisce sulle prestazioni di caricamento.

   

Sembra che la modifica abbia un impatto minimo sul punteggio del rendimento complessivo. Tuttavia, una cosa che il punteggio non mostra chiaramente è la quantità di dati di rete che vengono salvati gli utenti. Le dimensioni totali delle vecchie foto erano di circa 6,1 MB, mentre ora sono di soli 633 kB. Puoi verificarlo sulla barra di stato nella parte inferiore del riquadro Rete.

Ridimensionamento delle immagini nel mondo reale

Per le app di piccole dimensioni, potrebbe essere sufficiente eseguire un ridimensionamento una tantum come questo. Ma per un'app di grandi dimensioni, questo non è scalabile. Di seguito sono riportate alcune strategie per la gestione delle immagini nelle app di grandi dimensioni:

• Ridimensiona le immagini durante il processo di compilazione.
• Crea più dimensioni per ogni immagine durante il processo di compilazione, quindi utilizza srcset nel codice. In fase di esecuzione, il browser si occupa di scegliere la dimensione migliore per il dispositivo su cui viene eseguito. Vedi Immagini di dimensioni relative.
• Utilizza una CDN immagine che ti consenta di ridimensionare in modo dinamico un'immagine quando la richiedi.
• Come minimo, ottimizza ogni immagine. Ciò spesso consente di risparmiare molto. L'ottimizzazione consiste nell'eseguire un'immagine con un programma speciale che riduce le dimensioni del file immagine. Per ulteriori suggerimenti, consulta la sezione Ottimizzazione di base delle immagini.

Elimina le risorse che bloccano la visualizzazione

Dal tuo ultimo rapporto risulta che l'eliminazione delle risorse che bloccano la visualizzazione è ora la più grande opportunità.

Una risorsa che blocca la visualizzazione è un file JavaScript o CSS esterno che il browser deve scaricare, analizzare ed eseguire prima di poter mostrare la pagina. L'obiettivo è eseguire solo il codice CSS e JavaScript di base necessario per visualizzare correttamente la pagina.

La prima attività, quindi, consiste nel trovare il codice che non deve essere eseguito al caricamento della pagina.

1. Fai clic su Elimina le risorse che bloccano la visualizzazione per visualizzare le risorse bloccate: lodash.js e jquery.js.

   

2. A seconda del sistema operativo, premi quanto segue per aprire il menu dei comandi:

   • Su Mac: Comando+Maiusc+P
   • Su Windows, Linux o ChromeOS, premi Ctrl+Maiusc+P

3. Inizia a digitare Coverage e seleziona Mostra copertura.

   

   La scheda Copertura si apre nel Riquadro a scomparsa.

   

4. Fai clic su Ricarica. La scheda Copertura fornisce una panoramica della quantità di codice in bundle.js, jquery.js e lodash.js che viene eseguita durante il caricamento della pagina.

   

   Questo screenshot indica che rispettivamente il 74% e il 30% circa dei file jQuery e Lodash non vengono utilizzati.

5. Fai clic sulla riga jquery.js. DevTools apre il file nel riquadro Origini. È stata eseguita una riga di codice se accanto a essa è presente una barra verde. Una barra rossa accanto a una riga di codice indica che il codice non è stato eseguito e che non è assolutamente necessario al caricamento della pagina.

   

6. Scorri un po' il codice jQuery. Alcune delle righe che vengono "eseguite" sono in realtà solo commenti. Per ridurre le dimensioni del file, esegui questo codice tramite un minificatore che rimuove i commenti.

In breve, quando lavori con il tuo codice, la scheda Copertura può aiutarti ad analizzare il codice riga per riga e a spedire solo il codice necessario per il caricamento della pagina.

I file jquery.js e lodash.js sono necessari per caricare la pagina? La scheda Blocco delle richieste può mostrare cosa succede quando le risorse non sono disponibili.

1. Fai clic sulla scheda Rete e apri di nuovo il menu dei comandi.

2. Inizia a digitare blocking e seleziona Mostra blocco delle richieste. Viene visualizzata la scheda Request Block (Blocco richieste).

   

3. Fai clic su Aggiungi pattern, digita /libs/* nella casella di testo e premi Invio per confermare.

   

4. Ricarica la pagina. Le richieste jQuery e Lodash sono in rosso, il che significa che sono state bloccate. La pagina viene comunque caricata ed è interattiva, quindi sembra che queste risorse non siano necessarie.

   

5. Fai clic su Rimuovi tutti i pattern per eliminare il pattern di blocco /libs/*.

In generale, la scheda Blocco delle richieste è utile per simulare il comportamento della pagina quando una determinata risorsa non è disponibile.

Ora rimuovi dal codice i riferimenti a questi file e controlla di nuovo la pagina:

1. Torna alla scheda dell'editor e apri template.html.

2. Elimina i tag <script> corrispondenti:

   <head>
       ...
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <script src="/libs/lodash.js"></script>
       <script src="/libs/jquery.js"></script>
       <title>Tony's Favorite Foods</title>
   </head>
   

3. Attendi che la creazione e il deployment del sito vengano nuovamente creati.

4. Controlla di nuovo la pagina dal riquadro Lighthouse. Il tuo punteggio complessivo dovrebbe essere migliorato di nuovo.

   

Ottimizzare il percorso di rendering critico nel mondo reale

Il percorso di rendering critico è il codice necessario per caricare una pagina. In generale, puoi velocizzare il caricamento delle pagine inviando solo il codice critico durante il caricamento della pagina, quindi eseguendo il caricamento lento di tutto il resto.

• È improbabile che troverai script che puoi rimuovere completamente, ma spesso noterai che molti script non devono essere richiesti durante il caricamento della pagina, ma possono essere richiesti in modo asincrono. Consulta la sezione Utilizzo della modalità asincrona o del differimento.
• Se utilizzi un framework, verifica se ha una modalità di produzione. Questa modalità potrebbe utilizzare una funzionalità come scuotimento degli alberi per eliminare codice non necessario che blocca il rendering critico.

Meno lavoro sul thread principale

Il tuo ultimo report mostra alcuni potenziali risparmi minori nella sezione Opportunità, ma se scorri verso il basso fino alla sezione Diagnostica, sembra che il collo di bottiglia maggiore sia l'eccessiva attività del thread principale.

Il thread principale è il punto in cui il browser svolge la maggior parte del lavoro necessario per visualizzare una pagina, ad esempio l'analisi e l'esecuzione di HTML, CSS e JavaScript.

Nota: questa sezione fornisce un'introduzione piuttosto breve al riquadro Prestazioni. Consulta il riferimento sulle funzionalità relative alle prestazioni per saperne di più su come utilizzarle per analizzare il rendimento delle pagine.

L'obiettivo è utilizzare il riquadro Prestazioni per analizzare il lavoro svolto dal thread principale durante il caricamento della pagina e trovare modi per rimandare o rimuovere il lavoro non necessario.

1. Apri Prestazioni > Acquisisci impostazioni e imposta Rete su 3G lento e CPU su Rallentamento 6 volte.

   

   I dispositivi mobili hanno in genere più vincoli hardware rispetto ai laptop o ai computer desktop, quindi queste impostazioni ti consentono di caricare la pagina come se stessi utilizzando un dispositivo meno potente.

2. Fai clic su Ricarica. DevTools ricarica la pagina, quindi genera una visualizzazione di tutto ciò che ha dovuto fare per caricarla. Questa visualizzazione sarà denominata trace.

   

La traccia mostra l'attività in ordine cronologico, da sinistra a destra. I grafici FPS, CPU e NET in alto forniscono una panoramica dei frame al secondo, dell'attività della CPU e dell'attività di rete.

La parete gialla che vedi nella sezione Panoramica indica che la CPU era completamente occupata dall'attività di script. Questo è un indizio che potresti riuscire a velocizzare il caricamento della pagina con meno lavoro JavaScript.

Analizza la traccia per trovare modi per ridurre il lavoro di JavaScript:

1. Fai clic sulla sezione Tempi per espanderla.

   

   React presenta diverse misure di Tempi utente, sembra che l'app di Tony stia utilizzando la modalità di sviluppo di React. Il passaggio alla modalità di produzione di React probabilmente comporterà alcuni facili risultati in termini di prestazioni.

2. Fai di nuovo clic su Tempi per comprimere la sezione.

3. Sfoglia la sezione Principale. Questa sezione mostra un log cronologico dell'attività del thread principale, da sinistra a destra. L'asse y (dall'alto verso il basso) mostra il motivo per cui si sono verificati degli eventi.

   

   In questo esempio, l'evento Evaluate Script ha causato l'esecuzione della funzione (anonymous), determinando l'esecuzione di __webpack__require__, determinando l'esecuzione di ./src/index.jsx e così via.

4. Scorri verso il basso fino alla parte inferiore della sezione Principale. Quando utilizzi un framework, la maggior parte dell'attività iniziale è causata dal framework, che di solito è fuori dal tuo controllo. L'attività causata dalla tua app di solito si trova in basso.

   

   In questa app, sembra che una funzione chiamata App stia causando molte chiamate a una funzione mineBitcoin. Sembra che Tony stia utilizzando i dispositivi dei suoi fan per eseguire il mining di criptovaluta...

   Nota: anche se le chiamate effettuate dal framework di solito sfocano il tuo controllo, a volte potresti strutturare l'app in modo da far funzionare il framework in modo inefficiente. Ristrutturare l'app per utilizzare il framework in modo efficiente può essere un modo per ridurre il lavoro del thread principale. Ciò richiede una profonda comprensione di come funziona il framework e di quali modifiche puoi apportare al tuo codice per utilizzarlo in modo più efficiente.

5. Apri la scheda Dal basso verso l'alto in basso. In questa scheda sono elencate le attività che hanno richiesto più tempo. Se non vedi nulla nella sezione Dal basso verso l'alto, fai clic sull'etichetta per la sezione Principale.

   

   La sezione Dal basso verso l'alto mostra solo le informazioni relative all'attività o al gruppo di attività attualmente selezionato. Ad esempio, se hai fatto clic su una delle attività mineBitcoin, la sezione Dal basso verso l'alto mostrerà solo le informazioni relative a quella specifica attività.

   La colonna Tempo autonomo mostra quanto tempo è stato speso direttamente in ogni attività. In questo caso, circa l'82% del tempo del thread principale è stato dedicato alla funzione mineBitcoin.

È il momento di verificare se l'utilizzo della modalità di produzione e la riduzione dell'attività JavaScript accelera il caricamento della pagina. Inizia con la modalità di produzione:

1. Nella scheda dell'editor, apri webpack.config.js.
2. Cambia "mode":"development" in "mode":"production".
3. Attendi il deployment della nuova build.

4. Controlla di nuovo la pagina.

   

Riduci l'attività JavaScript rimuovendo la chiamata a mineBitcoin:

1. Nella scheda dell'editor, apri src/App.jsx.
2. Commenta la chiamata a this.mineBitcoin(1500) in constructor.
3. Attendi il deployment della nuova build.
4. Controlla di nuovo la pagina.

Come sempre, ci sono ancora cose da fare, ad esempio, ridurre le metriche Largest Contentful Paint e Cumulative Layout Shift.

Operazione riuscita: sembra che l'ultima modifica abbia causato un enorme aumento del rendimento.

Svolgere meno operazioni sui thread principali nel mondo reale

In generale, il riquadro Rendimento è il modo più comune per capire quale attività svolge il tuo sito durante il caricamento e trovare modi per rimuovere le attività non necessarie.

Se preferisci un approccio più simile a console.log(), l'API User Timing ti consente di eseguire il markup arbitrario di alcune fasi del ciclo di vita dell'app per monitorare la durata di ciascuna di queste fasi.

Riepilogo

• Ogni volta che vuoi ottimizzare le prestazioni di caricamento di un sito, inizia sempre con un controllo. L'audit stabilisce una base di riferimento e fornisce suggerimenti su come migliorarla.
• Apporta una modifica alla volta e controlla la pagina dopo ogni modifica per scoprire in che modo quella modifica isolata influisce sulle prestazioni.

Passaggi successivi

Esegui controlli sul tuo sito. Se hai bisogno di aiuto per interpretare il report o trovare modi per migliorare le prestazioni di caricamento, scopri tutti i modi per ricevere assistenza dalla community DevTools:

• Segnala eventuali bug su questo documento nel repository developer.chrome.com.
• Invia report di bug su DevTools in Chromium Bug.
• Discuti delle funzionalità e delle modifiche nella Mailing List. Non usare la mailing list per richieste di assistenza. Utilizza invece Stack Overflow.
• Ricevi assistenza generale su come utilizzare DevTools su Stack Overflow. Per inviare richieste di bug, utilizza sempre i bug di Chromium.
• Inviaci un tweet all'indirizzo @ChromeDevTools.