Seitse kümnest PageSpeed Insights testis läbi kukkuvast saidist aeglustuvad kolmanda osapoole JavaScript tõttu. Välised skriptid, analüütika, reklaamivõrgustikud, vestlused, fondid, küpsisebännerid blokeerivad renderdamise ja lükkavad esimese sisulise renderduse sekundite võrra edasi. Ja te ei saa neid keelata: analüütika toidab turundust, vestlus toob müügivihjeid, ilma küpsisebännerita ei läbi sait auditit.

Lahendus on olemas: laisklaadimine. Skript laaditakse alles siis, kui põhisisu on kasutajale juba kuvatud. Brauser ei oota, Core Web Vitalsi mõõdikud lähevad rohelisse tsooni ja saidi funktsionaalsus ei kannata.

Oleme kogunud kokku kõik toimivad meetodid, alates sisseehitatud HTML-atribuutidest kuni programmeeritud tehnikate ja WordPressi pluginateni. Koos koodinäidetega, mida saate kohe kopeerida ja rakendada.

💡 Kiire ülevaade:

• Saage aru defer ja async atribuutidest: tabel näitab selgelt atribuutide erinevust
• Valdage programmeeritud laadimine load sündmusel: Patrick Sextoni meetodi kaasaegne versioon
• Seadistage Intersection Observer allpool murdejoont asuvate skriptide jaoks: vestlused, kaardid, kommentaarid
• Optimeerige WordPressi ilma koodi muutmata: Flying Scripts ja Asset CleanUp pluginad

Kuidas kolmanda osapoole skriptid laadimist aeglustavad

Brauser parsub HTML-i ülevalt alla. Kui ta kohtab <script src="..."> ilma atribuutideta, siis parsimine peatub: brauser laadib skripti, käivitab selle ja alles seejärel jätkab lehe parsimist. See on renderdamist blokeeriv.

Kasutaja jaoks on tulemuseks valge ekraan. Esimese sisulise renderduse (FCP) mõõdik, aeg kuni esimese sisu kuvamiseni, sõltub otseselt sellest, kui kiiresti brauser kõik blokeerivad skriptid läbi töötas. FCP on osa Core Web Vitalsist ja mõjutab otseselt otsingurankingut.

Kolmanda osapoole skriptid mõjuvad rängemalt kui teie enda omad: need asuvad välistes serverites ja te ei kontrolli nende edastuskiirust ega käideldavust. DNS-päring, TCP-kätlus, TLS-kätlus, allalaadimine, iga etapp lisab kümneid või sadu millisekundeid. HTTP Archive 2024. aasta andmete kohaselt laadib keskmine mobiilisait 21 välist skripti ja neist kolm on blokeerivad.

Lahendus on anda brauserile selge juhis: „laadi skript taustal ja käivita see hiljem". Just selleks ongi defer ja async atribuudid mõeldud.

Defer ja async: kaks sisseehitatud mehhanismi

Mõlemad atribuudid kirjutatakse <script> sildi sisse ja muudavad laadimiskäitumist. Põhimõtteliselt erineval viisil.

Defer: viivitatud käivitamine järjekorra garantiiga

defer atribuut ütleb brauserile: „laadi skript taustal, käivita pärast täielikku HTML-i parsimist". Käivitamise järjekord säilib, skriptid käivituvad täpselt selles järjestuses, nagu need on märgendis määratud.

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

Ideaalne valik skriptidele, mis peavad käivituma kindlas järjekorras: teek, seejärel selle plugin, seejärel initsialiseerimine. defer garanteerib, et DOM on käivitamise ajaks valmis. DOMContentLoaded sündmus käivitub pärast kõiki defer skripte.

Async: täielik sõltumatus

async laadib skripti paralleelselt parsimisega ja käivitab selle kohe pärast laadimist, teisi ootamata. Järjekord ei ole garanteeritud: see skript, mis serverist esimesena laaditi, käivitub esimesena.

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

Sobib täiesti sõltumatutele skriptidele: külastusloendurid, sotsiaalmeedia nupud, reklaamibännerid. Kui skript ei sõltu DOM-ist ega teistest skriptidest, kasutage async.

Oluline nüanss: async skript võib käivituda enne, kui DOM on üles ehitatud. Kui see viitab lehe elementidele, mida veel ei eksisteeri, saate null ja vea konsoolis. Kontrollige alati.

Programmeeritud laadimine load sündmusel: Patrick Sextoni meetod

Mis siis, kui skript ei toeta defer/async atribuute või te ei kontrolli märgendit? Näiteks on skript sisestatud Google Tag Manageri kaudu või kõvakodeeritud kellegi teise pluginasse. Appi tuleb programmeeritud meetod.

Idee on lihtne: looge JavaScripti abil <script> element ja lisage see DOM-i alles pärast lehe täielikku laadimist. Selle lähenemise autor Patrick Sexton kirjeldas tehnikat esmakordselt saidil varvy.com.

