Mikä on “Async”?

Async eli asynkroninen lataus tarkoittaa verkkosivuston yhteydessä tapaa ladata resursseja, kuten JavaScript-tiedostoja, siten että ne eivät estä sivun muun sisällön renderöintiä. Käytännössä async-attribuutti lisätään HTML:ssä script-tagiin näin:

<script src="skripti.js" async></script>

Normaalisti selain lataa HTML-sivua ylhäältä alas ja pysähtyy aina, kun se kohtaa script-tagin. Tämä hidastaa sivun renderöintiä, koska skripti täytyy ladata ja suorittaa ennen kuin selain jatkaa eteenpäin. Async-attribuutti ratkaisee tämän ongelman lataamalla skriptin taustalla samanaikaisesti muun sisällön kanssa, jolloin sivun renderöinti ei katkea.

Async eroaa toisesta vastaavasta attribuutista, deferistä, siten että async-skripti suoritetaan heti latauksen jälkeen, kun taas defer odottaa koko HTML-dokumentin jäsentymistä ennen suoritusta.

Sivun latausnopeus on yksi Googlen rankingfaktoreista, ja Core Web Vitals -mittarit, erityisesti LCP (Largest Contentful Paint) ja FID (First Input Delay), ovat suoraan yhteydessä siihen, miten nopeasti sivu renderöityy käyttäjälle. Renderöintiä estävät JavaScript-tiedostot ovat yksi yleisimmistä sivustonopeuden pullonkauloista, ja async on yksi suoraviivaisimmista tavoista ratkaista tämä ongelma.

Google PageSpeed Insights ja Lighthouse nostavat renderöintiä estävät resurssit usein esiin kehityskohteena. Lisäämällä async tai defer kolmannen osapuolen skripteihin, kuten analytiikkatyökaluihin tai chat-widgetteihin, voidaan parantaa sivun latausaikaa merkittävästi.

• Kolmannen osapuolen skripteissä, kuten Google Analytics, Meta Pixel tai chat-widgetit
• Skripteissä, jotka eivät ole riippuvaisia muista skripteistä tai DOM-rakenteesta
• Tilanteissa, joissa skriptin suoritusjärjestyksellä ei ole merkitystä

Async on HTML-attribuutti, joka mahdollistaa JavaScript-tiedostojen lataamisen ilman että se estää sivun renderöintiä. SEO:n kannalta se on tärkeä työkalu sivustonopeuden parantamisessa ja Core Web Vitals -tulosten optimoinnissa.