JavaScript-prioriteettien optimointi nopeampaa sivun latausta varten

Opi priorisoimaan skriptit tehokkaasti parantaaksesi Core Web Vitals -tuloksia.

Arjen Karel - linkedin

Last update: 2024-12-12

JavaScript-prioriteettien hallinta paremman verkkosivuston suorituskyvyn saavuttamiseksi

Yksi asia on aina ollut selvä: kaikki JavaScript ei ole samanarvoista. Jotkut skriptit käsittelevät kriittisiä vuorovaikutuksia, kuten 'valikkotoimintoja' tai 'lisää ostoskoriin' -toimintoja, kun taas toiset skriptit ovat paljon vähemmän tärkeitä. Otetaan esimerkiksi 'exit intent' -ponnahdusikkuna, joka kutsuu sivustoltasi poistumassa olevia vierailijoita täyttämään kyselylomakkeen. Olen varma, että voisimme kaikki pärjätä ilman jälkimmäisiä, mutta verkkosivuston navigointi ilman ensimmäisiä olisi todella vaikeaa.

Silti 'tavallisilla verkkosivustoilla' teknisellä tasolla tätä erottelua ei juuri koskaan tehdä. Kaikki JavaScript-tiedostot 'vain lisätään' sivulle ja selaimen annetaan selvittää loput. Tämä on ongelma, koska selaimellasi ei ole aavistustakaan, mikä on tärkeää ja mikä ei. Me kehittäjinä tiedämme. Joten korjataan tämä!

Miten JavaScript-prioriteetti voi vaikuttaa Core Web Vitals -mittareihin

Skriptien lisääminen sivulle ilman asianmukaista harkintaa voi vaikuttaa kaikkiin kolmeen Core Web Vitals -mittariin: Largest Contentful Paint, Interaction to Next Paint ja Cumulative Layout Shift.

javascript lcp impact example

Esimerkki: LCP-verkkoresurssin lataus viivästyy renderöinnin estävien JavaScript-tiedostojen vuoksi

Largest Contentful Paint on altis kaistanleveys- ja prosessorikilpailulle. Kun liian monet skriptit kilpailevat varhaisista verkkoresursseista, se viivästyttää Largest Contentful Paint -verkkoresurssia, ja varhainen prosessorityö viivästyttää LCP:tä estämällä pääsäikeen.

Interaction to Next Paint -mittariin voivat vaikuttaa skriptit, jotka suoritetaan juuri ennen vuorovaikutusta. Kun skriptit suoritetaan, ne estävät pääsäikeen ja viivästyttävät kaikkia vuorovaikutuksia suoritusajan aikana.

Skriptit voivat myös aiheuttaa Cumulative Layout Shift -ongelman, jos skriptit 'muuttavat sivun ulkoasua'. Mainoskriptit, jotka lisäävät bannereita sivulle, sekä liukusäätimet ovat tunnettuja tästä.

5 JavaScript-prioriteettityyppiä

Haluan erottaa viisi eri JavaScript-prioriteettityyppiä. Käydään ne nopeasti läpi ennen kuin syvennymme aiheeseen.

Renderöinnin kannalta kriittiset: nämä skriptit ovat pahimpia mahdollisia. Ne muuttavat sivun asettelua ja ilman näitä skriptejä ulkoasu olisi täysin erilainen. Esimerkki: jotkut liukusäädinskriptit tai A/B-testi.
Kriittiset skriptit: Nämä skriptit käsittelevät kriittisiä sivutoimintoja ja ilman niitä kriittiset tehtävät, kuten tuotteen lisääminen ostoskoriin, sivuhaku tai navigointi, eivät ole mahdollisia.
Tärkeät skriptit: Nämä skriptit käsittelevät tärkeää (liiketoiminta)logiikkaa ja sivustosi on riippuvainen niistä. Esimerkiksi: Analytics
Mukavat lisäominaisuudet: Nämä skriptit ovat mukava lisä, mutta pakottavassa tilanteessa emme varsinaisesti tarvitse niitä sivun toimintaan. Esimerkiksi chat-widget tai exit intent
Tulevaisuuden skriptit: Nämä skriptit voivat olla kriittisiä tai mukavia lisäominaisuuksia, mutta emme tarvitse niitä juuri nyt, koska 'muut vaiheet' on suoritettava ennen kuin voimme käyttää näitä skriptejä. Esimerkiksi monivaiheinen kassaskripti.