Selle koodi kaasaegne versioon:

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

Kaks peamist erinevust aastakümne vanusest koodist. Esiteks: me kuulame load, mitte DOMContentLoaded sündmust. load sündmus toimub hiljem, kui kõik pildid, stiilid ja fondid on laaditud. Viivitatud skript ei mõjuta garanteeritult FCP-d ega LCP-d. Teiseks: ei mingit window.attachEvent. Seda meetodit oli vaja ainult Internet Explorer 8 ja vanemate versioonide jaoks, mida enam ei eksisteeri. Kaasaegne addEventListener töötab kõigis praegustes brauserites.

Kolm olukorda, kus programmeeritud lähenemine on asendamatu

defer ja async töötavad ainult otse HTML-is kirjutatud <script> siltide puhul. Programmeeritud meetod päästab teid, kui:

• Skript sisestatakse Google Tag Manageri või mõne muu tagihalduri kaudu, märgendit sa ei näe.
• Sa ei saa malli muuta: kellegi teise pistikprogramm või teema jäiga struktuuriga.
• Vajad tingimuslikku laadimist: näiteks kontaktvormi skript ainult lehtedel, kus vorm on olemas.

Intersection Observer: nõudmisel laadimine

Mõne skripti jaoks on isegi defer liiga varajane. Vestlusvidinat pole vaja enne, kui kasutaja kerib jaluse juurde. Kaarti pole vaja enne, kui ta jõuab aadressiplokini. Kommentaare pole vaja enne, kui ta loeb arutelu sektsioonini.

Intersection Observer API lahendab täpselt selle ülesande: skript laaditakse alles siis, kui sihtelement ilmub vaatevälja.

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
}

Parameeter rootMargin: '200px' laadib skripti 200 pikslit enne elemendi ekraanile ilmumist, kasutaja viivitust ei märka. Varem kasutasid arendajad aastaid scroll-kuulajaid koos getBoundingClientRect()-iga, kuid need käivitusid igal kerimise pikslil ja koormasid pealõime üle.

Intersection Observer töötab asünkroonselt ega tekita brauserile peaaegu mingit koormust. Tugi on kõigis kaasaegsetes brauserites, sealhulgas Safaris alates versioonist 12.1. IE11 ei ole toetatud, kuid selle osakaal läheneb 2026. aasta juuni seisuga statistilisele veale.

WordPress: laisklaadimine ilma koodi muutmata

Kui sait on WordPressil, saad laisklaadimist rakendada kolmel viisil, alates lihtsaimast kuni kõige paindlikumani.

Pluginad skriptide laisklaadimiseks

Kaks toimivat varianti, testitud tuhandetel saitidel.

Flying Scripts, Gijo Varghese tasuta plugin, 30 000+ aktiivset paigaldust, versioon 1.2.4 (uuendatud mais 2026). Võimaldab JavaScripti edasi lükata kuni esimese kasutaja interaktsioonini: hiire liikumine, klikk, kerimine, puudutus mobiilil. Määrad märksõnad skripti URL-ist ja plugin lükkab selle täitmise edasi. Olemas on ajalimiit, kui kasutaja lehega ei suhtle, käivituvad skriptid määratud aja möödudes. Maksimaalne mõõdikute võit, kuid vestlus- või tagasihelistamisvorm tuleks viivitusest välja jätta, neid on vaja kohe.

WP Rocket, premium puhverdamise plugin, millel on sisseehitatud JavaScripti laadimise viivitusfunktsioon. Lisab valitud skriptidele defer või async atribuudi läbi administraatoriliidese. Määrad URL-i, plugin muudab atribuuti lehe renderdamisel. Sobib neile, kes juba kasutavad WP Rocketit puhverdamiseks ega soovi pluginatega liialdada.

Script_loader_tag konks failis functions.php

Kui sa ei soovi eraldi pluginat paigaldada, võimaldab WordPress filtreerida <script> siltide väljundit läbi script_loader_tag konksu. Allolev kood lisab defer kõigile skriptidele, välja arvatud jQuery ja administraatori paneel:

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

Paiguta kood alamteema functions.php faili või kasuta Code Snippets pluginat. Enne rakendamist tee varukoopia. defer jQuery puhul lõhub iga koodi, mis kutsub $() või jQuery() enne DOMContentLoaded sündmust. Alusta üksikutest skriptidest, kontrolli pärast iga muudatust konsooli vigade suhtes.

Täielik kontroll: Asset CleanUp

Asset CleanUp, tasuta plugin (versioon 1.4.0.4, uuendatud mais 2026), mis näitab KÕIKI lehel laaditud skripte ja stiile. Koos suuruse ja allika viitega. Saad keelata konkreetse skripti konkreetsel lehel, muuta laadimisatribuuti defer/async vastu või üleliigse vara täielikult laadimata jätta.

