Verzögern Sie Skripte, bis sie benötigt werden

Verzögern Sie Skripte, bis sie benötigt werden

In diesem Artikel werde ich ein cooles Muster zeigen und erklären, um Skripte, die während des Starts des Seitenladens nicht benötigt werden, zu einem späteren Zeitpunkt zu laden, kurz bevor sie benötigt werden.

Das absolut effektivste, was Sie mit JavaScript tun können, wenn es um die Core Web Vitals geht, ist das Laden einer Ressource zu verzögern, bis sie benötigt wird. Dies entfernt ungenutztes und unnötiges JavaScript von der Seite und lädt es nur, wenn es benötigt wird. Dies behebt die Lighthouse-Warnung 'reduce unused JavaScript' und verbessert auch Responsivitätsmetriken wie den Interaction to Next Paint (INP).
Wir machen das schon lange mit Bildern. Es heißt Lazy Loading. Beim Lazy Loading wird ein Below-the-fold-Bild geladen, kurz bevor es in den Sichtbereich scrollt. Auf diese Weise müssen wir das Bild nicht sofort während des Seitenladens laden und der Browser kann seine kostbaren Ressourcen für das Herunterladen, Parsen und Malen von Dingen verwenden, die tatsächlich benötigt werden.

Stellen Sie sich nun vor, wir könnten dasselbe mit Skripten anstelle von Bildern tun. Nun, es stellt sich heraus, dass wir das können! Leider ist es nicht so einfach wie das Hinzufügen von loading="lazy" zu einem Bild, aber mit ein wenig Aufwand können wir es zum Laufen bringen

Schritt 1: Skripte bei Bedarf laden

Um Skripte nach dem Laden der Seite zur Seite hinzuzufügen, benötigen wir ein kleines Skript, das dies für uns erledigt.

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

Diese Funktion injiziert ein Skript in die aktuelle Webseite, indem sie ein neues Skriptelement erstellt und es an den Kopf des Dokuments anhängt. Der Parameter scriptUrl gibt die URL des zu injizierenden Skripts an. Der Parameter callback ist eine optionale Funktion, die aufgerufen wird, wenn das Skript fertig geladen ist. Wenn das Skript fertig geladen ist, wird das onload-Ereignis des Skriptelements ausgelöst. Wenn eine Callback-Funktion angegeben wurde, wird sie an diesem Punkt aufgerufen.

Schritt 2: Skripte bei Bedarf laden

Der nächste Schritt ist das Laden von Skripten bei Bedarf. Es gibt 2 gängige Methoden, dies zu tun. Die erste ist die zuverlässigere 'wenn ein Teil der Seite sichtbar ist' und die zweite ist die schnellere 'bei Interaktion'.

2a: Intersection Observer

Die erste Methode, ein Skript kurz bevor es benötigt wird zu laden, nutzt den Intersection Observer. Der Intersection Observer ist eine zuverlässige Methode, die 'feuert', wenn ein Element den sichtbaren Teil des Bildschirms schneidet. Wir können dieses Verhalten nutzen, um einen Skript-Download nur dann auszulösen, wenn ein Element sichtbar ist. Der Nachteil dieser Methode ist, dass, obwohl ein Element 'auf dem Bildschirm' ist, es möglicherweise immer noch nicht verwendet wird.

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

Diese Funktion nimmt zwei Parameter: scriptUrl ist die URL des zu injizierenden Skripts und elementSelector ist ein CSS-Selektor für das Element, das die Injektion auslösen soll.

Die Funktion erstellt ein neues IntersectionObserver-Objekt und übergibt ihm eine Callback-Funktion, die aufgerufen wird, wann immer ein beobachtetes Element den Viewport schneidet. Die Callback-Funktion prüft, ob das Element schneidet, und wenn ja, injiziert sie das Skript und hört auf, das Element zu beobachten.

Beachten Sie, dass die Intersection Observer API nicht in allen Browsern unterstützt wird, daher müssen Sie möglicherweise ein Polyfill verwenden, wenn Sie ältere Browser unterstützen müssen.

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

Dies wird das Skript injizieren, wenn das Element mit der ID my-element im Viewport sichtbar wird.

2b: Bei Interaktion

Die effektivste Methode, JavaScript bei Bedarf zu laden, besteht darin, es zu laden, wenn ein Besucher mit einem bestimmten Element interagiert. Zum Beispiel ein Formular. Der Vorteil dieser Methode ist, dass Sie das Skript wahrscheinlich nie laden werden, wenn es nicht benötigt wird. Der Nachteil ist, dass die Download-Aktion ziemlich spät erfolgt und wir entscheiden müssen, auf welche Ereignisse (mouseover, hover, touchstart usw. usw.) wir hören wollen.

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

Diese Funktion nimmt drei Parameter: scriptUrl ist die URL des zu injizierenden Skripts, elementSelector ist ein CSS-Selektor für das Element, das die Injektion auslösen soll, und eventTypes ist ein Array von Ereignistypen, die die Injektion auslösen sollen (z. B. ["click", "mouseover"]).

Die Funktion findet das Element mit document.querySelector und fügt ihm Event Listener für jeden der angegebenen Ereignistypen hinzu. Wenn eines der angegebenen Ereignisse eintritt, wird die injectScript-Funktion mit der angegebenen URL aufgerufen und die Event Listener werden mit element.removeEventListener entfernt.

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

Dies wird das Skript injizieren, wenn auf das Element mit der ID my-element geklickt oder darüber gefahren wird, und dann die Event Listener entfernen.

Fazit

Wenn Skripte nicht sofort während des Starts des Seitenladens benötigt werden, ist es eine großartige Idee, sie bei Bedarf zu laden! Wir können dies tun, indem wir den Intersection Observer oder Interaktion verwenden. Dies macht wertvolle Ressourcen in den frühen Phasen des Seitenladens frei