Sju av tio sajter som misslyckas i PageSpeed Insights blir långsamma på grund av tredjeparts-JavaScript. Externa skript, analysverktyg, annonsnätverk, chattar, typsnitt, cookie-banners blockerar renderingen och skjuter upp First Contentful Paint med sekunder. Och du kan inte stänga av dem: analysverktygen matar marknadsavdelningen, chatten genererar leads, utan en cookie-banner klarar sajten inte en granskning.

Det finns en lösning: lazy loading. Skriptet laddas först när huvudinnehållet redan har visats för användaren. Webbläsaren väntar inte, Core Web Vitals-mätvärdena hamnar i den gröna zonen och sajtens funktionalitet blir inte lidande.

Vi har samlat alla fungerande metoder, från inbyggda HTML-attribut till programmatiska tekniker och WordPress-plugins. Med kodexempel som du kan kopiera och använda redan idag.

💡 Snabb översikt:

• Förstå defer och async: tabellen visar tydligt skillnaden mellan attributen
• Bemästra programmatisk laddning vid load-eventet: en modern version av Patrick Sextons metod
• Sätt upp Intersection Observer för skript under "the fold": chattar, kartor, kommentarer
• Optimera WordPress utan att redigera kod: Flying Scripts och Asset CleanUp-plugins

Hur tredjepartsskript gör laddningen långsammare

Webbläsaren tolkar HTML uppifrån och ner. När den stöter på <script src="..."> utan attribut stannar tolkningen: webbläsaren laddar skriptet, kör det och fortsätter först därefter att tolka sidan. Detta är renderingsblockerande.

För användaren blir resultatet en vit skärm. Mätvärdet First Contentful Paint (FCP), tiden fram till det första visade innehållet, beror direkt på hur snabbt webbläsaren tog sig igenom alla blockerande skript. FCP är en del av Core Web Vitals och påverkar sökrankningen direkt.

Tredjepartsskript slår hårdare än dina egna: de ligger på externa servrar och du kontrollerar inte deras leveranshastighet eller tillgänglighet. DNS-uppslag, TCP-handskakning, TLS-handskakning, nedladdning, varje steg lägger till tiotals eller hundratals millisekunder. Enligt HTTP Archive-data för 2024 laddar en typisk mobilsajt 21 externa skript, och tre av dem är blockerande.

Lösningen är att ge webbläsaren en tydlig instruktion: "ladda skriptet i bakgrunden och kör det senare." Det är precis vad attributen defer och async är till för.

Defer och async: två inbyggda mekanismer

Båda attributen skrivs i <script>-taggen och ändrar laddningsbeteendet. På fundamentalt olika sätt.

Defer: fördröjd körning med ordningsgaranti

Attributet defer säger till webbläsaren: "ladda skriptet i bakgrunden, kör efter fullständig HTML-tolkning." Körningsordningen bevaras, skripten körs i exakt den sekvens som anges i koden.

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

Det ideala valet för skript som måste köras i en specifik ordning: bibliotek, sedan dess plugin, sedan initiering. defer garanterar att DOM:en är redo vid körningstillfället. Eventet DOMContentLoaded utlöses efter alla defer-skript.

Async: fullständigt oberoende

async laddar skriptet parallellt med tolkningen och kör det omedelbart efter laddning, utan att vänta på andra. Ordningen är inte garanterad: det skript som laddades först från servern körs först.

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

Passar för helt oberoende skript: besöksräknare, sociala medier-knappar, annonsbanners. Om skriptet inte är beroende av DOM:en och inte är beroende av andra skript, använd async.

Viktig nyans: ett async-skript kan köras innan DOM:en är uppbyggd. Om det refererar till sidelement som ännu inte finns får du null och ett fel i konsolen. Kontrollera alltid.

Programmatisk laddning vid load-eventet: Patrick Sextons metod

Vad gör man om skriptet inte stöder defer/async eller om du inte kontrollerar koden? Till exempel om skriptet läggs in via Google Tag Manager eller är hårdkodat i någon annans plugin. Då kommer den programmatiska metoden till undsättning.

Idén är enkel: skapa ett <script>-element via JavaScript och lägg till det i DOM:en först efter att sidan har laddats klart helt. Upphovsmannen till metoden, Patrick Sexton, beskrev tekniken först på varvy.com.

