Seitsemän kymmenestä PageSpeed Insightsissa hylätyksi tulevasta sivustosta hidastuu kolmannen osapuolen JavaScriptin takia. Ulkoiset skriptit, analytiikat, mainosverkostot, chatit, fontit ja evästebannerit estävät renderöinnin ja työntävät First Contentful Paintia sekunneilla eteenpäin. Etkä voi poistaa niitä: analytiikka ruokkii markkinointia, chatti tuo liidejä, ja ilman evästebanneria sivusto ei läpäise auditointia.

Ratkaisu on olemassa: laiskalataus. Skripti latautuu vasta, kun pääsisältö on jo näytetty käyttäjälle. Selain ei odota, Core Web Vitals -mittarit menevät vihreälle, eikä sivuston toiminnallisuus kärsi.

Kokosimme kaikki toimivat menetelmät sisäänrakennetuista HTML-attribuuteista ohjelmallisiin tekniikoihin ja WordPress-lisäosiin. Mukana koodiesimerkkejä, jotka voit kopioida ja ottaa käyttöön jo tänään.

💡 Pikaopas:

• Ymmärrä defer ja async: taulukko näyttää selkeästi attribuuttien erot
• Hallitse ohjelmallinen lataus load-tapahtumassa: moderni versio Patrick Sextonin menetelmästä
• Ota käyttöön Intersection Observer foldin alapuolisille skripteille: chatit, kartat, kommentit
• Optimoi WordPressiä ilman koodin muokkaamista: Flying Scripts ja Asset CleanUp -lisäosat

Miten kolmannen osapuolen skriptit hidastavat latausta

Selain jäsentää HTML:n ylhäältä alas. Kun se kohtaa <script src="..."> ilman attribuutteja, jäsennys pysähtyy: selain lataa skriptin, suorittaa sen ja vasta sitten jatkaa sivun jäsentämistä. Tämä on renderöinnin estävää.

Käyttäjälle tuloksena on valkoinen ruutu. First Contentful Paint (FCP) -mittari, eli aika ensimmäiseen näytettyyn sisältöön, riippuu suoraan siitä, kuinka nopeasti selain selvisi kaikista estävistä skripteistä. FCP on osa Core Web Vitalsia ja vaikuttaa suoraan hakusijoitukseen.

Kolmannen osapuolen skriptit iskevät kovempaa kuin omasi: ne sijaitsevat ulkoisilla palvelimilla, etkä hallitse niiden toimitusnopeutta tai saatavuutta. DNS-kysely, TCP-kättely, TLS-kättely, lataus, jokainen vaihe lisää kymmeniä tai satoja millisekunteja. HTTP Archiven vuoden 2024 datan mukaan mediaanisivusto mobiililaitteilla lataa 21 ulkoista skriptiä, ja niistä kolme on estäviä.

Ratkaisu on antaa selaimelle selkeä ohje: "lataa skripti taustalla ja suorita se myöhemmin". Juuri tähän defer- ja async-attribuutit on suunniteltu.

Defer ja async: kaksi sisäänrakennettua mekanismia

Molemmat attribuutit kirjoitetaan <script>-tagiin ja ne muuttavat latauskäyttäytymistä. Perustavanlaatuisesti eri tavoin.

Defer: viivästetty suoritus järjestystakuulla

defer-attribuutti kertoo selaimelle: "lataa skripti taustalla, suorita täyden HTML-jäsennyksen jälkeen". Suoritusjärjestys säilyy, skriptit suoritetaan täsmälleen siinä järjestyksessä kuin ne on merkitty koodiin.

1
<script src="https://example.com/analytics.js" defer></script>
2
<script src="https://example.com/chat-widget.js" defer></script>

Ihanteellinen valinta skripteille, joiden on suoritettava tietyssä järjestyksessä: kirjasto, sitten sen lisäosa, sitten alustus. defer takaa, että DOM on valmis suoritushetkellä. DOMContentLoaded-tapahtuma laukeaa kaikkien defer-skriptien jälkeen.

Async: täydellinen riippumattomuus

async lataa skriptin rinnakkain jäsennyksen kanssa ja suorittaa sen välittömästi latauksen jälkeen odottamatta muita. Järjestystä ei taata: se skripti, joka latautui palvelimelta ensin, suoritetaan ensin.

1
<script src="https://example.com/independent-widget.js" async></script>

