Webbprestanda och tillgänglighet: en teknisk checklista som faktiskt håller

Evergreen

Varför den här guiden finns

De flesta “snygga” sajter är inte långsamma för att designen är avancerad, utan för att leveransen är slarvig: för mycket JavaScript, otydliga bildstrategier, saknad cache, och komponenter som inte går att navigera med tangentbord.

Det här är checklistan jag använder för att få både hastighet och kvalitet – utan att det blir en religion.

TL;DR

  • Mät först (Lighthouse + Web Vitals), ändra sen.
  • Bildstrategi och cache ger ofta mest för minst arbete.
  • WCAG handlar mer om struktur och fokus än “extra features”.

Problembild

Symptom du känner igen:

  • Startsidan “känns” seg trots bra hosting.
  • Innehåll hoppar (CLS) när bilder/typsnitt laddar.
  • Meny, modaler eller kort går inte att använda med tabb.
  • Google indexerar, men du får inte den träff du förtjänar.

Lösning i praktiken

Steg 1 – Sätt en prestandabudget

Bestäm gränser, annars blir allt “lite till”.

Exempel (rimligt för en personlig sajt):

  • Snabb interaktion utan att kräva JS
  • Bilder: korrekt dimensionerade och cacheade
  • HTML: cache “must-revalidate”
  • Statiskt där det går (Astro som default)

Steg 2 – Bildstrategi (ofta största vinsten)

  • Använd rätt format (AVIF/WebP när rimligt)
  • Sätt width/height så layouten inte hoppar
  • Ladda “hero” smart, resten lazy

Steg 3 – WCAG utan krångel

  • En H1 per sida
  • Logisk heading-hierarki
  • Synlig fokusindikator (focus-visible)
  • Skip-to-content
  • Respektera reduced motion

Checklista

  • Lighthouse: Performance/SEO/Accessibility utan röda flaggor
  • Inga layout-skutt när sidan laddar (CLS)
  • Alla interaktiva element går att tabba till och aktivera
  • Fokus syns alltid tydligt
  • Sidor har tydlig titel + beskrivning + canonical
  • Sitemap + robots + RSS finns och stämmer

Kod / exempel

pnpm build
pnpm dev

Vanliga fallgropar

”Vi tar in ett UI-bibliotek”

→ plötsligt har du en app, inte en sajt.

Bilder utan dimensioner

→ CLS du aldrig riktigt blir av med.

Fokus-styling som bara ser bra ut med mus.

Relaterat