Den moderna versionen av denna kod:

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

Två viktiga skillnader mot tio år gammal kod. För det första: vi lyssnar på load, inte DOMContentLoaded. Eventet load inträffar senare, när alla bilder, stilmallar och typsnitt är laddade. Ett fördröjt skript påverkar garanterat inte FCP eller LCP. För det andra: ingen window.attachEvent. Den metoden behövdes bara för Internet Explorer 8 och äldre, som inte längre existerar. Modern addEventListener fungerar i alla aktuella webbläsare.

Tre situationer där den programmatiska metoden är oersättlig

defer och async fungerar bara för <script>-taggar som är inskrivna direkt i HTML-koden. Den programmatiska metoden räddar dig när:

• Skriptet läggs in via Google Tag Manager eller en annan tagghanterare, du ser inte koden i mallen.
• Du kan inte redigera mallen: någon annans plugin eller tema med en rigid struktur.
• Du behöver villkorlig inläsning: till exempel ett kontaktformulärsskript bara på sidor som har ett formulär.

Intersection Observer: ladda vid behov

För vissa skript är till och med defer för tidigt. En chattwidget behövs inte förrän användaren scrollar till sidfoten. En karta, inte förrän de når adressblocket. Kommentarer, inte förrän de läser till diskussionsdelen.

Intersection Observer API löser precis den uppgiften: skriptet laddas först när målelementet dyker upp i viewporten.

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
}

Parametern rootMargin: '200px' laddar skriptet 200 pixlar innan elementet syns på skärmen, användaren märker ingen fördröjning. Tidigare använde utvecklare scroll-lyssnare med getBoundingClientRect() i åratal, men de avfyrades vid varje scrollpixel och överbelastade huvudtråden.

Intersection Observer arbetar asynkront och belastar webbläsaren nästan inte alls. Stöd finns i alla moderna webbläsare, inklusive Safari från version 12.1. IE11 stöds inte, men dess andel närmar sig statistiskt brus i juni 2026.

WordPress: lazy loading utan att redigera kod

Om sajten ligger på WordPress kan du implementera lazy loading på tre sätt, från enklast till mest flexibelt.

Tillägg för lazy loading av skript

Två fungerande alternativ, testade på tusentals sajter.

Flying Scripts, ett gratis tillägg av Gijo Varghese, 30 000+ aktiva installationer, version 1.2.4 (uppdaterad i maj 2026). Kan fördröja JavaScript tills användaren interagerar första gången: musrörelse, klick, skroll, touch på mobil. Du anger nyckelord från skriptets URL, så fördröjer tillägget dess körning. Det finns en timeout, om användaren inte interagerar med sidan körs skripten efter en inställd tid. Maximal mätvärdesvinst, men chatt- eller callback-formulär bör undantas från fördröjning, de behövs direkt.

WP Rocket, ett premium-cachingtillägg med inbyggd funktion för att fördröja JavaScript-inläsning. Lägger till defer eller async på valda skript via admin-gränssnittet. Du anger URL:en, tillägget ändrar attributet när sidan renderas. Passar dig som redan använder WP Rocket för caching och inte vill mångdubbla antalet tillägg.

Script_loader_tag-hook i functions.php

Om du inte vill installera ett separat tillägg låter WordPress dig filtrera <script>-taggars utdata via hooken script_loader_tag. Koden nedan lägger till defer på alla skript utom jQuery och adminpanelen:

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

Placera koden i barntemats functions.php eller via tillägget Code Snippets. Gör en backup innan du tillämpar den. defer på jQuery kommer att krascha all kod som anropar $() eller jQuery() före DOMContentLoaded. Börja med enskilda skript, kontrollera konsolen efter fel vid varje ändring.

Full kontroll: Asset CleanUp

Asset CleanUp, ett gratis tillägg (version 1.4.0.4, uppdaterad i maj 2026) som visar ALLA skript och stilmallar som laddas på en sida. Med storlek och källa angivna. Du kan inaktivera ett specifikt skript på en specifik sida, ändra laddningsattributet till defer/async, eller helt avlasta en onödig resurs.