Sopii täysin itsenäisille skripteille: kävijälaskurit, some-painikkeet, mainosbannerit. Jos skripti ei riipu DOMista eikä muista skripteistä, käytä async-attribuuttia.

Tärkeä vivahde: async-skripti voi suorittaa ennen kuin DOM on rakennettu. Jos se viittaa sivuelementteihin, joita ei vielä ole, saat null-arvon ja virheen konsoliin. Tarkista aina.

Ohjelmallinen lataus load-tapahtumassa: Patrick Sextonin menetelmä

Entä jos skripti ei tue defer/async-attribuutteja tai et hallitse koodia? Esimerkiksi skripti lisätään Google Tag Managerin kautta tai se on kovakoodattu jonkun toisen lisäosaan. Ohjelmallinen menetelmä tulee apuun.

Idea on yksinkertainen: luo <script>-elementti JavaScriptin avulla ja lisää se DOMiin vasta, kun sivu on kokonaan latautunut. Menetelmän kehittäjä Patrick Sexton kuvasi tekniikan ensimmäisen kerran osoitteessa varvy.com.

Tämän koodin moderni versio:

1
function loadScriptOnPageLoad(src) {
2
  const script = document.createElement('script');
3
  script.src = src;
4
  script.async = false;
5
  document.body.appendChild(script);
6
}
7
 
8
window.addEventListener('load', () => {
9
  loadScriptOnPageLoad('/wp-content/plugins/chat/chat.js');
10
  loadScriptOnPageLoad('/wp-content/plugins/analytics/tracker.js');
11
});

Kaksi keskeistä eroa vuosikymmenen takaiseen koodiin. Ensinnäkin: kuuntelemme load-tapahtumaa, emme DOMContentLoaded-tapahtumaa. load-tapahtuma tapahtuu myöhemmin, kun kaikki kuvat, tyylit ja fontit on ladattu. Viivästetty skripti ei taatusti vaikuta FCP- tai LCP-mittareihin. Toiseksi: ei window.attachEvent-kutsua. Tätä menetelmää tarvittiin vain Internet Explorer 8:ssa ja sitä vanhemmissa, joita ei enää ole. Moderni addEventListener toimii kaikissa nykyisissä selaimissa.

Kolme tilannetta, joissa ohjelmallinen lähestymistapa on korvaamaton

defer ja async toimivat vain <script>-tageille, jotka on kirjoitettu suoraan HTML:ään. Ohjelmallinen menetelmä pelastaa, kun:

• Skripti lisätään Google Tag Managerin tai muun taginhallintatyökalun kautta, et näe merkintää.
• Et voi muokata mallipohjaa: kyseessä on jonkun toisen lisäosa tai teema, jolla on jäykkä rakenne.
• Tarvitset ehdollista lataamista: esimerkiksi yhteydenottolomakkeen skripti vain sivuille, joilla on lomake.

Intersection Observer: tarpeen mukaan lataaminen

Joillekin skripteille jopa defer on liian aikaista. Chat-widgettiä ei tarvita ennen kuin käyttäjä vierittää alatunnisteeseen. Karttaa, ennen kuin hän saavuttaa osoitelohkon. Kommentteja, ennen kuin hän lukee keskusteluosioon asti.

Intersection Observer API ratkaisee juuri tämän tehtävän: skripti latautuu vasta, kun kohde-elementti tulee näkyviin viewportissa.

1
const chatTarget = document.getElementById('chat-container');
2
 
3
if (chatTarget) {
4
  const observer = new IntersectionObserver((entries) => {
5
    entries.forEach((entry) => {
6
      if (entry.isIntersecting) {
7
        const script = document.createElement('script');
8
        script.src = '/wp-content/plugins/chat/chat.js';
9
        document.body.appendChild(script);
10
        observer.unobserve(entry.target);
11
      }
12
    });
13
  }, { rootMargin: '200px' });
14
 
15
  observer.observe(chatTarget);
16
}

Parametri rootMargin: '200px' lataa skriptin 200 pikseliä ennen kuin elementti ilmestyy ruudulle, jolloin käyttäjä ei huomaa viivettä. Aiemmin kehittäjät käyttivät vuosia scroll-kuuntelijoita yhdessä getBoundingClientRect()-metodin kanssa, mutta ne laukesivat jokaisella vierityspikselillä ja ylikuormittivat pääsäiettä.

