Defer vs Async JavaScript ja miten tämä vaikuttaa Core Web Vitals -mittareihin

Opi milloin JavaScript kannattaa ladata async-attribuutilla ja milloin defer-attribuutilla parhaiden Core Web Vitals -tulosten saavuttamiseksi

Arjen Karel - linkedin

Last update: 2024-11-27

Defer vs Async JavaScript ja miten tämä vaikuttaa Core Web Vitals -mittareihin

Tässä artikkelissa näytän eron defer- ja async JavaScript -tekniikoiden välillä ja miksi tämä vaikuttaa Core Web Vitals -mittareihin

Aina kun auditoin asiakkaan Core Web Vitals -mittareita, huomaan usein, että sivulla ei juurikaan tehdä eroa jäsentimen estävien (sync), asynkronisten tai lykättyjen JavaScript-tiedostojen välillä. Tämä on harmillista, koska eri skripteillä on erilaiset optimaaliset ajoitukset.

Table of Contents!

Lyhyesti:
1. Synkroninen JavaScript (Sync):
2. Asynkroninen JavaScript (Async):
3. Lykätty JavaScript:
Miten async ja defer parantavat sivun nopeutta?
Parhaat käytännöt:
Vielä askel pidemmälle: lataa skriptit tarpeen mukaan

Lyhyesti:

'Normaali' JavaScript sivun head-osiossa suoritetaan ennen HTML:n jäsentämisen alkamista, async-skriptit eivät estä jäsentämisen alkamista, mutta ne suoritetaan heti kun ne on ladattu. Lykätyt skriptit suoritetaan sen jälkeen, kun sivu on jäsennetty.

Yleisesti ottaen async-attribuutti on hyvä valinta skripteille, jotka eivät tarvitse vuorovaikutusta DOM:n kanssa, kuten skriptit jotka lataavat kuvia tai videoita. Defer-attribuutti on hyvä valinta skripteille, jotka tarvitsevat vuorovaikutusta DOM:n kanssa, kuten skriptit jotka alustavat widgettejä tai lisäävät tapahtumakuuntelijoita. Jätä molemmat pois, jos skriptisi tekee suuria muutoksia näkyvään näkymään.

1. Synkroninen JavaScript (Sync):

Oletuksena sivun head-osiossa olevat JavaScript-tiedostot ovat synkronisia skriptejä. Kun JavaScript-koodi suoritetaan synkronisesti, se estää välittömästi selaimen pääsäikeen, kunnes skripti on suoritettu kokonaan. Tämä tarkoittaa, että selaimen täytyy odottaa JavaScript-koodin valmistumista ennen kuin se voi jatkaa muita tehtäviä, kuten DOM:n renderöintiä. Tämän seurauksena synkroninen JavaScript voi vaikuttaa merkittävästi sivun nopeuteen ja responsiivisuuteen, erityisesti suurempien ja monimutkaisten skriptien kohdalla. Kun sivu sisältää synkronista JavaScript-koodia, selain ei voi ladata muita resursseja tai renderöidä sivua ennen kuin JavaScript on suoritettu, mikä voi johtaa viiveisiin sivun latauksessa.

<!DOCTYPE html>
<html>
<head>
  <title>Sync JavaScript Example</title>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
</head>
<body>
  <!-- Page content here -->
</body>
</html>

2. Asynkroninen JavaScript (Async):

Asynkroninen JavaScript mahdollistaa sen, että selain voi jatkaa muiden tehtävien suorittamista samalla kun skripti ladataan taustalla. Käyttämällä async-attribuuttia <script>-tagissa kehittäjät osoittavat, että skripti ei ole riippuvainen DOM:sta ja se voidaan suorittaa itsenäisesti. Selain ei odota async-skriptin latautumista ennen kuin se jatkaa sivun renderöintiä. Tämän seurauksena async-skriptit voivat parantaa sivun nopeutta, erityisesti hitaammilla yhteyksillä, koska ne eivät estä kriittistä renderöintipolkua.

<!DOCTYPE html>
<html>
<head>
  <title>Async JavaScript Example</title>
  <script src="script1.js" async></script>
  <script src="script2.js" async></script>
</head>
<body>
  <!-- Page content here -->
</body>
</html>

On tärkeää huomata, että async-skriptit voivat käynnistyä ennakoimattomassa järjestyksessä, koska ne suoritetaan heti kun ne ovat saatavilla riippumatta niiden järjestyksestä HTML-dokumentissa. Jos skriptit ovat riippuvaisia toisistaan, async-attribuutin käyttö voi aiheuttaa riippuvuusvirheitä.

3. Lykätty JavaScript:

