Stel scripts uit totdat ze nodig zijn

Stel scripts uit totdat ze nodig zijn

In dit artikel zal ik een cool patroon laten zien en uitleggen om scripts die niet nodig zijn tijdens de start van het laden van de pagina op een later tijdstip te laden, net voordat ze nodig zijn.

Het absoluut meest effectieve wat u met JavaScript kunt doen als het gaat om de Core Web Vitals is om het laden van een bron uit te stellen totdat deze nodig is. Dit verwijdert ongebruikte en onnodige JavaScript van de pagina en laadt deze alleen wanneer deze nodig is. Dit lost de lighthouse waarschuwing 'reduce unused JavaScript' op en verbetert ook responsiviteitsstatistieken zoals de interaction to Next Paint (INP).
We doen dit al heel lang met afbeeldingen. Het heet lazy loading. Met lazy loading wordt een below-the-fold afbeelding geladen net voordat deze in beeld schuift. Op deze manier hoeven we de afbeelding niet onmiddellijk tijdens het laden van de pagina te laden en kan de browser zijn kostbare bronnen besteden aan het downloaden, parsen en painten van dingen die daadwerkelijk nodig zijn.

Stel u nu voor dat we hetzelfde zouden kunnen doen met Scripts in plaats van afbeeldingen. Nou, het blijkt dat we dat kunnen! Helaas is het niet zo eenvoudig als het toevoegen van loading="lazy" aan een afbeelding, maar met een beetje moeite kunnen we het laten werken

Stap 1: Laad scripts op aanvraag

Om scripts aan de pagina toe te voegen na het laden van de pagina hebben we een klein script nodig dat dit voor ons doet.

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

Deze functie injecteert een script in de huidige webpagina door een nieuw scriptelement te maken en dit toe te voegen aan de head van het document. De parameter scriptUrl specificeert de URL van het script dat moet worden geïnjecteerd. De parameter callback is een optionele functie die wordt aangeroepen wanneer het script klaar is met laden. Wanneer het script klaar is met laden, wordt het onload event van het scriptelement geactiveerd. Als er een callbackfunctie is opgegeven, wordt deze op dit punt aangeroepen.

Stap 2: Laad scripts op aanvraag

De volgende stap is om scripts op aanvraag te laden. Er zijn 2 veelgebruikte methoden om dit te doen. De eerste is de betrouwbaardere 'wanneer een deel van de pagina zichtbaar is' en de tweede is de snellere 'op interactie'.

2a: Intersection observer

De eerste methode om een script te laden net voordat het nodig is, maakt gebruik van de intersection observer. De intersection observer is een betrouwbare methode die 'vuurt' wanneer een element intersecteert met het zichtbare deel van het scherm. We kunnen dit gedrag gebruiken om een scriptdownload alleen te activeren wanneer een element zichtbaar is. Het nadeel van deze methode is dat ook al is een element 'op het scherm', het misschien nog steeds niet wordt gebruikt.

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

Deze functie neemt twee parameters: scriptUrl is de URL van het script dat moet worden geïnjecteerd, en elementSelector is een CSS-selector voor het element dat de injectie moet activeren.

De functie maakt een nieuw IntersectionObserver-object en geeft dit een callbackfunctie die wordt aangeroepen telkens wanneer een geobserveerd element intersecteert met de viewport. De callbackfunctie controleert of het element intersecteert en zo ja, injecteert het script en stopt met het observeren van het element.

Merk op dat de Intersection Observer API niet in alle browsers wordt ondersteund, dus u moet mogelijk een polyfill gebruiken als u oudere browsers moet ondersteunen.

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

Dit zal het script injecteren wanneer het element met ID my-element zichtbaar wordt in de viewport.

2b: Op interactie

De meest effectieve methode om JavaScript op aanvraag te laden is om het te laden wanneer een bezoeker interageert met een bepaald element. Bijvoorbeeld een formulier. Het voordeel van deze methode is dat u het script waarschijnlijk nooit zult laden als het niet nodig is. Het nadeel is dat de downloadactie vrij laat is en we moeten beslissen naar welke events (mousover, hover, touchstart enz enz) we willen luisteren.

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

Deze functie neemt drie parameters: scriptUrl is de URL van het script dat moet worden geïnjecteerd, elementSelector is een CSS-selector voor het element dat de injectie moet activeren, en eventTypes is een array van eventtypes die de injectie moeten activeren (bijv. ["click", "mouseover"]).

De functie vindt het element met document.querySelector en voegt er event listeners aan toe voor elk van de opgegeven eventtypes. Wanneer een van de opgegeven events plaatsvindt, wordt de injectScript-functie aangeroepen met de opgegeven URL, en worden de event listeners verwijderd met element.removeEventListener.

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

Dit zal het script injecteren wanneer op het element met ID my-element wordt geklikt of erover wordt gehoverd, en vervolgens de event listeners verwijderen.

Conclusie

Wanneer scripts niet meteen nodig zijn tijdens de start van het laden van de pagina is het een geweldig idee om ze op aanvraag te laden! We kunnen dit doen door de intersection observer of op interactie te gebruiken. Dit maakt waardevolle bronnen vrij tijdens de vroege stadia van het laden van de pagina