Intersection Observer toimii asynkronisesti eikä juuri kuormita selainta. Tuki on kaikissa nykyaikaisissa selaimissa, mukaan lukien Safari versiosta 12.1 alkaen. IE11 ei ole tuettu, mutta sen osuus kesäkuussa 2026 lähestyy tilastollista virhettä.

WordPress: laiska lataus ilman koodin muokkaamista

Jos sivusto on WordPressissä, voit toteuttaa laiskan latauksen kolmella tavalla, yksinkertaisimmasta joustavimpaan.

Lisäosat skriptien laiskaan lataukseen

Kaksi toimivaa vaihtoehtoa, testattu tuhansilla sivustoilla.

Flying Scripts, Gijo Varghesen ilmainen lisäosa, yli 30 000 aktiivista asennusta, versio 1.2.4 (päivitetty toukokuussa 2026). Voi viivästyttää JavaScriptiä ensimmäiseen käyttäjän vuorovaikutukseen asti: hiiren liike, klikkaus, vieritys, kosketus mobiilissa. Määrität avainsanoja skriptin URL-osoitteesta, ja lisäosa viivästyttää sen suoritusta. Käytössä on aikakatkaisu: jos käyttäjä ei ole vuorovaikutuksessa sivun kanssa, skriptit suoritetaan tietyn ajan kuluttua. Maksimaalinen metriikkahyöty, mutta chat- tai takaisinsoittolomake kannattaa jättää viivästyksen ulkopuolelle, sillä niitä tarvitaan heti.

WP Rocket, maksullinen välimuistilisäosa, jossa on sisäänrakennettu JavaScriptin latauksen viivästystoiminto. Lisää defer- tai async-attribuutin valittuihin skripteihin hallintapaneelin kautta. Määrität URL-osoitteen, ja lisäosa muuttaa attribuuttia sivua renderöidessään. Sopii niille, jotka käyttävät jo WP Rocketia välimuistitukseen eivätkä halua lisätä lisäosien määrää.

Script_loader_tag-koukku functions.php-tiedostossa

Jos et halua asentaa erillistä lisäosaa, WordPress sallii <script>-tagien tulosteen suodattamisen script_loader_tag-koukun kautta. Alla oleva koodi lisää defer-attribuutin kaikkiin skripteihin paitsi jQueryyn ja hallintapaneeliin:

1
add_filter('script_loader_tag', function($tag, $handle) {
2
    if (is_admin()) {
3
        return $tag;
4
    }
5
    $skip = ['jquery', 'jquery-core', 'jquery-migrate'];
6
    if (in_array($handle, $skip, true)) {
7
        return $tag;
8
    }
9
    return str_replace(' src', ' defer src', $tag);
10
}, 10, 2);

Sijoita koodi lapsiteeman functions.php-tiedostoon tai Code Snippets -lisäosan kautta. Tee varmuuskopio ennen käyttöönottoa. defer jQuerylle rikkoo minkä tahansa koodin, joka kutsuu $()- tai jQuery()-funktiota ennen DOMContentLoaded-tapahtumaa. Aloita yksittäisistä skripteistä ja tarkista konsoli virheiden varalta jokaisen muutoksen jälkeen.

Täysi hallinta: Asset CleanUp

Asset CleanUp, ilmainen lisäosa (versio 1.4.0.4, päivitetty toukokuussa 2026), joka näyttää KAIKKI sivulle ladatut skriptit ja tyylit. Koko ja lähde ilmoitetaan. Voit poistaa tietyn skriptin käytöstä tietyllä sivulla, muuttaa latausattribuutin defer- tai async-muotoon tai poistaa tarpeettoman resurssin kokonaan.

Tärkein etu Flying Scriptsiin verrattuna: Asset CleanUp antaa täydellisen kuvan jokaisesta sivusta. Näet, mitä tarkalleen ottaen ladataan, ja teet päätökset tarkasti. Pro-versio lisää ehdollisen latauksen näyttötyypin mukaan ja skriptien siirtämisen HEAD- ja BODY-osioiden välillä. Toimii minkä tahansa välimuistilisäosan, kuten WP Rocketin, W3 Total Cachen tai WP Fastest Cachen, rinnalla.

Syvällisempi katsaus WordPressin nopeuttamiseen on erillisessä artikkelissa: 21 vinkkiä PageSpeed Insights -pisteiden parantamiseen. Jos ongelma ei ole pelkästään skripteissä vaan yleisessä palvelinnopeudessa, tutustu keinoihin lyhentää WordPressin sivun latausaikaa. Ja työkalut WordPressin suorituskyvyn tarkistamiseen auttavat mittaamaan optimoinnin todellisen vaikutuksen.

