Precarica le richieste chiave

La sezione Opportunità del report Lighthouse segnala il terzo livello di richieste nella catena di richieste critiche come candidati di precaricamento:

Uno screenshot del controllo delle richieste delle chiavi di precaricamento di Lighthouse

In che modo i flag di Lighthouse determinano i candidati per il precaricamento

Supponiamo che la tua pagina catena di richieste critiche ha il seguente aspetto:

index.html |--app.js |--styles.css |--ui.js

Il tuo file index.html dichiara <script src="app.js">. Quando app.js esegue , chiama fetch() per scaricare styles.css e ui.js. La pagina non sembra completa fino a quando le ultime due risorse non vengono scaricate, analizzate ed eseguite. Utilizzando l'esempio precedente, Lighthouse contrassegna styles.css e ui.js come candidati.

I risparmi potenziali si basano sull'anticipo che il browser potrebbe riuscire a per avviare le richieste se hai dichiarato i link di precaricamento. Ad esempio, se app.js impiega 200 ms per scaricare, analizzare ed eseguire, il risparmio potenziale per ogni risorsa è di 200 ms, poiché app.js non rappresenta più un collo di bottiglia per ciascuna richiesta.

Le richieste di precaricamento possono accelerare il caricamento delle pagine.

Senza i link di precaricamento, gli stili.css e ui.js vengono richiesti solo dopo che app.js è stato scaricato, analizzato ed eseguito.
. Senza link di precaricamento, styles.css e ui.js sono richiesti solo dopo il download di app.js, analizzati ed eseguiti.

Il problema è che il browser viene a conoscenza di queste ultime due risorse dopo il download, l'analisi e l'esecuzione di app.js. Ma sai che queste risorse sono importanti e dovrebbe essere scaricato il prima possibile.

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>
Con i link di precaricamento, gli stili.css e ui.js vengono richiesti contemporaneamente ad app.js.
Con i link di precaricamento, styles.css e ui.js sono richiesti contemporaneamente a app.js.

Vedi anche Precaricare gli asset critici per migliorare la velocità di caricamento per ulteriori indicazioni.

Compatibilità del browser

A partire da giugno 2020, il precaricamento è supportato nei browser basati su Chromium. Consulta Compatibilità del browser per aggiornamenti.

Supporto degli strumenti di creazione per il precaricamento

Consulta la sezione Precaricamento degli asset di Tooling.Report .

Indicazioni specifiche per stack

Angular

Precarica le route in anticipo per velocizzare la navigazione.

Magento

Modificare il layout dei temi e aggiungi i tag <link rel=preload>.

Risorse