Lighthouse è uno strumento automatizzato per migliorare la qualità del tuo sito. Gli attribuisci un URL e fornisce un elenco di consigli su come migliorare le prestazioni delle pagine, renderle più accessibili, rispettare le best practice e altro ancora. Puoi eseguirlo da Chrome DevTools, come estensione di Chrome o anche come modulo nodo, utile per l'integrazione continua.
È da un po' che Lighthouse ha fornito molti suggerimenti per migliorare le prestazioni di caricamento delle pagine, come l'attivazione della compressione del testo o la riduzione degli script che bloccano il rendering. Il team di Lighthouse continua a distribuire nuovi controlli per offrirti consigli ancora più utili per velocizzare i tuoi siti. Questo post è un riepilogo di utili controlli del rendimento di cui potresti non essere a conoscenza, ad esempio:
- Suddivisione del lavoro del thread principale
- Precarica le richieste chiave
- Il tempo di avvio di JavaScript è elevato
- Evita i reindirizzamenti delle pagine
- JavaScript non utilizzato
- Utilizza il criterio relativo alla cache inefficiente per gli asset statici
- Evita costosi viaggi di andata e ritorno multipli verso qualsiasi origine
- Utilizzare i formati video per i contenuti animati
- Tutto il testo rimane visibile durante il caricamento dei caratteri web
- CSS e JavaScript non minimizzati
- Regole CSS inutilizzate
Analisi del lavoro del thread principale
Se hai mai usato il riquadro delle prestazioni in DevTools, sai che può essere un po' noioso ottenere un'analisi dettagliata di dove viene trascorso il tempo di CPU per il caricamento di una pagina. Siamo lieti di annunciare che queste informazioni sono ora disponibili in modo pratico e veloce tramite il nuovo controllo Ripartizione del lavoro del thread principale.
Questa nuova diagnostica valuta il livello e il tipo di attività che si verifica durante il caricamento della pagina, che puoi utilizzare per gestire i problemi di prestazioni di caricamento relativi a layout, valutazione degli script, analisi e altre attività.
Precarica le richieste chiave
Quando i browser recuperano le risorse, lo fanno quando trovano riferimenti alle risorse all'interno del documento e delle relative sottorisorse. A volte questo comportamento può non essere ottimale, perché alcune risorse critiche vengono rilevate piuttosto tardi nel processo di caricamento della pagina. Fortunatamente, rel=preload offre agli sviluppatori la possibilità di suggerire ai browser conformi quali risorse devono essere recuperate il prima possibile. Il nuovo controllo delle richieste di chiavi di precaricamento consente agli sviluppatori di sapere quali risorse potrebbero beneficiare di un caricamento più rapido entro il giorno rel=preload.
È estremamente importante testare e confrontare le variazioni delle prestazioni con e senza
rel=preload, poiché possono influire sulle prestazioni di caricamento in modi
impensabili. Ad esempio, il precaricamento di un'immagine di grandi dimensioni potrebbe ritardare il rendering iniziale, ma il compromesso è che l'immagine precaricata apparirà prima nel layout.
Assicurati sempre di essere in ordine con i risultati!
Il tempo di avvio di JavaScript è elevato
Se viene caricato troppo codice JavaScript, la pagina può non rispondere durante l'analisi, la compilazione e l'esecuzione da parte del browser. Gli script e le pubblicità di terze parti sono una fonte specifica di attività eccessiva di script che può compromettere i dispositivi potenti. Il nuovo controllo Il tempo di avvio JavaScript è elevato rivela il tempo di CPU utilizzato da ogni script di una pagina, insieme al relativo URL:
Quando esegui questo controllo, puoi anche attivare i badge di terze parti nel riquadro Rete e filtrare l'elenco per identificare le risorse script di terze parti. Con i dati derivanti da questo controllo, sarai più in grado di individuare sorgenti di attività JavaScript eccessiva che inducono le pagine a diventare lente. Per gli script specifici per la tua applicazione, puoi utilizzare tecniche come la suddivisione del codice e la scuotimento degli alberi per limitare la quantità di JavaScript in ogni pagina del tuo sito.
Evita i reindirizzamenti alle pagine
A volte, quando un browser richiede un URL, il server può rispondere con un codice di stato di livello 300. Questo causa il reindirizzamento del browser a un altro URL. Sebbene i reindirizzamenti siano necessari per la SEO e per motivi di praticità, aggiungono latenza alle richieste. Questo è particolarmente vero se reindirizzano ad altre origini, il che può comportare ulteriori ricerche DNS e tempi di negoziazione di connessione/TLS.
I reindirizzamenti sono indesiderati per le pagine di destinazione del tuo sito. Per aiutarti a ridurre la latenza e migliorare le prestazioni di caricamento, Lighthouse ora offre il controllo Evita reindirizzamenti delle pagine, che ti consente di sapere quando una navigazione attiva eventuali reindirizzamenti.
Tieni presente che questo controllo è difficile da attivare nella versione DevTools di Lighthouse, perché analizza l'URL corrente nella barra degli indirizzi della pagina, che riflette la risoluzione di tutti i reindirizzamenti. È probabile che questo controllo venga completato nell'interfaccia a riga di comando di Node.
JavaScript inutilizzato
Il codice non funzionante può rappresentare un serio problema nelle applicazioni con uso intensivo di JavaScript. Sebbene non comporti costi di esecuzione in quanto non viene mai richiamato, comporta altri effetti indesiderati. I codici non validi vengono comunque scaricati, analizzati e compilati dal browser. Questo influisce sulle prestazioni di caricamento e sui tempi di avvio di JavaScript. Analogamente al riquadro Copertura in DevTools, il controllo JavaScript inutilizzato mostra il codice JavaScript scaricato dalla pagina corrente, ma non viene mai utilizzato.
Con questo controllo puoi identificare il codice non valido nelle tue applicazioni e rimuoverlo per migliorare le prestazioni di caricamento e ridurre l'utilizzo delle risorse di sistema. Suggerimento avanzato: puoi trovare queste informazioni anche utilizzando il riquadro Copertura codice in DevTools.
Utilizza il criterio della cache inefficiente per gli asset statici
Sebbene molti consigli per le prestazioni siano generalmente incentrati sull'aumento della velocità di un sito web per i nuovi utenti, è anche importante utilizzare la memorizzazione nella cache per migliorare le prestazioni di caricamento per gli utenti di ritorno. Il controllo Utilizza il criterio della cache inefficiente per gli asset statici controlla le intestazioni di memorizzazione nella cache per le risorse di rete e ti informa se i criteri della cache per le risorse statiche sono inferiori agli standard.
Con l'aiuto di questo controllo, potrai trovare e risolvere facilmente i problemi relativi al criterio attuale per la cache. Ciò migliorerà notevolmente le prestazioni per gli utenti di ritorno, che apprezzeranno la velocità aggiuntiva.
Evita costosi viaggi di andata e ritorno multipli verso qualsiasi origine
Quando i browser recuperano risorse da un server, può essere necessario molto tempo per eseguire una ricerca DNS e stabilire una connessione a un server.
rel=preconnect
consente agli sviluppatori di mascherare questa latenza stabilendo connessioni ad altri
server prima che il browser lo faccia a tempo debito. Il controllo Evita costosi più viaggi di andata e ritorno verso qualsiasi origine ti aiuterà a scoprire opportunità di utilizzo di rel=preconnect.
rel=preconnect in Lighthouse.Quando la latenza per gli asset multiorigine viene ridotta, gli utenti percepiranno che le cose stanno procedendo un po' più rapidamente. Con questo nuovo controllo di Lighthouse, scoprirai nuove opportunità di utilizzare rel=preconnect al fine di farlo.
Utilizzare i formati video per i contenuti animati
Le GIF animate sono enormemente e consumano spesso diverse centinaia di kilobyte se non diversi megabyte di dati. Se ti interessa caricare il rendimento, convertire le GIF in video è la soluzione. Per fortuna, ti serve il controllo Usa formati video per contenuti animati.
Se il tuo sito contiene GIF superiori a 100 kB, questo controllo le segnalerà automaticamente e ti indirizzerà a alcune indicazioni su come convertirle in video e incorporarle. Siti come Imgur hanno migliorato notevolmente le prestazioni di caricamento convertindo le GIF in video. Inoltre, se il tuo sito utilizza un piano di hosting con larghezza di banda a consumo, il potenziale risparmio sui costi dovrebbe essere sufficiente per convincerti.
Tutto il testo rimane visibile durante il caricamento dei caratteri web
Quando carichiamo caratteri web per le pagine, i browser spesso mostrano il testo invisibile fino al caricamento del carattere. Questo fenomeno, noto come Flash di testo invisibile (FOIT)), potrebbe essere preferibile dal punto di vista della progettazione, ma in realtà è un problema. Il testo di cui viene bloccato il rendering non può essere letto fino a quando non viene eseguito il rendering e diventa visibile. Nel caso di connessioni a latenza elevata e/o a larghezza di banda elevata, ciò significa che manca una parte fondamentale dell'esperienza utente. Può anche rappresentare una sorta di problema di prestazioni percettivo in quanto la pagina non esegue il rendering di contenuti significativi con la stessa velocità prevista. Fortunatamente, il controllo Tutto il testo rimane visibile durante il caricamento dei caratteri web ti aiuta a trovare opportunità per risolvere questo problema sul tuo sito.
Se Lighthouse trova nell'applicazione caratteri web che ritardano il rendering del testo, esistono alcuni potenziali rimedi. Puoi controllare il rendering del testo con la proprietà CSS font-display e/o con l'API Font Upload.
Se vuoi approfondire l'argomento, ti consigliamo di leggere A Complete Guide to Font Load Strategies (Una guida completa alle strategie di caricamento dei caratteri), un'eccellente guida di Zach Skinman, un'ottima risorsa per un caricamento ottimale dei caratteri.
CSS e JavaScript non minimizzati
La minificazione è una tecnica suggerita dal momento che le prestazioni sul web sono un elemento imprescindibile, per una buona ragione. Riduce notevolmente la dimensione delle risorse basate su testo, il che a sua volta è un vantaggio per il caricamento delle prestazioni. Tuttavia, è facile trascurare questa ottimizzazione, soprattutto se i processi di build non se ne occupano. I controlli Minimizza CSS e Minimizza JavaScript compileranno un elenco delle risorse non minime trovate nella pagina corrente. Poi puoi intervenire minimizzando manualmente i file o potenziando il tuo sistema di compilazione per farlo per te.
Regole CSS inutilizzate
Quando il sito diventa un po' lungo, è inevitabile che inizi ad accumularsi la quantità di rifiuti lasciati dal refactoring. Una di queste origini di traffico non sfruttato si presenta sotto forma di regole CSS inutilizzate, che non sono più necessarie per il funzionamento del sito, ma utilizzano comunque larghezza di banda. Per praticità, il controllo Regole CSS inutilizzate mostra quali risorse CSS nella pagina contengono codice CSS inutilizzato.
Se Lighthouse trova CSS inutilizzati nella pagina, esistono modi per eliminarlo. UnCSS è una di queste utilità che esegue questa operazione in modo automatico (anche se deve essere utilizzata con cautela). Un metodo più manuale prevede l'utilizzo del riquadro Copertura del codice in DevTools. Ricorda però che il codice CSS inutilizzato in una pagina potrebbe essere necessario su un'altra. Un altro approccio può essere suddividere il CSS in file specifici del modello che vengono caricati solo dove necessario. Qualunque cosa tu decida di fare, Lighthouse sarà lì per farti sapere se il tuo CSS sta diventando un po' troppo.
Prova Lighthouse!
Se questi nuovi controlli ti piacciono, aggiorna Lighthouse e provarli.
- L'estensione Lighthouse di Chrome dovrebbe aggiornarsi automaticamente, ma puoi aggiornarla manualmente tramite
chrome://extensions. - In DevTools puoi eseguire Lighthouse nel riquadro dei controlli. Chrome si aggiorna a una nuova versione ogni sei settimane circa, pertanto alcuni controlli più recenti potrebbero non essere disponibili. Se hai difficoltà a utilizzare gli ultimi controlli disponibili, puoi eseguire il codice Chrome più recente scaricando Chrome Canary.
- Per gli utenti del nodo: esegui
npm update lighthouseonpm update lighthouse -gse hai installato Lighthouse a livello globale.
Un ringraziamento speciale a Kayce Basques, Patrick Hulce, Addy Osmani e Vinamrata Singal per il loro prezioso feedback, che ha notevolmente migliorato la qualità di questo articolo.