La sezione Opportunità del report Lighthouse segnala il terzo livello di richieste nella catena di richieste critiche come candidati di precaricamento:
In che modo i flag di Lighthouse determinano i candidati di precaricamento
Supponiamo che la catena di richieste fondamentali della tua pagina abbia il seguente aspetto:
index.html |--app.js |--styles.css |--ui.js
Il file index.html
dichiara <script src="app.js">
. Quando app.js
viene eseguito , chiama
fetch()
per scaricare styles.css
e ui.js
. La pagina non sembra completa finché le ultime due risorse non vengono scaricate, analizzate ed eseguite.
Utilizzando l'esempio precedente, Lighthouse segnala styles.css
e ui.js
come candidati.
I potenziali risparmi si basano su quanto prima il browser potrebbe avviare le richieste se hai dichiarato i link di precaricamento.
Ad esempio, se app.js
impiega 200 ms per scaricare, analizzare ed eseguire, il potenziale risparmio per ogni risorsa è di 200 ms, poiché app.js
non è più un collo di bottiglia per ciascuna delle richieste.
Le richieste di precaricamento possono accelerare il caricamento delle pagine.
Il problema è che il browser viene a conoscenza delle ultime due risorse solo dopo aver scaricato, analizzato ed eseguito app.js
.
Tuttavia, sai bene che queste risorse sono importanti
e devono essere scaricate il prima possibile.
Dichiara i link di precaricamento
Dichiara i link di precaricamento nel tuo codice HTML per indicare al browser di scaricare le risorse chiave il prima possibile.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
Per ulteriori indicazioni, consulta anche Precaricare gli asset critici per migliorare la velocità di caricamento.
Compatibilità del browser
A partire da giugno 2020, il precaricamento è supportato nei browser basati su Chromium. Per gli aggiornamenti, consulta Compatibilità del browser.
Supporto degli strumenti di creazione per il precaricamento
Consulta la pagina Precaricamento degli asset di Tooling.Report.
Indicazioni specifiche per lo stack
Angular
Precarica i percorsi in anticipo per velocizzare la navigazione.
Magento
Modifica il layout dei temi
e aggiungi i tag <link rel=preload>
.