Lykkää skriptien lataamista kunnes niitä tarvitaan

Lykkää skriptien lataamista kunnes niitä tarvitaan

Tässä artikkelissa näytän ja selitän hyödyllisen mallin, jolla ladataan skriptejä, joita ei tarvita sivun latauksen alussa, myöhempänä ajankohtana, juuri ennen kuin niitä tarvitaan.

Ehdottomasti tehokkain asia, jonka voit tehdä JavaScript-koodilla Core Web Vitals -tulosten parantamiseksi, on viivästyttää resurssin lataamista kunnes sitä tarvitaan. Tämä poistaa käyttämättömän ja tarpeettoman JavaScript-koodin sivulta ja lataa sen vasta kun sitä tarvitaan. Tämä korjaa Lighthouse-varoituksen 'reduce unused JavaScript' ja parantaa myös reagointikykyä mittaavia mittareita, kuten Interaction to Next Paint (INP).
Olemme tehneet tätä kuvien kanssa jo pitkään. Sitä kutsutaan lazy loading -tekniikaksi. Lazy loading -tekniikalla näkymän alapuolella oleva kuva ladataan juuri ennen kuin se tulee näkyviin vieritettäessä. Tällä tavoin meidän ei tarvitse ladata kuvaa heti sivun latauksen aikana, ja selain voi käyttää arvokkaat resurssinsa sellaisten asioiden lataamiseen, jäsentämiseen ja renderöintiin, joita todella tarvitaan.

Kuvittele nyt, että voisimme tehdä saman asian skripteillä kuvien sijaan. Ja osoittautuu, että voimme! Valitettavasti se ei ole yhtä yksinkertaista kuin loading="lazy" lisääminen kuvaan, mutta pienellä vaivalla saamme sen toimimaan

Vaihe 1: Lataa skriptit tarpeen mukaan

Jotta voimme lisätä skriptejä sivulle sivun latauksen jälkeen, tarvitsemme pienen skriptin, joka tekee tämän puolestamme.

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

Tämä funktio lisää skriptin nykyiselle verkkosivulle luomalla uuden script-elementin ja liittämällä sen dokumentin head-osaan. scriptUrl-parametri määrittää lisättävän skriptin URL-osoitteen. callback-parametri on valinnainen funktio, joka kutsutaan, kun skripti on latautunut. Kun skripti on latautunut, script-elementin onload-tapahtuma käynnistyy. Jos callback-funktio on annettu, se kutsutaan tässä vaiheessa.

Vaihe 2: Lataa skriptit tarpeen mukaan

Seuraava vaihe on ladata skriptit tarpeen mukaan. Tähän on 2 yleistä menetelmää. Ensimmäinen on luotettavampi 'kun osa sivusta on näkyvissä' ja toinen on nopeampi 'vuorovaikutuksen yhteydessä'.

2a: Intersection observer

Ensimmäinen menetelmä skriptin lataamiseksi juuri ennen kuin sitä tarvitaan hyödyntää intersection observeria. Intersection observer on luotettava menetelmä, joka 'laukeaa', kun elementti leikkaa näytön näkyvän osan kanssa. Voimme käyttää tätä käyttäytymistä käynnistämään skriptin latauksen vasta kun elementti on näkyvissä. Tämän menetelmän haittapuoli on, että vaikka elementti on 'näytöllä', sitä ei välttämättä silti käytetä.

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

Tämä funktio ottaa kaksi parametria: scriptUrl on lisättävän skriptin URL-osoite ja elementSelector on CSS-valitsin elementille, jonka pitäisi käynnistää lisäys.

Funktio luo uuden IntersectionObserver-olion ja välittää sille callback-funktion, joka kutsutaan aina kun tarkkailtava elementti leikkaa näkymäalueen kanssa. Callback-funktio tarkistaa, onko elementti leikkaava, ja jos on, lisää skriptin ja lopettaa elementin tarkkailun.

Huomaa, että Intersection Observer API:a ei tueta kaikissa selaimissa, joten saatat tarvita polyfilliä, jos sinun täytyy tukea vanhempia selaimia.

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

Tämä lisää skriptin, kun elementti, jonka ID on my-element, tulee näkyviin näkymäalueella.

2b: Vuorovaikutuksen yhteydessä

Tehokkain menetelmä JavaScript-koodin lataamiseen tarpeen mukaan on ladata se, kun vierailija on vuorovaikutuksessa tietyn elementin kanssa. Esimerkiksi lomakkeen. Tämän menetelmän etu on, että et todennäköisesti koskaan lataa skriptiä, jos sitä ei tarvita. Haittapuolena on, että lataustoiminto tapahtuu melko myöhään ja meidän täytyy päättää, mitä tapahtumia (mouseover, hover, touchstart jne.) haluamme kuunnella.

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

Tämä funktio ottaa kolme parametria: scriptUrl on lisättävän skriptin URL-osoite, elementSelector on CSS-valitsin elementille, jonka pitäisi käynnistää lisäys, ja eventTypes on taulukko tapahtumatyypeistä, joiden pitäisi käynnistää lisäys (esim. ["click", "mouseover"]).

Funktio etsii elementin käyttämällä document.querySelector-metodia ja lisää siihen tapahtumakuuntelijat jokaiselle määritetylle tapahtumatyypille. Kun jokin määritetyistä tapahtumista tapahtuu, injectScript-funktio kutsutaan määritetyllä URL-osoitteella ja tapahtumakuuntelijat poistetaan käyttämällä element.removeEventListener-metodia.

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

Tämä lisää skriptin, kun elementtiä, jonka ID on my-element, klikataan tai sen päälle viedään hiiri, ja poistaa sen jälkeen tapahtumakuuntelijat.

Yhteenveto

Kun skriptejä ei tarvita heti sivun latauksen alussa, on erinomainen idea ladata ne tarpeen mukaan! Voimme tehdä tämän käyttämällä intersection observeria tai vuorovaikutuksen yhteydessä. Tämä vapauttaa arvokkaita resursseja sivun latauksen alkuvaiheissa