Lighthouse: ottimizza la velocità del sito web

Obiettivo del tutorial

Questo tutorial insegna a utilizzare Chrome DevTools per trovare modi per velocizzare il caricamento dei siti web.

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

Prerequisiti

Avere un'esperienza di base di sviluppo web, simile a quanto insegnato in questo corso Introduction to Web Development.

Non hai bisogno di sapere nulla sulle prestazioni di caricamento.

Introduzione

Sono Tony. Tony è molto famoso nella società dei gatti. Ha creato un sito web per permettere ai fan di scoprire quali sono i suoi piatti preferiti. I suoi fan adorano il sito, ma Tony continua ad ascoltare lamentele che il sito carica lentamente. Tony ti ha chiesto di aiutarlo a velocizzare il sito.

Passaggio 1: controlla il sito

Ogni volta che decidi di migliorare le prestazioni di caricamento di un sito, inizia sempre con un controllo. La revisione ha due funzioni importanti:

• Crea una base di riferimento con cui misurare le modifiche successive.
• Fornisce suggerimenti pratici su quali modifiche avranno l'impatto maggiore.

Configura

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

1. Remixa il progetto del sito web su Glitch. Il nuovo progetto si apre in una scheda. Questa scheda verrà chiamata scheda Editor.

   

   Il nome del progetto cambia da tony a un nome generato in modo casuale. Ora hai la tua copia modificabile del codice. In seguito apporterai delle modifiche a questo codice.

2. In fondo alla scheda dell'editor, fai clic su Anteprima > Anteprima in una nuova finestra. La demo si apre in una nuova scheda. Questa scheda verrà chiamata scheda Demo. Il caricamento del sito potrebbe richiedere un po' di tempo.

   

3. Apri DevTools insieme alla demo.

   

Stabilisci una base di riferimento

La base di riferimento è una registrazione del rendimento del sito prima di eventuali miglioramenti delle prestazioni.

1. Apri il riquadro Lighthouse. Potrebbe essere nascosta dietro double_arrow Altri riquadri.

   

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

   • check_box Cancella dati archiviati. Se attivi questa casella di controllo, tutti gli spazi di archiviazione associati alla pagina verranno cancellati prima di ogni controllo. Lascia questa impostazione attiva se vuoi controllare in che modo i visitatori alla prima visita visualizzano il tuo sito. Disattiva questa impostazione quando vuoi ripetere l'esperienza di visita.
   • check_box Abilita campionamento di JS. Questa opzione è disattivata per impostazione predefinita. Se attivata, questa funzionalità aggiunge stack di chiamate JavaScript dettagliati all'analisi delle prestazioni, ma potrebbe rallentare la generazione dei report. La traccia è disponibile in more_vert menu Strumenti > Visualizza traccia non limitata dopo la generazione del report Lighthouse.
   • Limitazione simulata (impostazione predefinita) arrow_drop_down. Questa opzione simula le condizioni tipiche della navigazione su un dispositivo mobile. Viene definita "simulata" perché Lighthouse non ha una limitazione durante il processo di controllo. Al contrario, estrapola solo il tempo necessario per il caricamento della pagina in condizioni per dispositivi mobili. L'impostazione Limitazione avanzata) di DevTools, invece, limita la CPU e la rete, con il vantaggio di un processo di controllo più lungo.
   • Modalità > radio_button_checked Navigazione (predefinita). Questa modalità analizza un singolo caricamento pagina ed è ciò di cui abbiamo bisogno in questo tutorial. Per ulteriori informazioni, vedi Le tre modalità.
   • Dispositivo > radio_button_checked Cellulare. L'opzione per dispositivi mobili modifica la stringa dello user agent e simula un'area visibile mobile. L'opzione desktop disattiva praticamente solo le modifiche ai dispositivi mobili.
   • Categorie > check_box Rendimento. Una singola categoria attivata consente a Lighthouse di generare un report solo con il set di controlli corrispondente. Se vuoi vedere i tipi di consigli che forniscono, puoi lasciare attive le altre categorie. La disattivazione delle 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 sulle prestazioni del sito.

   

Gestione degli errori dei report

Se ricevi un messaggio di errore nel report Lighthouse, prova a eseguire la scheda demo da una finestra di navigazione in incognito senza aprire altre schede. In questo modo, avrai la certezza di eseguire Chrome da uno stato pulito. Le estensioni di Chrome, in particolare, 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 indica un rendimento migliore.

Metriche

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

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

Screenshot

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

Opportunità

Di seguito trovi la sezione Opportunità, che fornisce suggerimenti specifici su come migliorare il rendimento di caricamento di questa pagina specifica.

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 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 il corretto funzionamento del sito. Fai clic per espandere la sezione.

