Différer les scripts jusqu'à ce qu'ils soient nécessaires

Différer les scripts jusqu'à ce qu'ils soient nécessaires

Dans cet article, je vais vous montrer et expliquer un modèle cool pour charger les scripts qui ne sont pas nécessaires au début du chargement de la page à un moment ultérieur, juste avant qu'ils ne soient nécessaires.

La chose la plus efficace que vous puissiez faire avec JavaScript en ce qui concerne les Core Web Vitals est de retarder le chargement d'une ressource jusqu'à ce qu'elle soit nécessaire. Cela supprimera le JavaScript inutilisé et inutile de la page et ne le chargera que lorsqu'il sera nécessaire. Cela corrigera l'avertissement Lighthouse 'reduce unused JavaScript' et améliorera également les métriques de réactivité comme l 'Interaction to Next Paint (INP).
Nous faisons cela avec les images depuis longtemps. Cela s'appelle le lazy loading (chargement paresseux). Avec le lazy loading, une image en dessous de la ligne de flottaison est chargée juste avant qu'elle n'apparaisse à l'écran. De cette façon, nous n'avons pas besoin de charger l'image immédiatement pendant le chargement de la page et le navigateur peut consacrer ses précieuses ressources au téléchargement, à l'analyse et à la peinture des choses qui sont réellement nécessaires.

Maintenant, imaginez que nous puissions faire la même chose avec des Scripts au lieu d'images. Eh bien, il s'avère que nous le pouvons ! Malheureusement, ce n'est pas aussi simple que d'ajouter loading="lazy" à une image, mais avec un peu d'effort, nous pouvons le faire fonctionner

Étape 1 : Charger les scripts à la demande

Pour ajouter des scripts à la page après le chargement de la page, nous aurons besoin d'un petit script qui le fait pour nous.

function injectScript(scriptUrl, callback) {
  var script = document.createElement("script");
  script.src = scriptUrl;
  if (typeof callback === "function") {
    script.onload = function () {
      callback();
    };
  }
  document.head.appendChild(script);
}        

Cette fonction injecte un script dans la page web actuelle en créant un nouvel élément script et en l'ajoutant à la tête (head) du document. Le paramètre scriptUrl spécifie l'URL du script à injecter. Le paramètre callback est une fonction facultative qui sera appelée lorsque le script aura fini de charger. Lorsque le script a fini de charger, l'événement onload de l'élément script est déclenché. Si une fonction de rappel a été fournie, elle sera appelée à ce moment-là.

Étape 2 : Charger les scripts à la demande

L'étape suivante consiste à charger les scripts à la demande. Il existe 2 méthodes courantes pour ce faire. La première est la plus fiable 'lorsqu'une partie de la page est visible' et la seconde est la plus rapide 'lors d'une interaction'.

2a : Intersection observer

La première méthode pour charger un script juste avant qu'il ne soit nécessaire utilise l'Intersection Observer. L'Intersection Observer est une méthode fiable qui 'se déclenche' lorsqu'un élément intersecte la partie visible de l'écran. Nous pouvons utiliser ce comportement pour déclencher un téléchargement de script uniquement lorsqu'un élément est visible. L'inconvénient de cette méthode est que même si un élément est 'à l'écran', il se peut qu'il ne soit toujours pas utilisé.

function injectScriptOnIntersection(scriptUrl, elementSelector) {
  var observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        injectScript(scriptUrl);
        observer.unobserve(entry.target);
      }
    });
  });

  var element = document.querySelector(elementSelector);
  observer.observe(element);
}
        

Cette fonction prend deux paramètres : scriptUrl est l'URL du script à injecter, et elementSelector est un sélecteur CSS pour l'élément qui doit déclencher l'injection.

La fonction crée a nouvel objet IntersectionObserver et lui passe une fonction de rappel qui sera appelée chaque fois qu'un élément observé intersecte la fenêtre d'affichage (viewport). La fonction de rappel vérifie si l'élément intersecte et, si c'est le cas, injecte le script et arrête d'observer l'élément.

Notez que l'API Intersection Observer n'est pas prise en charge dans tous les navigateurs, vous devrez donc peut-être utiliser un polyfill si vous devez prendre en charge les anciens navigateurs.

injectScriptOnIntersection('script.js', '#my-element');

Cela injectera le script lorsque l'élément avec l'ID my-element deviendra visible dans la fenêtre d'affichage.

2b : Lors d'une interaction

La méthode la plus efficace pour charger du JavaScript à la demande est de le charger lorsqu'un visiteur interagit avec un certain élément. Par exemple un formulaire. L'avantage d'utiliser cette méthode est que vous ne chargerez probablement jamais le script s'il n'est pas nécessaire. L'inconvénient est que l'action de téléchargement est assez tardive et nous devons décider quels événements (mousover, hover, touchstart etc etc) nous voulons écouter.

function injectScriptOnInteraction(scriptUrl, elementSelector, eventTypes) {
  var element = document.querySelector(elementSelector);
  var eventHandler = function() {
    injectScript(scriptUrl);
    eventTypes.forEach(function(eventType) {
      element.removeEventListener(eventType, eventHandler);
    });
  };
  eventTypes.forEach(function(eventType) {
    element.addEventListener(eventType, eventHandler);
  });
}
        

Cette fonction prend trois paramètres : scriptUrl est l'URL du script à injecter, elementSelector est un sélecteur CSS pour l'élément qui doit déclencher l'injection, et eventTypes est un tableau de types d'événements qui doivent déclencher l'injection (par exemple ["click", "mouseover"]).

La fonction trouve l'élément en utilisant document.querySelector et lui ajoute des écouteurs d'événements pour chacun des types d'événements spécifiés. Lorsque l'un des événements spécifiés se produit, la fonction injectScript est appelée avec l'URL spécifiée, et les écouteurs d'événements sont supprimés à l'aide de element.removeEventListener.

injectScriptOnInteraction(
  'script.js',
  '#my-element', 
  ['click', 'mouseover']
);

Cela injectera le script lorsque l'élément avec l'ID my-element est cliqué ou survolé, puis supprimera les écouteurs d'événements.

Conclusion

Lorsque les scripts ne sont pas nécessaires tout de suite au début du chargement de la page, c'est une excellente idée de les charger à la demande ! Nous pouvons le faire en utilisant l'Intersection Observer ou lors d'une interaction. Cela libérera des ressources précieuses pendant les premières étapes du chargement de la page