LCP

Largest Contentful Paint. När det största elementet syns. Bra: högst 2,5 s. Dåligt: över 4 s.

INP

Interaction to Next Paint. Tiden från klick till att sidan svarar. Bra: högst 200 ms. Dåligt: över 500 ms.

CLS

Cumulative Layout Shift. Hur mycket innehållet hoppar. Bra: högst 0,1. Dåligt: över 0,25.

TTFB

Time to First Byte. Hur snabbt servern svarar. Bra: högst 0,8 s. Här bor backend: hosting, databasfrågor, cache.

FCP

First Contentful Paint. När något alls syns. Bra: högst 1,8 s. Blockerande CSS och JS gör den sen.

Lighthouse

I DevTools. Labbdata: en simulerad mobil på strypt nät. Ger poäng och konkreta förslag.

PageSpeed Insights

pagespeed.web.dev. Fältdata från riktiga Chrome-användare, om sajten har tillräckligt med trafik, plus en Lighthouse-körning.

Performance-fliken

I DevTools. Spelar in laddningen och visar exakt vad som tar tid, och vilket element som är LCP.

Network-fliken

Vattenfallet: varje fil, hur stor den är och när den laddas. Bra för att hitta den där bilden på 4 MB.

Tid

[15 min]

Mål

En lista med tre saker ni kan åtgärda. Vi tar några exempel i helgrupp.

Vanlig bild längre ner

width och height reserverar platsen, så sidan inte hoppar (CLS). loading="lazy" väntar tills den är nära.

<img src="img/team.webp"
     width="800" height="600"
     alt="Teamet vid tavlan"
     loading="lazy"
     decoding="async">

LCP-bilden högst upp

Aldrig lazy. Be i stället webbläsaren hämta den först.

<img src="img/hero.webp"
     width="1600" height="900"
     alt=""
     fetchpriority="high">

Moderna format med reserv

AVIF och WebP är ofta mycket mindre än JPEG. Webbläsaren tar det första den förstår.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="..."
       width="1600" height="900">
</picture>

Olika storlek för olika skärm

En mobil ska inte ladda bilden för en 4K-skärm.

<img src="hero-800.webp"
     srcset="hero-400.webp 400w,
             hero-800.webp 800w,
             hero-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="...">

defer

Hämtas parallellt, körs efter HTML:en, i ordning. Standardvalet för er kod.

<script src="js/app.js" defer>
</script>

type="module"

Beter sig som defer automatiskt. Det ni använt sedan v43.

<script type="module"
        src="js/main.js"></script>

async

Körs så fort den är hämtad, i vilken ordning som helst. För fristående saker som statistik.

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

Google Fonts

Öppna anslutningen tidigt, och visa reservtypsnittet medan det riktiga laddas (display=swap). Ta bara vikterna du använder.

<link rel="preconnect"
  href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap">

Eget typsnitt

WOFF2 är det minsta formatet. Hosta själv så slipper du en extra server.

@font-face {
  font-family: "Lato";
  src: url("fonts/lato-400.woff2")
       format("woff2");
  font-display: swap;
}

preload

Hämta en resurs tidigt, innan webbläsaren hittat den själv. Bra för en bakgrundsbild i CSS som är LCP.

<link rel="preload" as="image"
      href="img/hero.webp">

<link rel="preload" as="font"
      href="fonts/lato-400.woff2"
      type="font/woff2" crossorigin>

Men inte allt

Förladdar du allt är inget prioriterat. Ett eller två saker, och bara det som syns direkt.

<!-- Nej -->
<link rel="preload" as="image" href="1.jpg">
<link rel="preload" as="image" href="2.jpg">
<link rel="preload" as="image" href="3.jpg">
<!-- ... -->

Bygga med Vite

Minifiering, tree shaking (oanvänd kod tas bort) och hashade filnamn som går att cacha länge. Gratis när ni bygger.

Code splitting

Ladda kod först när den behövs. I React: lazy() per sida.

button.addEventListener("click", async () => {
  const { drawChart } =
    await import("./chart.js");
  drawChart(data);
});

Servern

Cache-headers, komprimering (gzip, Brotli) och ett CDN som serverar filerna nära användaren. Snabba databasfrågor ger låg TTFB.

Cache-Control: public,
  max-age=31536000, immutable

Rendering

Server-side rendering och statiska sidor, till exempel med Next.js: HTML:en är klar när den kommer. Bra för både LCP och SEO.