Peamine eelis Flying Scriptsi ees: Asset CleanUp annab igast lehest tervikpildi. Näed täpselt, mis laadib, ja teed otsuseid täpselt. Pro versioon lisab tingimusliku laadimise ekraanitüübi järgi ja skriptide liigutamise HEAD ja BODY vahel. Töötab koos kõigi puhverdamise pluginatega, WP Rocket, W3 Total Cache, WP Fastest Cache.

Põhjalikum sissevaade WordPressi kiirendamisse on eraldi artiklis: 21 nõuannet PageSpeed Insightsi skoori parandamiseks. Kui probleem pole ainult skriptides, vaid üldises majutuse kiiruses, vaata viise WordPressi lehe laadimisaja vähendamiseks. Ja tööriistad WordPressi jõudluse kontrollimiseks aitavad mõõta optimeerimise tegelikku mõju.

Video: async ja defer praktikas

Viie minuti pikkune ülevaade xplodivity kanalilt koos visuaalsete laadimisskeemide ja reaalajas koodinäidetega:

⁉️🤔 Korduma kippuvad küsimused

defer** või async, kumb valida Google Analyticsi jaoks?**

async. Analytics.js ja gtag.js on DOM-ist täiesti sõltumatud, nad ei vaja täitmise järjekorda. GA4 soovitab ametlikult async-ut, teek haldab hilistunud lähtestamist ise.

Kuidas erineb load sündmus DOMContentLoaded sündmusest?

DOMContentLoaded käivitub, kui HTML on täielikult parsitud ja DOM-puu on ehitatud, stiilid ja pildid võivad veel laadida. load toimub hiljem: kui absoluutselt kõik on laaditud, sealhulgas pildid, fondid ja stiililehed. Laisa skripti laadimise jaoks on load turvalisem: selleks hetkeks on leht kasutajale kindlasti juba kuvatud.

Kas defer saab lisada inline-skriptile?

Ei. Atribuut defer töötab ainult väliste skriptide puhul, millel on src atribuut. Inline-skripti (<script>code</script>) koos defer-iga ignoreeritakse, brauser käivitab selle tavalise blokeeriva skriptina. Inline-koodi edasilükkamiseks mähkige see DOMContentLoaded või load kuulaja sisse.

Kas defer on ohutu panna kõigile WordPressi saidi skriptidele?

jQuery koos defer-iga lõhub igasuguse koodi, mis kutsub $() või jQuery() enne DOMContentLoaded-i. Just seetõttu on jQuery ülaltoodud näites töötlemisest välja jäetud. Alustage mittekriitilistest skriptidest: vestlus, sotsiaalmeedia, reklaamid. Laiendage nimekirja järk-järgult, kontrollides pärast iga muudatust konsooli vigade suhtes.

Intersection Observer või defer, kumb on parem?

Need lahendavad erinevaid ülesandeid. defer on mõeldud skriptidele, mida on lehel alati vaja, kuid mis pole esmase renderduse jaoks kriitilised: analüütika, A/B testid. Intersection Observer on mõeldud konkreetse plokiga seotud skriptidele: kaart, vestlus jalus, kommentaaride vidin. Lihtne reegel: skript lehe ülaosas, defer; skript allpool murdejoont, Intersection Observer.

Mida teha, kui Flying Scripts lõhkus funktsionaalsuse?

Välistage probleemne skript viivitusnimekirjast pluginaseadetes. Flying Scripts võimaldab määrata kaasamiseks märksõnu, eemaldage probleemse skripti märksõna ja see laadib normaalselt. Kriitiliste elementide (nt vormid ja vestlused) puhul on see kohustuslik samm enne viivituse aktiveerimist.

Mida oma saidile panna: otsustusmaatriks

Valik taandub lihtsale otsustustabelile:

• Skript on kirjutatud HTML-is, te kontrollite silte, defer, kui sõltub järjekorrast, async, kui on täiesti sõltumatu.
• Skript sisestatakse GTM-i või kellegi teise plugina kaudu, sildid pole ligipääsetavad, programmiline laadimine load sündmusel.
• Skript on seotud allpool murdejoont asuva plokiga, Intersection Observer parameetriga rootMargin: '200px'.
• WordPress, vajate seda ilma koodita, Flying Scripts (tasuta, 30 000+ saiti) või Asset CleanUp täielikuks varade kontrolliks.

Alustage kõige lihtsamast: avage PageSpeed Insights, leidke blokeerivad välised skriptid ja lisage neile defer. Üks atribuut ja FCP võib minna punasest roheliseks. Ja kui olete atribuudid selgeks saanud, vaadake meie ülevaadet WordPressi jõudluse kontrollimise tööriistadest, see aitab mõõta tegelikku efekti.