Lighthouse: ottimizza la velocità del sito web

Panoramica

Usa il riquadro Lighthouse per eseguire un controllo completo del tuo sito web. Il riquadro Lighthouse genera un report che fornisce informazioni sui seguenti elementi del tuo sito web:

• Prestazioni
• Accessibilità
• Best practice
• SEO

... e molte altre metriche.

Il seguente tutorial ti aiuta a iniziare a utilizzare Lighthouse in Chrome DevTools.

Per scoprire di più sugli altri modi in cui Lighthouse può migliorare la qualità del tuo sito web, consulta la nostra documentazione su Lighthouse.

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

È necessario avere un'esperienza di sviluppo web di base, simile a quanto appreso in il 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 contenuti preferiti alimenti. I suoi fan adorano il sito, ma Tony continua a sentire lamentele che sito si 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 una per il controllo dei dati. 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 Sito web di Tommaso, per consentirti di apportare modifiche in seguito:

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. 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 verrà chiamata scheda Demo. Il caricamento del sito potrebbe richiedere un po' di tempo.

   

3. Apri DevTools insieme alla demo.

   

di Gemini Advanced.

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. Di seguito viene fornita una spiegazione 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 nel more_vert menu Strumenti > Visualizza la traccia senza limitazioni 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. Si chiama "simulata" perché Lighthouse non ha limitazioni 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 Dispositivo mobile. L'opzione per dispositivi mobili modifica la stringa dello user agent e simula un oggetto area visibile. 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 di Lighthouse, prova a eseguire la scheda demo da una finestra di navigazione in incognito senza aprire altre schede. In questo modo avrai la certezza eseguire Chrome dallo stato pulito. Le estensioni di Chrome, in particolare, possono interferiscono 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, mentre 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, First Contentful Paint indica quando i contenuti vengono visualizzati per la prima volta sullo schermo, un traguardo importante nella la percezione del caricamento della pagina, mentre Tempo all'interattività indica il punto in cui la pagina abbastanza pronta per gestire le interazioni degli utenti.

Screenshot

Poi c'è una raccolta di screenshot che mostrano l'aspetto della pagina quando è stata caricata.

Opportunità

Di seguito trovi la sezione Opportunità, in cui vengono forniti suggerimenti specifici su come migliorare il caricamento di questa pagina specifica. delle prestazioni.

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

Fai clic su Scopri di più... per visualizzare la documentazione specifica sul motivo per cui un'opportunità è importante consigli su come correggerlo.

Diagnostica

La sezione Diagnostica fornisce ulteriori informazioni sui fattori che influiscono sul rendimento della pagina il tempo di caricamento.

Controlli superati

La sezione Controlli superati mostra il corretto funzionamento del sito. Fai clic per espandere .

Passaggio 2. Esperimento

La sezione Opportunità del report Lighthouse offre suggerimenti su come migliorare il rendimento delle prestazioni. In questa sezione implementerai le modifiche consigliate al codebase, controllando le sito dopo ogni modifica per misurarne l'effetto 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 il rendimento della pagina.

La compressione del testo si verifica quando riduci o comprimi le dimensioni di un file di testo prima di inviarlo in ogni rete. È un po' come comprimere una cartella prima di inviarla via email per ridurne le dimensioni.

Prima di attivare la compressione, ecco un paio di modi per controllare manualmente se il testo vengono compresse.

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

Ogni cella Dimensione mostra due valori. Il valore superiore indica la dimensione della risorsa scaricata. La il valore inferiore corrisponde alla dimensione della risorsa non compressa. Se i due valori sono uguali, il parametro la risorsa non viene compressa quando viene inviata sulla rete. In questo esempio, i valori in alto e in basso per 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, l'intestazione viene in genere è impostato su gzip, deflate o br. Consulta le Istruzioni per una spiegazione e i relativi valori.

Basta con le spiegazioni. È il momento di apportare alcune modifiche. Attiva la compressione del testo aggiungendone 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 sul caricamento della pagina. rendimento:

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. Fai una ricerca su come per 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 il tuo utente è le immagini su uno schermo di un dispositivo mobile largo 500 pixel, non ha davvero senso inviando 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 viene mostrato chiaramente è la quantità di dati di rete che stai salvando ai tuoi utenti. Il totale le dimensioni 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. Vedi Essentials Ottimizzazione delle immagini per ulteriori suggerimenti.

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 prima di poter mostrare la pagina. L'obiettivo è eseguire solo i 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 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 Aggiorna 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. È stata creata una riga di codice se presenta una barra verde accanto. Una barra rossa accanto a una riga di codice indica che non è stato eseguito non è assolutamente necessaria al caricamento della pagina.

   

6. Scorri un po' il codice di jQuery. Alcune delle righe che vengono "eseguite" sono in realtà solo commenti. L'esecuzione di questo codice tramite un minificatore che rimuove i commenti è un altro modo per ridurre dimensioni di questo file.

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

I file jquery.js e lodash.js sono necessari per caricare la pagina? La scheda Request Blocchi può ti mostreremo 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 la pagina continua a essere 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 richieste è utile per simulare il comportamento della pagina quando un determinato e la 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, può accelerare il caricamento della pagina inviando solo codice critico durante il caricamento della pagina e poi tramite caricamento lento tutto il resto.

• È improbabile che tu possa trovare script che puoi rimuovere direttamente, ma spesso troverai che Molti script non devono essere richiesti durante il caricamento della pagina, bensì possono 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. Questa modalità potrebbe utilizzare una funzionalità come come scuotimento degli alberi per eliminare codice non necessario che blocca il rendering critico.

Riduci il lavoro del thread principale

L'ultimo report mostra alcuni risparmi potenziali di minore entità nella sezione Opportunità, ma se scorri fino alla sezione Diagnostica, sembra che il collo di bottiglia più grande sia un problema di thread principale attività.

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

L'obiettivo è usare il riquadro Rendimento per analizzare il lavoro svolto dal thread principale mentre pagine caricate e trovare modi per rimandare o rimuovere le attività non necessarie.

1. Apri Rendimento > Acquisisci impostazioni 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, quindi queste impostazioni ti consentono di caricare la pagina come se stessi utilizzando un dispositivo meno potente.

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

   

La traccia mostra l'attività in ordine cronologico, da sinistra a destra. I grafici FPS, CPU e NET in alto offrono una panoramica di frame al secondo, attività della CPU e 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 relative al 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 usi un framework, la maggior parte dell'attività superiore è causata dal framework, che di solito è 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 a qualsiasi attività o gruppo di attività che hai attualmente selezionate. Ad esempio, se hai fatto clic su una delle mineBitcoin attività, il valore 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.

Tempo per vedere se si utilizza la modalità di produzione e se si riduce l'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 sul 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 il tempo di ciascuna in più fasi.

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 sul rendimento.

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