Så gör du webbplatsen snabbare: 12 praktiska metoder

01Varför är webbplatsens hastighet viktig?

En sida som laddar långsamt betyder att du förlorar besökaren innan hen har sett innehållet. Särskilt på mobil anslutning räcker några sekunders väntan för att användaren ska trycka på bakåtknappen. På en sida där du annonserar betyder det att betalda klick går till spillo.

Hastigheten påverkar också synligheten i sökresultaten. För att mäta sidupplevelsen använder Google måtten i Core Web Vitals: som »bra« räknas 2,5 sekunder för LCP (inläsning av det största innehållet), 200 millisekunder för INP (svar på interaktion) och 0,1 för CLS (visuell förskjutning). Detaljerna om de här måtten har vi gått igenom i inlägget vad är Core Web Vitals.

De 12 metoderna nedan är de steg som gör störst skillnad på de flesta webbplatser. Du behöver inte tillämpa alla på en gång; mät först och börja med det största problemet.

02Mät först: vilka verktyg?

Optimering utan mätning är som att skjuta i mörker. De gratisverktyg som listas nedan visar var problemet finns.

• PageSpeed Insights: Visar både verkliga användardata (om sådana finns) och labbtest.
• Fliken Lighthouse i Chromes utvecklarverktyg: Lokala tester och detaljerade rekommendationer.
• Rapporten Core Web Vitals i Search Console: Verklig användarupplevelse på webbplatsens alla sidor.
• Fliken Nätverk (Network): Visar vilken fil som laddas på hur lång tid och med vilken storlek.

03Bildoptimering

På de flesta webbplatser utgör bilderna den största delen av sidans vikt. Därför är det oftast här den snabbaste vinsten finns.

1. Byt till moderna format

Att leverera foton i WebP eller AVIF ger mycket mindre filer än JPEG och PNG med liknande bildkvalitet. För äldre webbläsare kan du ange ett reservformat med picture-taggen.

<picture>
  <source srcset="urun.avif" type="image/avif">
  <source srcset="urun.webp" type="image/webp">
  <img src="urun.jpg" alt="Produktnamn" width="800" height="600">
</picture>

2. Leverera i rätt storlek

Det är onödigt att ladda ner en fil på 3000 pixlar för en bild som ska visas 400 pixlar bred på telefonen. Låt webbläsaren välja rätt fil efter skärmstorlek med attributen srcset och sizes.

3. Sen inläsning och angiven storlek

Lägg till loading=lazy på bilder som ligger under skärmens nedre kant; då laddas de först när användaren närmar sig dem. Ladda inte huvudbilden sent högst upp på sidan, eftersom den oftast är LCP-elementet. Att ange bredd och höjd på alla bilder förhindrar att innehållet hoppar (CLS).

04Förenkla kod och resurser

Webbläsaren måste ladda ner och bearbeta CSS- och JavaScript-filer innan den visar sidan. Ju större och fler de här filerna är, desto senare syns sidan och desto senare svarar den på interaktion.

4. Ta bort oanvänd kod

Panelen Coverage (Täckning) i Chromes utvecklarverktyg visar hur stor del av varje fil som faktiskt används. Rensa bort oanvända komponenter och bibliotek och minifiera de filer som blir kvar.

5. Skjut upp blockerande skript

Ladda JavaScript-filer som inte behövs för sidans första visning med defer. Då kan webbläsaren fortsätta att bearbeta HTML medan skripten laddas ner i bakgrunden.

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

6. Minska antalet tredjepartsskript

Tredjeparts chattverktyg, spårningskoder, tillägg för sociala medier och inbäddade videor kan belasta sidan kraftigt. Ifrågasätt om var och en verkligen behövs; visa videor med en liten förhandsbild tills användaren klickar.

05Gör typsnitten lättare

Webbtypsnitt ger webbplatsen dess karaktär, men om de laddas fel leder det till att texten syns sent eller att sidan hoppar.

7. Använd WOFF2 och delmängder

Leverera typsnitt i formatet WOFF2 och bara med den teckenuppsättning du behöver (till exempel latinska tecken och tecken för turkiska). Ladda inte vikter du inte använder; de flesta webbplatser klarar sig med två eller tre vikter.

8. Justera synlighet och prioritet

Med font-display: swap visas texten med systemtypsnittet tills typsnittet har laddats. Huvudtypsnittet som används högst upp på sidan kan du låta laddas i förväg med preload.

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

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

06Server- och cacheinställningar

Hur lätta kod och bilder än är laddar sidan ändå sent om servern svarar långsamt. Förbättringar i det här lagret påverkar alla sidor på en gång.

9. Slå på webbläsarcache

Definiera cacherubriker med lång giltighetstid för filer som sällan ändras, som logotyp, CSS, JavaScript och typsnitt. Då laddar inte en återvändande besökare ner de filerna på nytt. När en fil uppdateras kan du bryta cachen genom att ge namnet ett versionstillägg.

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

10. Komprimering och moderna protokoll

Skicka textbaserade filer (HTML, CSS, JavaScript, SVG) komprimerade med Brotli eller gzip. Se till att din server stöder HTTP/2 eller HTTP/3; de här protokollen gör det lättare att ladda ner många små filer parallellt.

11. Korta serverns svarstid

Om tiden till första byte (TTFB) är lång beror problemet oftast på långsamma databasfrågor, dynamiska sidor utan cache eller otillräckliga serverresurser. Sidcache, bättre frågor eller byte till en lämpligare hostingplan kortar den tiden.

12. Använd ett CDN

Ett innehållsdistributionsnätverk (CDN) distribuerar dina statiska filer från servrar som ligger geografiskt nära besökaren. På webbplatser med besökare från olika städer och länder minskar det fördröjningen märkbart och avlastar huvudservern.

07Vilken metod förbättrar vad?

Varje metod påverkar ett olika mått. Om ett visst mått är dåligt i din mätrapport, börja med metoderna på den raden.

08Hastighet är inget man gör en gång

Ett nytt kampanjband, ett stort foto som laddas upp eller en spårningskod som läggs till kan på några dagar göra om månaders optimering. Gör därför hastighetsmätning till en del av det regelbundna underhållet; upprepa PageSpeed Insights-testet efter varje större uppdatering. Övriga steg i underhållsrutinen hittar du i inlägget underhåll av webbplatsen.

Hastighet blir billigast när den planeras redan i designfasen. Lätta komponenter, rätt bildupplägg och en enkel kodstruktur gör de flesta rättelserna efter lansering onödiga. Vi tillämpar det här angreppssättet tillsammans i våra processer för SEO-anpassad webbdesign och mobilanpassad design; checklistan för teknisk SEO har vi samlat i guiden SEO-anpassad webbdesign.

För företag som vill följa mätning och rapportering regelbundet bedömer vår tjänst SEO och analys hastighetsdata tillsammans med sökprestanda.