Lykätty JavaScript, joka merkitään defer-attribuutilla <script>-tagissa, mahdollistaa skriptien lataamisen taustalla samalla kun selain jatkaa HTML-dokumentin jäsentämistä. Kuten async, lykätyt skriptit eivät estä kriittistä renderöintipolkua, mikä johtaa nopeampaan sivun lataukseen. Keskeinen ero on kuitenkin se, että lykätyt skriptit säilyttävät suoritusjärjestyksensä ja suoritetaan siinä järjestyksessä kuin ne esiintyvät HTML-dokumentissa. Lykätyt skriptit suoritetaan sen jälkeen, kun DOM on täysin jäsennetty ja juuri ennen DOMContentLoaded-tapahtuman laukaisemista.

<!DOCTYPE html>
<html>
<head>
  <title>Defer JavaScript Example</title>
  <script src="script1.js" defer></script>
  <script src="script2.js" defer></script>
</head>
<body>
  <!-- Page content here -->
</body>
</html>

Defer-attribuutin käyttö on hyödyllistä skripteille, jotka ovat riippuvaisia DOM:sta ja joiden täytyy suorittaa tietyssä järjestyksessä, koska se varmistaa, että tarvittavat DOM-elementit ovat käytettävissä skriptin suoritushetkellä. Tämä voi olla edullista skripteille, jotka tekevät DOM-manipulointia tai ovat riippuvaisia muista skripteistä.

Attribuutti	Milloin skripti ladataan	Milloin skripti suoritetaan
`none`	Taustalla	Ennen DOM:n rakentamista
`async`	Taustalla	Välittömästi latauksen jälkeen
`defer`	Taustalla	Kun muu sivu on jäsennetty, siinä järjestyksessä kuin se esiintyy HTML:ssä

Miten async ja defer parantavat sivun nopeutta?

Synkroninen JavaScript (Sync) voi hidastaa merkittävästi sivun latautumista ja tehdä verkkosivustosta vähemmän responsiivisen, erityisesti jos skriptit ovat suuria tai niiden suorittaminen kestää kauan.

Asynkroninen JavaScript (Async) voi parantaa sivun nopeutta mahdollistamalla itsenäisten skriptien lataamisen rinnakkain muiden resurssien kanssa. On kuitenkin huolehdittava riippuvuuksien oikeasta hallinnasta odottamattoman toiminnan välttämiseksi.

Lykätty JavaScript voi myös parantaa sivun nopeutta, koska se ei estä kriittistä renderöintipolkua. Se varmistaa, että DOM on valmis ennen kuin siitä riippuvaiset skriptit suoritetaan, mikä johtaa ennustettavampaan ja hallitumpaan suoritusjärjestykseen.

Parhaat käytännöt:

Käytä asynkronista (async) itsenäisille skripteille, jotka eivät ole riippuvaisia DOM:sta ja jotka voidaan suorittaa missä tahansa järjestyksessä.
Käytä lykättyä (defer) skripteille, jotka ovat riippuvaisia DOM:sta ja joiden täytyy suorittaa tietyssä järjestyksessä, erityisesti DOM-manipuloinnin yhteydessä.
Vältä synkronisen JavaScript-koodin käyttöä aina kun mahdollista, koska se vaikuttaa negatiivisesti sivun nopeuteen ja user experience -kokemukseen.

Käyttämällä sopivaa lataustekniikkaa JavaScript-tiedostoille voit optimoida sivun nopeuden, parantaa user experience -kokemusta ja varmistaa sujuvammat vuorovaikutukset verkkosivustoillasi. Synkronisen, asynkronisen ja lykätyn latauksen erojen ja niiden vaikutusten ymmärtäminen sivun lataukseen on olennaista suorituskykyisten verkkosovellusten rakentamisessa.

Huomioithan, että sync-, async- tai defer-attribuuttien käytön tehokkuus voi vaihdella verkkosivuston erityisen kontekstin ja sisällön mukaan. Säännöllinen testaus ja suorituskykyanalyysi ovat ratkaisevan tärkeitä sivun latausstrategian hienosäätöön ja optimaalisten tulosten varmistamiseen eri skenaarioissa.

Vielä askel pidemmälle: lataa skriptit tarpeen mukaan

Async ja defer voivat nopeuttaa sivua estämättä jäsentäjää, mutta on tärkeää huomata, että 'skriptien lykkääminen' ei ratkaise kaikkia ongelmiasi. Esimerkiksi Largest Contentful Paint -elementti on altis verkon ja suorittimen kilpailulle, jota lykätyt ja async-skriptit aiheuttavat. Myös Interaction to Next Paint -mittariin vaikuttavat skriptit, jotka suoritetaan aikaisin sivun latauksen aikana. Siksi sinun kannattaa aina kun mahdollista ladata skriptit tarpeen mukaan, jotta voit paremmin hallita niiden vaikutusta sivun suorituskykyyn. Kiinnostaako? Lue miten me lataamme skriptit tarpeen mukaan