Riktlinje nr 54 Prio 2

Optimera webbplatsen för bästa prestanda

Optimera webbplatsen eller e-tjänsten så att den kräver så få HTTP-anslutningar som möjligt och levererar så lite data som möjligt.
Bra prestanda är särskilt märkbart över långsamma anslutningar, men det kan också betyda lägre kostnader för användare med exempelvis mobilabonnemang där varje nedladdad megabyte kostar pengar. För er innebär det mindre belastning på servrarna, vilket kan ge lägre kostnader för hårdvara och bandbredd.

Om denna riktlinje Länk hit


Rekommendationer för bättre prestandaLänk hit

  • Kombinera stilmallar och script
  • Välj rätt format för bilder och multimedia
  • Minska datamängden genom att komprimera filer
  • Utnyttja cache-funktionen
  • Använd HTML, CSS och JavaScript rätt

Kombinera stilmallar och scriptLänk hit

Att hämta en webbsida på en webbplats innebär i princip alltid att klienten behöver hämta flera olika resurser från servern: själva HTML-dokumentet, stilmallar, script, bilder, videofilmer med mera. För varje resurs görs ett så kallat HTTP-anrop, och varje sådan anslutning tar tid.

Istället för att leverera flera separata stilmallar, exempelvis en för färger, en för teckensnitt, en för övergripande layout och så vidare är det bättre att kombinera dem till en enda. På så sätt krävs bara en http-anslutning för att hämta dem. Detsamma gäller script. Även bilder kan kombineras till så kallade CSS image sprites. Det passar dock inte för alla typer av bilder, och kräver särskild eftertanke för att inte orsaka tillgänglighetsproblem.

När det gäller generella JavaScript-bibliotek som jQuery och SWFObject är det bättre att länka till den resursen på en central lagringsplats, exempelvis Google Libraries API. Det ökar sannolikheten för att klienten redan har resursen i sin cache, och därmed inte behöver hämta den på nytt. Dessutom minskar det datatrafiken över era servrar.


Välj rätt format för bilder och multimediaLänk hit

Bilder, videofilmer, ljudklipp och liknande står ofta för större delen av datatrafiken från en modern webbplats. Här finns stora prestandavinster att göra, ofta med ganska enkla medel:

  • Välj rätt filformat för bilder, exempelvis JPEG för fotografier      eller PNG för bilder som innehåller färre färger och/eller är transparenta.
  • Använd inte högre kvalitet än nödvändigt; ju högre kvalitet desto större blir filerna.
  • Gör inte bilder eller videofilmer i större dimensioner än nödvändigt.
  • Använd gärna sprites för ”rollovers” via CSS.

Minska datamängden genom att komprimera filerLänk hit

Ett effektivt sätt att minska datamängden mellan servern och klienten är att komprimera den. Ställ in webbservern på att använda gzip-komprimering (via content negotiation, eftersom inte alla klienter har stöd för tekniken) för textbaserade filtyper (HTML-dokument, stilmallar, script).

Även om det tar tid att komprimera och dekomprimera filer tjänar både server och klient på tekniken eftersom det blir mindre data att föra över, vilket vanligen är det som utgör flaskhalsen.


Utnyttja cache-funktionenLänk hit

Cache-hantering är förmodligen ett av de mest missförstådda områdena inom webbutveckling. Rätt använd kan den göra underverk för prestandan. Principen är enkel: se till att klienten inte behöver hämta samma resurs flera gånger, om det inte behövs!

Tänk på att olika typer av resurser kan behöva olika cache-inställningar. Stilmallar och script som sällan förändras kan kanske vara giltiga i 24 timmar. En sida som genereras utifrån dynamisk information i en databas kan antagligen bara vara giltig i ett par minuter medan en statisk artikel kan vara giltig mycket längre (månader).


Använd HTML, CSS och JavaScript rättLänk hit

Använd grundläggande tekniker så som de är avsedda att användas.

  • Märk upp dokumentets struktur och semantik med HTML.
  • Styr presentationen med CSS.
  • Hantera interaktioner med användare med JavaScript.
  • Håll HTML-koden så ren som möjligt. CSS-regler går att koppla till alla HTML-elementtyper. Det är inte nödvändigt att kapsla in ett element i en DIV för att styra presentationen. Använd också så långt som möjligt kontextuella selektorer i CSS i stället för att sätta identiteter eller klasser på HTML-element i onödan.
  • Använd inte JavaScript för sådant som går att sköta med CSS, exempelvis ”rollovers”.

Det är tyvärr fortfarande vanligt att såväl publiceringsverktyg som utvecklarramverk genererar mycket onödig HTML-kod för presentationsändamål. De har även en benägenhet att överdriva användningen av klasser och identiteter i koden. Detta bidrar till att mer information måste överföras vid varje sidvisning.


MätbarhetLänk hit

De flesta moderna webbläsare har inbyggda utvecklarverktyg som kan visa hur lång tid det tar att hämta olika resurser som ingår i en webbsida. Undantaget är Firefox, men till den finns tillägget Yahoo! YSlow som används tillsammans med utvecklartillägget Firebug.

Du kan testa webbsidor utan att installera något verktyg med Google PageSpeed och GTmetrix.


ExempelLänk hit

Av Sveriges kommuner får Köpings kommuns webbplats höga poäng i Google Page Speed (91 av 100 på desktop och 83 av 100 i mobilen)


FördjupningLänk hit



Kommetarer (1)