Différer les scripts jusqu'à ce qu'ils soient nécessaires
Chargez le JavaScript à la demande à l'aide d'IntersectionObserver et de déclencheurs d'interaction utilisateur
Différer les scripts jusqu'à ce qu'ils soient nécessaires
La page mobile médiane livre 251 ko de JavaScript inutilisé selon le [url=https:\/\/almanac.httparchive.org\/en\/2025\/page-weight]Web Almanac 2025[\/url]. Il s'agit de JavaScript que le navigateur télécharge, analyse et compile avant même qu'un visiteur n'en ait besoin. Des formulaires sur lesquels personne n'a cliqué. Des widgets de chat que personne n'a ouverts. Des intégrations de cartes situées sous la ligne de flottaison. Tout cela entre en concurrence pour la bande passante et le temps CPU pendant la phase la plus critique du chargement de la page.
Le moyen le plus efficace de gérer cela est de ne charger les scripts que lorsqu'ils sont réellement nécessaires. C'est différent de l'utilisation de l'[url=\/pagespeed\/async-vs-defer-javascript-and-core-web-vitals]attribut async ou defer[\/url] sur une balise script. Ces attributs téléchargent toujours le script pendant le chargement de la page ; ils modifient simplement le moment de son exécution. Le chargement à la demande ne télécharge pas du tout le script tant qu'un déclencheur n'est pas activé.
Dernière révision par [url=https:\/\/www.linkedin.com\/in\/arjenkarel\/]Arjen Karel[\/url] en mars 2026
Nous faisons cela avec les images depuis longtemps. C'est ce qu'on appelle le lazy loading. Avec le lazy loading, une image située sous la ligne de flottaison est chargée juste avant d'apparaître dans la fenêtre d'affichage. Le navigateur peut consacrer ses ressources au téléchargement, à l'analyse et au rendu des éléments qui sont réellement nécessaires. Le même principe s'applique au JavaScript, et cela corrigera l'[url=\/pagespeed\/reduce-unused-javascript-lighthouse]avertissement Lighthouse "réduire le JavaScript inutilisé"[\/url] et améliorera les métriques de réactivité comme l'[url=\/core-web-vitals\/interaction-to-next-paint]Interaction to Next Paint (INP)[\/url].
Malheureusement, ce n'est pas aussi simple que d'ajouter Pour ajouter des scripts à la page après son chargement, nous avons besoin d'une petite fonction qui crée un élément script et l'ajoute à l'en-tête du document.loading="lazy" à una image, mais avec une petite fonction utilitaire et un déclencheur, nous pouvons y arriver.
L'utilitaire d'injection de script
function injectScript(scriptUrl, callback) {const script = document.createElement('script');script.src = scriptUrl;if (typeof callback === 'function') {script.onload = callback;}document.head.appendChild(script);
}