Video: async ja defer käytännössä

Viiden minuutin kooste xplodivity-kanavalta, jossa on visuaalisia latauskaavioita ja eläviä koodiesimerkkejä:

⁉️🤔 Usein kysytyt kysymykset

defer** vai async, kumpi valita Google Analyticsille?**

async. Analytics.js ja gtag.js ovat täysin riippumattomia DOM:sta, ne eivät tarvitse suoritusjärjestystä. GA4 suosittelee virallisesti async-attribuuttia, kirjasto hoitaa viivästetyn alustuksen itse.

Miten load-tapahtuma eroaa DOMContentLoaded-tapahtumasta?

DOMContentLoaded laukeaa, kun HTML on jäsennetty kokonaan ja DOM-puu on rakennettu, tyylit ja kuvat saattavat vielä latautua. load tapahtuu myöhemmin: kun aivan kaikki on ladattu, mukaan lukien kuvat, fontit ja tyylitiedostot. Laiskaan skriptien lataukseen load on turvallisempi: sivu on tässä vaiheessa varmasti jo näytetty käyttäjälle.

Voiko defer-attribuutin lisätä inline-skriptiin?

Ei. defer-attribuutti toimii vain ulkoisille skripteille, joilla on src-attribuutti. Inline-skripti (<script>code</script>), jossa on defer, ohitetaan, ja selain suorittaa sen normaalina blokkaavana skriptinä. Viivästyttääksesi inline-koodia, kääri se DOMContentLoaded- tai load-kuuntelijaan.

Onko turvallista laittaa defer kaikkiin WordPress-sivuston skripteihin?

jQuery defer-attribuutilla rikkoo minkä tahansa koodin, joka kutsuu $()- tai jQuery()-funktiota ennen DOMContentLoaded-tapahtumaa. Juuri siksi jQuery on jätetty käsittelyn ulkopuolelle yllä olevassa koodinpätkässä. Aloita ei-kriittisistä skripteistä: chat, some, mainokset. Laajenna listaa vähitellen ja tarkista konsoli virheiden varalta jokaisen muutoksen jälkeen.

Intersection Observer vai defer, kumpi on parempi?

Ne ratkaisevat eri tehtäviä. defer on skripteille, joita aina tarvitaan sivulla, mutta jotka eivät ole kriittisiä ensimmäiselle renderöinnille: analytiikka, A/B-testit. Intersection Observer on skripteille, jotka on sidottu tiettyyn lohkoon: kartta, chat footerissa, kommenttivimpain. Yksinkertainen sääntö: skripti sivun yläosassa, defer; skripti alataitoksen alapuolella, Intersection Observer.

Mitä tehdä, jos Flying Scripts rikkoi toiminnallisuuden?

Poista ongelmallinen skripti viivelistalta lisäosan asetuksissa. Flying Scripts sallii avainsanojen määrittämisen sisällyttämistä varten, poista ongelmallisen skriptin avainsana, niin se latautuu normaalisti. Kriittisille elementeille, kuten lomakkeille ja chateille, tämä on pakollinen vaihe ennen viiveen aktivointia.

Mitä sivustolle kannattaa laittaa: päätösmatriisi

Valinta tiivistyy yksinkertaiseen päätöstaulukkoon:

• Skripti on kirjoitettu HTML:ään, hallitset tageja, defer, jos riippuu järjestyksestä, async, jos täysin riippumaton.
• Skripti lisätään GTM:n tai jonkun toisen lisäosan kautta, tagit eivät ole käytettävissä, ohjelmallinen lataus load-tapahtumassa.
• Skripti on sidottu alataitoksen alapuolella olevaan lohkoon, Intersection Observer rootMargin: '200px'-asetuksella.
• WordPress, tarvitset ilman koodia, Flying Scripts (ilmainen, yli 30 000 sivustoa) tai Asset CleanUp täyteen resurssien hallintaan.

Aloita yksinkertaisimmasta: avaa PageSpeed Insights, etsi blokkaavat ulkoiset skriptit ja lisää niihin defer. Yksi attribuutti, ja FCP voi muuttua punaisesta vihreäksi. Ja kun olet hallinnut attribuutit, tutustu arvosteluumme työkaluista WordPressin suorituskyvyn tarkistamiseen, se auttaa mittaamaan todellisen vaikutuksen.