Udskyd scripts, indtil de er nødvendige

Udskyd scripts, indtil de er nødvendige

I denne artikel vil jeg vise og forklare et smart mønster til at indlæse scripts, der ikke er nødvendige under starten af sideindlæsningen, på et senere tidspunkt, lige inden de er nødvendige.

Det absolut mest effektive, du kan gøre med JavaScript, når det kommer til Core Web Vitals, er at forsinke indlæsningen af en ressource, indtil den er nødvendig. Dette vil fjerne ubrugt og unødvendig JavaScript fra siden og kun indlæse det, når det er nødvendigt. Dette vil løse Lighthouse-advarslen 'reduce unused JavaScript' og også forbedre responsivitetsmålinger som Interaction to Next Paint (INP).
Vi har gjort dette med billeder i lang tid. Det kaldes lazy loading. Med lazy loading indlæses et billede under folden lige inden det ruller ind i synsfeltet. På denne måde behøver vi ikke indlæse billedet med det samme under sideindlæsningen, og browseren kan bruge sine værdifulde ressourcer på at downloade, parse og rendere ting, der faktisk er nødvendige.

Forestil dig nu, at vi kunne gøre det samme med scripts i stedet for billeder. Det viser sig, at det kan vi! Desværre er det ikke så simpelt som at tilføje loading="lazy" til et billede, men med en lille indsats kan vi få det til at fungere

Trin 1: Indlæs scripts on demand

For at tilføje scripts til siden efter sideindlæsningen har vi brug for et lille script, der gør dette for os.

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

Denne funktion injicerer et script i den aktuelle webside ved at oprette et nyt script-element og tilføje det til head-sektionen af dokumentet. Parameteren scriptUrl angiver URL'en for det script, der skal injiceres. Parameteren callback er en valgfri funktion, der vil blive kaldt, når scriptet er færdig med at indlæse. Når scriptet er færdig med at indlæse, udløses onload-eventet på script-elementet. Hvis en callback-funktion er angivet, vil den blive kaldt på dette tidspunkt.

Trin 2: Indlæs scripts on demand

Det næste trin er at indlæse scripts on demand. Der er 2 almindelige metoder til at gøre dette. Den første er den mere pålidelige 'når en del af siden er synlig', og den anden er den hurtigere 'ved interaktion'.

2a: Intersection observer

Den første metode til at indlæse et script lige inden det er nødvendigt, bruger intersection observer. Intersection observer er en pålidelig metode, der 'udløses', når et element krydser den synlige del af skærmen. Vi kan bruge denne adfærd til kun at udløse en script-download, når et element er synligt. Ulempen ved denne metode er, at selvom et element er 'på skærmen', kan det stadig være, at det ikke bliver brugt.

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);
}
        

Denne funktion tager to parametre: scriptUrl er URL'en for det script, der skal injiceres, og elementSelector er en CSS-selektor for det element, der skal udløse injektionen.

Funktionen opretter et nyt IntersectionObserver-objekt og sender det en callback-funktion, der vil blive kaldt, hver gang et observeret element krydser viewporten. Callback-funktionen kontrollerer, om elementet krydser, og hvis det er tilfældet, injicerer scriptet og stopper med at observere elementet.

Bemærk, at Intersection Observer API'et ikke understøttes i alle browsere, så du skal muligvis bruge en polyfill, hvis du har brug for at understøtte ældre browsere.

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

Dette vil injicere scriptet, når elementet med ID my-element bliver synligt i viewporten.

2b: Ved interaktion

Den mest effektive metode til at indlæse JavaScript on demand er at indlæse det, når en besøgende interagerer med et bestemt element. For eksempel en formular. Fordelen ved at bruge denne metode er, at du sandsynligvis aldrig vil indlæse scriptet, hvis det ikke er nødvendigt. Ulempen er, at download-handlingen er ret sen, og vi skal beslutte, hvilke events (mouseover, hover, touchstart osv.) vi vil lytte efter.

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);
  });
}
        

Denne funktion tager tre parametre: scriptUrl er URL'en for det script, der skal injiceres, elementSelector er en CSS-selektor for det element, der skal udløse injektionen, og eventTypes er et array af event-typer, der skal udløse injektionen (f.eks. ["click", "mouseover"]).

Funktionen finder elementet ved hjælp af document.querySelector og tilføjer event listeners til det for hver af de angivne event-typer. Når en af de angivne events opstår, kaldes injectScript-funktionen med den angivne URL, og event listeners fjernes ved hjælp af element.removeEventListener.

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

Dette vil injicere scriptet, når elementet med ID my-element bliver klikket på eller holdt musen over, og derefter fjerne event listeners.

Konklusion

Når scripts ikke er nødvendige med det samme under starten af sideindlæsningen, er det en god idé at indlæse dem on demand! Vi kan gøre dette ved at bruge intersection observer eller ved interaktion. Dette vil frigøre værdifulde ressourcer under de tidlige stadier af sideindlæsningen