Når nettleseren laster siden din, leser den HTML-koden linje for linje. Når den møter <script src="stor-fil.js"> eller <link rel="stylesheet">, stopper den alt annet, laster ned filen og kjører den.
Først da rendrer den resten av siden. Dette er “Render-Blocking”.
I 2026, når Core Web Vitals teller (spesielt LCP - Largest Contentful Paint), må du fikse dette.
1. Javascript: Async og defer
Gammel skole så: “legg skript i bunnen (wp_footer)”.
Ny skole sier: “bruk attributter”.
<script async>: Laster i bakgrunnen, kjører umiddelbart etter nedlasting (risikabelt for avhengigheter, f.eks. jQuery).<script defer>: Laster i bakgrunnen, kjører først etter HTML er lastet (trygt, bevarer rekkefølge).
Hvordan legge til defer i WordPress? Cache-plugins (WP Rocket, Autoptimize, LiteSpeed Cache) har en “Defer JS” alternativ. Aktiver det.
Dette løser vanligvis 90% av JS-problemene.
2. CSS: Critical CSS
CSS er vanskeligere. Du kan ikke “forsinke” det fordi siden vil se ut som “rå tekst” et øyeblikk (ustylet - FOUC-effekt).
Løsningen er Critical CSS.
- Ta bare CSS som trengs for “over folden” innhold (synlig uten scrolling).
- Lim det inn inline i
<style>i headeren. - Last resten av CSS (bunntekst, nedre seksjoner) asynkront i bakgrunnen.
De fleste moderne optimaliseringsplugins genererer Critical CSS automatisk.
Strategioppsummering
- JS: Alt med
defer(bortsett fra absolutt kritiske analyse/cookie-skript). - CSS: Critical CSS inline + resten asynkront.
- Fonter: Bruk
font-display: swap.
På denne måten ser brukeren innhold umiddelbart mens tunge galleri- eller kartskript lastes i bakgrunnen.