Den främsta fördelen jämfört med Flying Scripts: Asset CleanUp ger en komplett bild för varje sida. Du ser exakt vad som laddas och fattar beslut med precision. Pro-versionen lägger till villkorlig inläsning per skärmtyp och möjlighet att flytta skript mellan HEAD och BODY. Fungerar tillsammans med vilket cachingtillägg som helst, WP Rocket, W3 Total Cache, WP Fastest Cache.

En djupare genomgång av WordPress-acceleration finns i en separat artikel: 21 tips för att förbättra PageSpeed Insights-poängen. Om problemet inte bara är skript utan den övergripande webbhotellshastigheten, kolla in sätt att minska WordPress sidladdningstid. Och verktyg för att kontrollera WordPress-prestanda hjälper dig mäta den verkliga effekten av optimeringen.

Video: async och defer i praktiken

En fem minuters genomgång från kanalen xplodivity, med visuella laddningsdiagram och live-kodexempel:

⁉️🤔 Vanliga frågor

defer** eller async, vilket ska man välja för Google Analytics?**

async. Analytics.js och gtag.js är helt oberoende av DOM:en, de behöver ingen exekveringsordning. GA4 rekommenderar officiellt async, biblioteket hanterar fördröjd initiering själv.

Hur skiljer sig load-eventet från DOMContentLoaded?

DOMContentLoaded aktiveras när HTML:en är helt tolkad och DOM-trädet är byggt, stilmallar och bilder kan fortfarande laddas. load inträffar senare: när absolut allt är laddat, inklusive bilder, typsnitt och stilmallar. För lat skriptinläsning är load säkrare: sidan har definitivt visats för användaren vid det laget.

Kan man lägga till defer på ett inline-skript?

Nej. Attributet defer fungerar bara för externa skript med attributet src. Ett inline-skript (<script>code</script>) med defer ignoreras, webbläsaren kör det som ett normalt blockerande skript. För att fördröja inline-kod, slå in den i en DOMContentLoaded- eller load-lyssnare.

Är det säkert att sätta defer på alla skript på en WordPress-sajt?

jQuery med defer kommer att förstöra all kod som anropar $() eller jQuery() före DOMContentLoaded. Det är precis därför jQuery exkluderas från bearbetning i kodsnutten ovan. Börja med icke-kritiska skript: chatt, sociala medier, annonser. Utöka listan gradvis och kontrollera konsolen efter fel efter varje ändring.

Intersection Observer eller defer, vilket är bättre?

De löser olika uppgifter. defer är för skript som alltid behövs på sidan men inte är kritiska för första renderingen: analys, A/B-tester. Intersection Observer är för skript kopplade till ett specifikt block: karta, chatt i sidfoten, kommentarswidget. Enkel regel: skript i den övre delen av sidan, defer; skript under mitten av sidan, Intersection Observer.

Vad gör man om Flying Scripts förstörde funktionalitet?

Exkludera det problematiska skriptet från fördröjningslistan i plugin-inställningarna. Flying Scripts låter dig ange nyckelord för inkludering, ta bort det problematiska skriptets nyckelord så laddas det normalt. För kritiska element som formulär och chattar är detta ett obligatoriskt steg innan du aktiverar fördröjning.

Vad du ska använda på din sajt: beslutsmatris

Valet kokar ner till en enkel beslutstabell:

• Skriptet är skrivet i HTML, du kontrollerar taggarna, defer om det beror på ordning, async om det är helt oberoende.
• Skriptet infogas via GTM eller någon annans plugin, taggar är otillgängliga, programmatisk inläsning på load-eventet.
• Skriptet är kopplat till ett block under mitten av sidan, Intersection Observer med rootMargin: '200px'.
• WordPress, behöver det utan kod, Flying Scripts (gratis, 30 000+ sajter) eller Asset CleanUp för full tillgångskontroll.

Börja med det enklaste: öppna PageSpeed Insights, hitta blockerande externa skript och lägg till defer på dem. Ett attribut, och FCP kan gå från rött till grönt. Och när du har bemästrat attributen, kolla in vår recension av verktyg för att kontrollera WordPress-prestanda, den hjälper dig att mäta den verkliga effekten.