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](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/a-screenshot-the-lightho-a0f22e9688496.png?authuser=6&hl=fr)
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'après le téléchargement, l'analyse et l'exécution du fichier app.js.](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/without-preload-links-st-f9c93e03b4029.png?authuser=6&hl=fr)
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éclarer vos liens de préchargement
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'app.js.](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/with-preload-links-style-da7d794e22995.png?authuser=6&hl=fr)
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>
.