Précharger les requêtes clés

La section "Opportunités" de votre rapport Lighthouse indique le troisième niveau de requêtes de votre chaîne de requêtes critique en tant que candidats de préchargement:

Capture d'écran de l'audit des demandes clés de préchargement Lighthouse

Comment les indicateurs Lighthouse identifient les candidats au préchargement

Supposons que la chaîne de requête critique de votre page se présente comme suit:

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

Votre fichier index.html déclare <script src="app.js">. Lorsque app.js s'exécute , il appelle fetch() pour télécharger styles.css et ui.js. La page ne semble pas complète tant que les deux dernières ressources n'ont pas été téléchargées, analysées et exécutées. Dans l'exemple ci-dessus, Lighthouse signale styles.css et ui.js comme candidats.

Les économies potentielles sont basées sur le délai entre lequel le navigateur pourrait lancer les requêtes si vous déclariez des liens de préchargement. Par exemple, si le téléchargement, l'analyse et l'exécution de app.js prennent 200 ms, les économies potentielles pour chaque ressource sont de 200 ms, car app.js n'est plus un goulot d'étranglement pour chacune des requêtes.

Les demandes de préchargement peuvent accélérer le chargement de vos pages.

Sans liens de préchargement, styles.css et ui.js ne sont demandés qu&#39;après le téléchargement, l&#39;analyse et l&#39;exécution du fichier app.js.
Sans liens de préchargement, styles.css et ui.js ne sont demandés qu'après le téléchargement, l'analyse et l'exécution de app.js.

Le problème est que le navigateur ne détecte ces deux dernières ressources qu'après avoir téléchargé, analysé et exécuté app.js. Mais vous savez que ces ressources sont importantes et doivent être téléchargées dès que possible.

Déclarez des liens de préchargement dans votre code HTML pour indiquer au navigateur de télécharger les ressources clés dès que possible.

<head>
  ...
  <link rel="preload" href="styles.css" as="style" />
  <link rel="preload" href="ui.js" as="script" />
  ...
</head>
Avec les liens de préchargement, styles.css et ui.js sont demandés en même temps qu&#39;app.js.
Avec les liens de préchargement, styles.css et ui.js sont demandés en même temps que app.js.

Pour en savoir plus, consultez également Précharger les éléments critiques pour améliorer la vitesse de chargement.

Compatibilité du navigateur

Depuis juin 2020, le préchargement est disponible dans les navigateurs basés sur Chromium. Consultez la section Compatibilité des navigateurs pour obtenir les mises à jour.

Compatibilité des outils de compilation pour le préchargement

Consultez la page Précharger des éléments de Tooling.Report.

Conseils spécifiques à la pile

Angular

Préchargez les itinéraires à l'avance pour accélérer la navigation.

Magento

Modifiez la mise en page de vos thèmes et ajoutez des balises <link rel=preload>.

Ressources