Passaggio 2. Esperimento

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

Attiva la compressione del testo

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

La compressione del testo si verifica quando riduci o comprimi le dimensioni di un file di testo prima di inviarlo sulla rete. È un po' come comprimere una cartella prima di inviarla via 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 Network e seleziona settings Impostazioni > check_box Utilizza righe di richieste di grandi dimensioni.

Ogni cella Dimensione mostra due valori. Il valore superiore indica la dimensione della risorsa scaricata. Il valore inferiore è 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 in alto e in basso di bundle.js sono entrambi 1.4 MB.

Puoi anche controllare la compressione esaminando 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, il che significa che bundle.js non è stato compresso. Quando una risorsa viene compressa, questa intestazione è generalmente impostata su gzip, deflate o br. Consulta le Istruzioni per una spiegazione di questi valori.

Basta con le spiegazioni. È il momento di apportare alcune modifiche. 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')).

   

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 è riuscito.

Utilizza i flussi di lavoro che hai appreso in precedenza per verificare manualmente il funzionamento della compressione:

1. Torna alla scheda della 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 di 269 KB per bundle.js è la dimensione del file inviato tramite la rete, mentre il valore inferiore di 1.4 MB è la dimensione 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 precedenti e fai clic su Analizza caricamento pagina.

   

Bene! Sembra che si tratti di un progresso. Il punteggio delle prestazioni complessivo dovrebbe essere aumentato, ossia il sito sta diventando più veloce.

Compressione del testo nel mondo reale

In realtà, la maggior parte dei server presenta semplici correzioni come questa per l'attivazione della compressione. Basta cercare come configurare il server che usi per comprimere il testo.

Ridimensiona immagini

Dal tuo nuovo report risulta che il dimensionamento corretto delle immagini è un'altra grande opportunità.

Il ridimensionamento delle immagini consente di ridurre i tempi di caricamento riducendo le dimensioni dei file delle immagini. Se l'utente visualizza le immagini su un dispositivo mobile largo 500 pixel, non ha senso inviare un'immagine larga 1500 pixel. L'ideale sarebbe inviare al massimo un'immagine larga 500 pixel.

1. Nel report, fai clic su Immagini di dimensioni corrette per vedere quali immagini devono essere ridimensionate. Sembra che tutte e quattro le immagini siano 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 influisca solo lievemente sul punteggio del rendimento complessivo. Tuttavia, una cosa che il punteggio non mostra chiaramente è la quantità di dati di rete che stai salvando per i tuoi utenti. Le dimensioni totali delle vecchie foto erano di circa 6,1 MB, mentre ora ci sono solo 633 kB. Puoi verificarlo nella barra di stato nella parte inferiore del riquadro Rete.

Ridimensionamento delle immagini nel mondo reale

Per un'app di piccole dimensioni, potrebbe essere sufficiente eseguire un ridimensionamento una tantum come questo. Ma per un'app di grandi dimensioni, ovviamente non è scalabile. Ecco alcune strategie per la gestione delle immagini in app di grandi dimensioni:

• Ridimensiona le immagini durante il processo di compilazione.
• Crea più dimensioni di ogni immagine durante il processo di compilazione, quindi usa srcset nel codice. In fase di runtime, il browser si occupa di scegliere la dimensione migliore per il dispositivo su cui viene eseguito. Consulta Immagini di dimensioni relative.
• Utilizza una CDN di immagini che ti consenta di ridimensionare in modo dinamico un'immagine quando la richiedi.
• Ottimizza almeno ogni immagine. Questo spesso può comportare risparmi enormi. L'ottimizzazione si verifica quando esegui un'immagine attraverso un programma speciale che riduce le dimensioni del file immagine. Per altri suggerimenti, consulta la sezione Nozioni di base sull'ottimizzazione delle immagini.

Elimina le risorse che bloccano la visualizzazione

Il tuo ultimo report afferma che l'eliminazione delle risorse che bloccano la visualizzazione è ora la più grande opportunità.

Una risorsa di blocco della visualizzazione è un file JavaScript o CSS esterno che il browser deve scaricare, analizzare ed eseguire per poter mostrare la pagina. L'obiettivo è eseguire solo il codice CSS e JavaScript di base necessari 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 che bloccano la visualizzazione: 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, 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 offre una panoramica della quantità di codice eseguita in bundle.js, jquery.js e lodash.js 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. Viene eseguita una riga di codice se accanto è visualizzata una barra verde. Una barra rossa accanto a una riga di codice indica che il codice non è stato eseguito e che non è sicuramente necessario durante il caricamento della pagina.

   