Nyt kun meillä on käsitys skriptien prioriteeteista, pureudutaan asiaan!

1. Renderöinnin kannalta kriittiset skriptit

Nämä ovat häiritsevimpiä skriptejä, sillä ne vaikuttavat suoraan sivun näyttämiseen. Ilman niitä asettelu voi rikkoutua tai näyttää huomattavasti erilaiselta kuin oli tarkoitettu. Esimerkkejä ovat liukusäädinskriptit tai A/B-testaustyökalut, jotka muuttavat asettelua latauksen alkuvaiheessa.

Näiden skriptien ongelma on, että niitä ei voi lykätä tai viivästyttää. Mikä tahansa viive saa verkkosivuston asettelun siirtymään aiheuttaen huonon UX:n ja Core Web Vitals -mittareiden epäonnistumisen.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="render-critical.js"></script>
  </head>
  <body></body>
</html>

Parhaat käytännöt:

Vältä tällaisia renderöinnin kannalta kriittisiä skriptejä aina kun mahdollista. Kirjoita koodisi uudelleen välttääksesi riippuvuuden tällaisista skripteistä.
Jos niitä ei voi välttää, upota tai lataa vain ehdottoman välttämättömät osat näistä skripteistä.
Älä käytä defer- tai async-attribuutteja näissä skripteissä ja sijoita ne head-osion alkuun käynnistääksesi 'mahdollisimman aikaisen' latauksen.

2. Kriittiset skriptit

Nämä skriptit mahdollistavat perustavanlaatuiset vuorovaikutukset. Ilman niitä kriittiset tehtävät, kuten sivuston navigointi, tuotteiden lisääminen ostoskoriin, evästeilmoitus tai haun suorittaminen, ovat mahdottomia. Ne ovat välttämättömiä sivuston ydintoiminnallisuudelle.

Nämä skriptit tulisi sijoittaa sivun head-osioon joko async- tai defer-attribuutilla.

<script defer src="critical.js"></script>
<script async src="critical.js"></script>

Parhaat käytännöt:

Pidä tällaiset skriptit minimissä äläkä yhdistä tätä toiminnallisuutta muuhun, vähemmän kriittiseen toiminnallisuuteen.
Lataa nämä skriptit aikaisin käyttämällä async- tai defer-attribuuttia riippuen niiden riippuvuuksista.
Käytä Real User Monitoring (RUM) -työkaluja, kuten CoreDash, tunnistamaan suorituksen pullonkaulat ja varmistamaan, että niiden suorituskyky vastaa käyttäjien tarpeita.

3. Tärkeät skriptit

Vaikka nämä eivät ole suoraan sidoksissa sivuston käytettävyyteen, tärkeät skriptit tukevat keskeisiä liiketoimintafunktioita. Analytics-skriptit tarjoavat esimerkiksi olennaista dataa, mutta niiden ei tarvitse latautua ennen tärkeämpiä visuaalisia elementtejä. Kriittisten ja tärkeiden skriptien välinen ero voi luonnollisesti olla keskustelunaihe, joten muista keskustella kaikkien sidosryhmien kanssa ennen tämän prioriteetin asettamista!

On kolme tapaa alentaa skriptin prioriteettia tämäntyyppisille skripteille.

<html>
<head>
<!-- method 1: low fetchpriority -->
<script fetchpriority="low" defer src="important.js"></script>

<!-- method 2: inject after DOMContentLoaded -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var script = document.createElement('script');
    script.src = 'important.js';
    document.body.appendChild(script);
  });
</script>
</head>
<body>

<!-- method 3: place at the bottom of the page -->
<script defer src="important.js"></script>
</body>
</html>

1. Matala fetchpriority.

Fetchpriorityn asettaminen alentaa skriptin suhteellista prioriteettia. Muut deferred- tai async-skriptit jonottavat todennäköisesti korkealla prioriteetilla, kun taas skriptit, joissa on fetchpriority="low", jonottavat matalalla prioriteetilla. Sivustasi (tai renderöintipolustasi) riippuen tämä voi riittää priorisoimaan muita resursseja, kuten Largest Contentful Paint -kuvan ja tärkeät fontit.

2: Lisäys DOMContentLoaded-tapahtuman jälkeen

