CSS och JavaScript - Laddtider.se

CSS och JavaScript är de två vanligaste orsakerna till att en webbläsare fördröjer rendering. CSS är renderingsblockerande per definition; JavaScript kan blockera både parsning och rendering. Korrekt hantering av dessa resurser kan eliminera sekunders fördröjning.

Renderingsblockering

Webbläsaren måste ladda och tolka all länkad CSS innan den kan rendera sidans innehåll. JavaScript utan attributen defer eller async pausar HTML-parsningen under nedladdning och exekvering. Det innebär att även en server med låg svarstid kan ge fördröjd LCP om CSS och JavaScript inte hanteras korrekt.

Tredjepartsskript: den dolda flaskhalsen

På svenska sajter är tredjepartsskript ofta en större flaskhals än den egna koden. Tag managers (Google Tag Manager, Matomo), tillgänglighetsverktyg (Siteimprove, Vizzit) och konverteringsspårning (Facebook Pixel, LinkedIn Insight) adderar var och en JavaScript som konkurrerar om huvudtråden. En svensk kommunsajt med Sitevision laddar inte sällan fem till tio externa skript som tillsammans väger mer än det primära innehållet.

Erfarenheten från optimeringsarbete med Laddtider.se visar att det mest effektiva steget inte var minifiering utan eliminering — att avaktivera skript som inte längre behövdes (oanvända analysplugins, övervakningsverktyg). Varje skript som inte laddas ger noll byte och noll millisekunder. Se serveroptimering för komprimering av de skript som behålls.

Kritisk CSS (eng. critical CSS)

Kritisk CSS innebär att den CSS som krävs för att rendera innehållet ovanför veck (eng. above the fold) bäddas in direkt i HTML-dokumentets <head>. Övrig CSS laddas asynkront och blockerar inte initial rendering.

<head>
  <style>
    body { font-family: system-ui; margin: 0; }
    .hero { background: #1a1a2e; color: #fff; padding: 4rem 2rem; }
  </style>
  <link rel="preload" href="/style.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/style.css"></noscript>
</head>

Automatisering: Critical (npm-paket) och Critters (webpack-plugin) identifierar och extraherar kritisk CSS.

Minifiering

Minifiering avlägsnar blanksteg, kommentarer och onödiga tecken utan att förändra funktionaliteten. Typisk besparing: 10–30 procent före komprimering.

CSS: cssnano, Lightning CSS, Clean-CSS
JavaScript: Terser, esbuild, SWC

I kombination med Brotli-komprimering (se serveroptimering) kan den totala besparingen uppgå till 70–80 procent.

Asynkron och uppskjuten JavaScript

Attribut	Laddning	Exekvering	Användningsområde
`defer`	Parallellt med HTML-parsning	Efter parsning, i dokumentordning	Applikationskod som kräver DOM-åtkomst
`async`	Parallellt med HTML-parsning	Omedelbart vid nedladdning, utan ordningsgaranti	Oberoende skript (analys, annonser)
(inget attribut)	Blockerande	Omedelbart, pausar HTML-parsning	Bör undvikas

<script src="/app.js" defer></script>
<script src="https://analytics.example.com/track.js" async></script>

Koduppdelning (eng. code splitting)

I stället för att leverera all JavaScript i en enda fil kan koden delas upp så att varje sida enbart laddar det som krävs. Moderna bundlers (webpack, Vite, esbuild) stöder dynamisk import:

const module = await import('./heavyFeature.js');

Eliminera oanvänd CSS och JavaScript

Chrome DevTools Coverage-flik visar exakt hur stor andel av varje CSS- och JavaScript-fil som faktiskt exekveras på sidan. Verktyg som PurgeCSS identifierar och avlägsnar oanvänd CSS automatiskt. I WordPress kan ett temaval med lägre kodfotavtryck halvera mängden levererad JavaScript.

Effekt på Core Web Vitals

LCP: Renderingsblockerande CSS fördröjer LCP direkt. Kritisk CSS och asynkron laddning är de mest effektiva åtgärderna.
INP: JavaScript som blockerar huvudtråden försämrar interaktionsrespons. Koduppdelning och defer reducerar belastningen.
CLS: JavaScript som injicerar DOM-element sent kan orsaka layoutförskjutningar.

Sammantaget är CSS- och JavaScript-hantering den åtgärd som ger störst effekt per insats för de flesta sajter. Fler optimeringstekniker finns i den kompletta guiden. För sambandet mellan prestanda och synlighet, se SEO och laddtider.