6. Scorri un po' il codice di jQuery. Alcune delle righe che vengono "eseguite" sono in realtà solo commenti. Un altro modo per ridurre le dimensioni di questo file è eseguire 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 distribuire solo il codice necessario per il caricamento pagina.

I file jquery.js e lodash.js sono necessari per caricare la pagina? La scheda Richiedi blocco 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 richieste. Viene visualizzata la scheda Request Block (Richiedi blocco).

   

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

   

4. Ricarica la pagina. Le richieste jQuery e Lodash sono di colore rosso, ovvero sono state bloccate. La pagina si carica ancora ed è interattiva, quindi queste risorse non sono necessarie.

   

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

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

A questo punto, rimuovi i riferimenti a questi file dal codice ed esegui di nuovo il controllo della 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 il sito venga creato di nuovo ed eseguito nuovamente il deployment.

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 si riferisce al codice necessario per caricare una pagina. In generale, puoi velocizzare il caricamento della pagina inviando solo codice critico durante il caricamento della pagina e tramite il caricamento lento di tutto il resto.

• È improbabile che tu possa trovare script che puoi rimuovere direttamente, ma spesso scoprirai che molti script non devono essere richiesti durante il caricamento della pagina e possono invece essere richiesti in modo asincrono. Consulta l'articolo Utilizzare l'asinc o il differimento.
• Se utilizzi un framework, controlla se ha una modalità di produzione. In questa modalità potresti usare funzionalità come scuotimento degli alberi per eliminare codice non necessario che blocca il rendering critico.

Riduci il lavoro del thread principale

Il tuo ultimo report mostra alcuni risparmi potenziali di minore entità nella sezione Opportunità, ma se scorri verso il basso fino alla sezione Diagnostica, sembra che il più grande collo di bottiglia sia un'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.

L'obiettivo è utilizzare il riquadro Rendimento per analizzare l'attività svolta dal thread principale durante il caricamento della pagina e trovare modi per rinviare o rimuovere il lavoro non necessario.

1. Apri Prestazioni > Impostazioni di acquisizione e imposta Rete su 3G lento e CPU su Raffreddamento 6x.

   

   I dispositivi mobili in genere hanno maggiori limitazioni hardware rispetto ai laptop o ai computer desktop, quindi queste impostazioni ti consentono di caricare la pagina come se utilizzassi 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à chiamata 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.

Il muro giallo che vedi nella sezione Panoramica indica che la CPU era completamente impegnata con l'attività di script. Questo è un segnale che potresti essere in grado di velocizzare il caricamento della pagina riducendo il lavoro di JavaScript.

Analizza la traccia per trovare modi per svolgere meno operazioni relative a JavaScript:

1. Fai clic sulla sezione Tempi per espanderla.

   

   Ho notato una serie di misure di tempo utente da React, sembra che l'app di Tony stia utilizzando la modalità di sviluppo di React. Il passaggio alla modalità di produzione di React probabilmente ti consentirà di ottenere prestazioni ottimali.

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

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

   

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

4. Scorri fino in fondo alla 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 dall'app si trova solitamente nella parte inferiore.

   

   In questa app sembra che una funzione denominata 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...

5. Apri la scheda Dal basso verso l'alto in basso. Questa scheda mostra in dettaglio le attività che hanno richiesto più tempo. Se non vedi nulla nella sezione Dal basso in 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 quell'attività.

   La colonna Tempo autonomo mostra quanto tempo è stato trascorso direttamente in ciascuna 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 velocizza il caricamento della pagina. Inizia con la modalità 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) nel 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.

Svolgere meno attività di thread principale nel mondo reale

In generale, il riquadro Rendimento è il modo più comune per comprendere l'attività svolta dal 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 arbitrariamente il markup di determinate fasi del ciclo di vita dell'app, in modo da monitorarne il tempo.

Riepilogo

• Ogni volta che decidi di ottimizzare le prestazioni di caricamento di un sito, inizia sempre con un controllo. Il controllo stabilisce una base di riferimento e fornisce suggerimenti su come migliorare.
• Apporta una modifica alla volta e controlla la pagina dopo ogni modifica per vedere come la modifica isolata influisce sulle prestazioni.

Passaggi successivi

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

• Segnala i bug in questo documento nel repository developer.chrome.com.
• Invia segnalazioni di bug su DevTools nei bug di Chromium.
• Discuti delle funzionalità e dei cambiamenti della Mailing List. Non utilizzare la mailing list per le domande di assistenza. Usa invece Stack Overflow.
• Ricevi assistenza generale sull'utilizzo di DevTools su Stack Overflow. Per inviare richieste di bug, utilizza sempre i bug di Chromium.
• Scrivici un tweet all'indirizzo @ChromeDevTools.