Lisäämällä skripti DOMContentLoaded-tapahtuman jälkeen varmistat, että skriptin lataus alkaa heti, kun HTML on täysin jäsennetty. Tämä antaa löydettäville resursseille, kuten kuville ja fonteille, etuoikeuden. Tämä menetelmä tarjoaa tasapainon: skripti alkaa latautua riittävän aikaisin välttääkseen viiveitä toiminnallisuudessa, mutta ei kilpaile varhaisten resurssien kanssa, jotka ovat ratkaisevia sivun alkurenderöinnille.

3: Sijoittaminen sivun loppuun

Tämä klassinen tekniikka lykkää skriptin latausta, kunnes selain on käsitellyt koko dokumentin, ja saavuttaa suunnilleen saman tuloksen kuin edellinen tekniikka. Ainoa ero on, että tekniikka 2 ohittaa selaimen preload-skannerin, kun taas tämä tekniikka ei ohita sitä. Preload-skanneri on kevyt pikaskanneri, jota selaimesi käyttää tunnistamaan ja jonottamaan kriittiset resurssit nopeasti. Preload-skannerin ohittaminen voi olla hyvä idea, jos näkymässä on mahdollisesti laiskasti ladattavia kuvia, kun taas preload-skannerin käyttö nopeuttaa tämän skriptin latausta.

4. Mukavat lisäominaisuusskriptit

Nämä skriptit parantavat user experience -kokemusta, mutta eivät ole välttämättömiä sivuston toiminnalle. Esimerkkejä ovat chat-widgetit, asiakaspalauteponnahdusikkunat tai valinnaiset animaatiot. Vaikka ne ovat hyödyllisiä, ne eivät saisi häiritä ensisijaista user experience -kokemusta.

Nämä skriptit ovat ihanteellinen kohde latauskuviolle nimeltä 'lazy on load'. Tämä tarkoittaa, että odotetaan sivun load-tapahtumaa ja sitten joutoaikana lisätään skripti. Load-tapahtuman odottaminen varmistaa, ettei skripti kilpaile kaistanleveydestä ja prosessoritehosta tärkeämpien varhaisten resurssien kanssa. Joutohetken odottaminen varmistaa, ettei selain käsittele tärkeämpiä tehtäviä, kuten käyttäjän syötettä.

Tässä toimiva esimerkki:

window.addEventListener("load", () => {
  window.requestIdleCallback(() => {
    const script = document.createElement("script");
    script.src = "/path/to/script.js";
    document.head.appendChild(script);
  });
});

Parhaat käytännöt:

Lataa nämä skriptit laiskasti sivun latautumisen jälkeen ja odota joutohetkeä.
Ymmärrä, että tällä kuviolla ladattujen skriptien nopea lataus ei ole taattua

5. Tulevaisuuden skriptit

Tulevaisuuden skriptit ovat sellaisia, joita ei tarvita ennen kuin tietyt ehdot täyttyvät. Esimerkiksi monivaiheinen kassaskripti tulee ajankohtaiseksi vasta, kun käyttäjä on lisännyt tuotteita ostoskoriinsa. Nämä skriptit voivat usein odottaa paljon myöhempään käyttäjän matkalla.

Katso tätä esimerkkiä. Se käyttää intersection observeria lataamaan rekisteröitymisskriptin vaatiman JavaScript-logiikan vasta, kun lomake on näkyvässä näkymässä.

<!DOCTYPE html>
<html>
  <head>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const form = document.querySelector("form");
        const observer = new IntersectionObserver(function (entries) {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const script = document.createElement("script");
              script.src = "/sign-up.js";
              document.head.appendChild(script);
              observer.unobserve(form);
            }
          });
        });
        observer.observe(form);
      });
    </script>
  </head>
  <body>
    <form action="/sign-up" method="post">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required />
      <button type="submit">Sign Up</button>
    </form>
  </body>
</html>

Parhaat käytännöt:

Lataa nämä skriptit tarpeen mukaan, käyttäjän toimintojen käynnistäminä.
Käytä koodin jakamistekniikoita toimittaaksesi vain kussakin vaiheessa tarvittavat osat.
Lisää ne dynaamisesti vasta tarvittaessa, esimerkiksi kun käyttäjä selaa tiettyyn osioon.

Compare your segments.

Is iOS slower than Android? Is the checkout route failing INP? Filter by device, route, and connection type.

Analyze Segments >>

Device filtering
Route Analysis
Connection Types

JavaScript-prioriteettien optimointi nopeampaa sivun latausta varten

Core Web Vitals JavaScript-prioriteettien optimointi nopeampaa sivun latausta varten