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.

Grunden

Titeln blir den blå länken i sökresultatet. Beskrivningen blir ofta texten under.

<html lang="sv">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1">
  <title>Europas huvudstäder – Quiz</title>
  <meta name="description"
    content="Tio frågor om Europas huvudstäder.
             Hur många klarar du?">
  <link rel="canonical"
    href="https://example.com/quiz/europa">
</head>

Tumregler

title: unik per sida, det viktigaste först, runt 50–60 tecken. description: en mening som lockar till klick. canonical: vilken adress som är originalet om samma innehåll finns på flera. keywords: ignoreras av Google sedan länge.

Rubriker och text

En h1 per sida, sedan h2, h3 i ordning. Sökmotorn läser strukturen som ett innehållsregister.

<main>
  <h1>Europas huvudstäder</h1>
  <h2>Så fungerar quizet</h2>
  <p>...</p>
  <h2>Topplista</h2>
</main>

Bilder och länkar

alt beskriver bilden. Länktexten beskriver målet. Sökmotorer följer <a href>, inte klick-händelser.

<img src="paris.webp" alt="Eiffeltornet i kvällsljus">

<!-- Nej -->
<a href="/regler">Klicka här</a>
<div onclick="go('/regler')">Regler</div>

<!-- Ja -->
<a href="/regler">Läs reglerna</a>

Förtjäna dem

Gör något värt att länka till: en guide, ett verktyg, öppen kod. Branschregister, partners och gästinlägg. Kvalitet före antal: en relevant och betrodd länk slår hundra okända.

Det som straffar sig

Köpta länkar, länkfarmar och länkspam i kommentarsfält. Google känner igen mönstren och kan sänka hela sajten.

Märk länkar du inte står för

Då räknas de inte som röster.

<a href="..." rel="sponsored">
<a href="..." rel="ugc">
<a href="..." rel="nofollow">

Open Graph

Bilden ska ha absolut URL. 1200 × 630 px fungerar nästan överallt.

<meta property="og:type" content="website">
<meta property="og:title"
  content="Europas huvudstäder – Quiz">
<meta property="og:description"
  content="Tio frågor. Hur många klarar du?">
<meta property="og:image"
  content="https://example.com/og/europa.png">
<meta property="og:url"
  content="https://example.com/quiz/europa">
<meta property="og:locale" content="sv_SE">

X (Twitter)

X läser Open Graph som reserv. Det som behövs i tillägg är korttypen, för stor bild.

<meta name="twitter:card"
  content="summary_large_image">
<meta name="twitter:image:alt"
  content="Karta över Europa">

robots.txt

Ligger i roten. Säger vad crawlers får besöka. Inget skydd: hemliga sidor ska ha inloggning.

User-agent: *
Disallow: /admin/

Sitemap: https://example.com/sitemap.xml

sitemap.xml

En lista över sidorna du vill ha indexerade. Skicka in den i Google Search Console.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns=
  "http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-11-04</lastmod>
  </url>
</urlset>

Till exempel i portfolion

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "[Ditt namn]",
  "jobTitle": "Fullstackutvecklare",
  "url": "https://[din-portfolio].se",
  "sameAs": [
    "https://github.com/[du]",
    "https://www.linkedin.com/in/[du]"
  ]
}
</script>

Varför

Kan ge rich results i Google: betyg, priser, evenemang, recept. Och det är exakt den sortens data AI-tjänster har lätt att läsa. Testa med Googles Rich Results Test eller Schema Markup Validator.

Metadata per sida

I en app med flera vyer ska varje vy ha egen titel. React 19 lyfter <title> och <meta> till <head> automatiskt.

function QuizPage({ quiz }) {
  return (
    <>
      <title>{quiz.name} – Quiz</title>
      <meta name="description"
            content={quiz.summary} />
      <h1>{quiz.name}</h1>
    </>
  );
}

Rendera på servern

Med Next.js blir HTML:en, och metadatan, klar på servern. Bäst för SEO, delningskort och AI-crawlers.

// app/quiz/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const quiz = await getQuiz((await params).slug);
  return {
    title: quiz.name,
    openGraph: { images: [quiz.image] },
  };
}

robots.txt

AI-företagen har egna crawlers med egna namn. Man kan stänga ute träning men tillåta sök.

# Inte för träning
User-agent: GPTBot
Disallow: /

User-agent: Google-Extended
Disallow: /

# Men gärna i ChatGPT:s sökning
User-agent: OAI-SearchBot
Allow: /

llms.txt

Ett förslag från 2024: en markdownfil i roten som sammanfattar sajten för språkmodeller. Ingen standard, och det är oklart vilka tjänster som läser den. Bra att känna till, inte att lita på.

Tid

[20 min]

Mål

Ett delningskort som ser ut som ni vill, och SEO-poäng i grönt.