Precarica le richieste chiave

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

Uno screenshot del controllo Lighthouse Preload key requests

In che modo i flag di Lighthouse determinano i candidati al precaricamento

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

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

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

Il potenziale risparmio si basa su quanto prima il browser potrebbe avviare le richieste se dichiarassi i link di precaricamento. Ad esempio, se app.js impiega 200 ms per il download, l'analisi e l'esecuzione, 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 ridurre i tempi di caricamento della pagina.

Senza i link di precaricamento, styles.css e ui.js vengono richiesti solo dopo che app.js è stato scaricato, analizzato ed eseguito.
Senza i link di precaricamento, styles.css e ui.js vengono richiesti solo dopo che app.js è stato scaricato, analizzato ed eseguito.

Il problema è che il browser viene a conoscenza di queste ultime due risorse solo dopo aver scaricato, analizzato ed eseguito app.js. Ma sai che queste risorse sono importanti e devono essere scaricate il prima possibile.

Dichiara i link di precaricamento nel tuo codice HTML per indicare al browser di scaricare le risorse chiave non appena possibile.

<head>
  ...
  <link rel="preload" href="styles.css" as="style" />
  <link rel="preload" href="ui.js" as="script" />
  ...
</head>
Con i link di precaricamento, styles.css e ui.js vengono richiesti contemporaneamente ad app.js.
Con i link di precaricamento, styles.css e ui.js vengono richiesti contemporaneamente a app.js.

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. Consulta la sezione Compatibilità del browser per gli aggiornamenti.

Supporto degli strumenti di compilazione per il precaricamento

Consulta la pagina Tooling.Report's Preloading Assets.

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

Risorse