Den stora guiden till att prestandaoptimera din webbplats

I den här guiden får du lära dig allt du behöver veta om att prestandaoptimera din webbplats med WordPress som fokus.

Prestanda på webben har aldrig varit ett hetare ämne än det är nu. Alla bryr sig om hur snabbt en webbplats laddar. Därför är prestanda ett område vi som webbhotell arbetar extra mycket med.

I den här guiden får du lära dig allt du behöver veta om att prestandaoptimera din webbplats med WordPress som fokus.

  1. Varför är prestanda och laddtider så viktigt?
  2. Hur mäter jag prestandan på min webbplats?
  3. Olika sätt att förbättra prestandan
  4. Använd cache för effektivare laddning
  5. Minifiera och optimera resurser
  6. Optimera bilder och filmer
  7. Placera resurser på ett CDN
  8. Optimera tabellerna i din databas
  9. Optimera webbplatsens kod

Varför är prestanda och laddtider så viktigt?

Vi vet tack vare undersökningar och experiment att vi människor är otåliga. Att vänta är tråkigt, och vi föredrar att slippa.

Företag av alla storlekar har sett ett tydligt samband mellan snabbare webbplats och ökad försäljning och ökat engagemang på webbplatsen. En långsam webbplats å andra sidan gör att du tappar besökare som går vidare. För på internet finns det alltid en konkurrent ett klick bort redo att ta emot din besökare.

I prestandasammanhang får man inte glömma bort Google. Du har säkert redan hört att Google straffar webbplatser som är långsamma så de inte hamnar lika högt upp i sökresultaten. Det stämmer. Exakt hur mycket är en hemlighet, men det spelar roll.

Varför gör Google det? Jo, eftersom vi människor är otåliga. Google vill att den som söker hittar ett bra sökresultat. Annars slutar man använda Google. För att utvärdera vad som är ett bra resultat används en mängd olika kriterier (deras algoritm). Eftersom vi besökare tycker att prestanda är viktigt väger Google in det också.

I slutändan handlar det helt om besökaren. En snabbare webbplats gör det lättare och smidigare för besökaren att hitta rätt information och tillfredsställa sina behov. Därmed blir det viktigt även för dig.

GTMetrix gränssnitt för oderland.se

Hur mäter jag prestandan på min webbplats?

Det är viktigt att använda ett verktyg som gör en modern analys av webbplatsen. Två verktyg som gör bra analyser och som även ger dig rekommendationer är Google Page Speed Insights och GT Metrix.

Rapporterna de ger bygger i grunden på samma teknik, men GT Metrix innehåller lite mer och ger dig fler val i hur mätningen ska utföras, bland annat från vilket land.

Tänk på! När du mäter din prestanda, tänk på att det geografiska avståndet mellan testservern och din webbplats server spelar roll. Om du kan, välj gärna en testserver som är geografiskt nära din huvudsakliga målgrupp.


Olika sätt att förbättra prestandan

Prestandaoptimering är ett stort ämne. Det finns många olika saker att göra. Vissa påverkar mycket, andra påverkar lite. Många bäckar små, som man brukar säga.

Det viktigaste är att hela tiden ha prestanda i bakhuvudet. Att tänka på prestanda hela tiden och arbeta på ett sånt sätt att prestanda är ett kontinuerligt arbete.

Man kan dela in prestandaoptimering i ett antal olika delområden. Några är tekniska och har med webbplatsens kod och uppbyggnad att göra. Andra är redaktörsmässiga som du behöver tänka på när du publicerar nytt innehåll.


1. Använd cache för effektivare laddning

Varje gång en besökare når din webbplats sker en massa saker som du kanske inte tänker på. En massa filer laddas in, innehåll och inställningar hämtas från databasen och visas sedan för besökaren. Samma sak varje gång.

De flesta webbplatser ser likadana ut för alla användare. Besöker jag webbplatsen nu, och du om fem minuter, så är det antagligen samma webbplats.

Cache är dataspråk för tillfällig lagring. Istället för att hämta om all data och göra all databeräkning för varje besökare, sparar systemet det som hämtades första gången i en tillfällig fil. Den tillfälliga filen går mycket snabbare att ladda. Därmed blir webbplatsen också snabbare.

När du uppdaterar en sida behöver de här tillfälliga filerna rensas för att den senaste informationen ska synas. Annars kommer den gamla informationen visas för besökaren.

Det finns olika nivåer av cache. Dels på servernivå, och dels i webbläsaren.

På servernivå hanteras beräkningar och hämtningar från databas och kod. Resultatet sparas till tillfälliga filer på servern, eller i serverns minne.

I webbläsaren sparas resurser som du laddar in för besökaren, som bilder, typsnitt, stilmallar (CSS) och JavaScript. Din webbplats berättar för webbläsaren hur länge du vill att den ska spara innan den hämtar om filen på nytt.

Använder du WordPress hos oss? Läs mer om hur du bäst ställer in cache rent praktiskt här.

Cache eller inte cache?

Löser cache egentligen prestandaproblem? Svaret beror lite på hur du ser på det. Blir webbplatsen snabbare med cache? Definitivt. Löser det grundproblemen som gör den långsam? Nej, inte alls.

En webbplats kan vara långsam av flera olika anledningar. Låt oss titta på två olika exempel:

Stora resurser (bilder, skript m.m.)

Säg att du laddar in en mängd stora bilder, stilmallar, skript eller liknande på din webbplats. Ju större filstorlek på resursen, desto längre tid tar det att ladda ned den.

Med hjälp av cache kan vi se till att webbläsaren sparar filen länge. Första sidladdningen besökaren gör kommer ta lite tid. Men sedan kommer resten gå snabbare.

Den bästa lösningen på problemet hade däremot varit att optimera själva resursen. Gjort bildfilen mindre i filstorlek. Minskat mängden onödig CSS eller JavaScript som laddas in. Kort och gott, optimerat det som faktiskt laddas in och försökt få det så litet som möjligt.

Mycket databeräkning

Säg istället att webbplatsen är tung på datahantering. Kanske är databasen stor, eller så körs komplicerade uträkningar varje gång en sida laddas. Varje gång en besökare når din webbplats sker de här uträkningarna. Ju fler, och ju mer komplicerade, desto långsammare går det.

Med hjälp av en servercache kan de här beräkningarna lagras antingen som temporära filer eller i serverns minne. Istället för att beräkningen sker varje gång, kan besökaren automatiskt få del av en färdigberäknad, statisk sida. Det här går såklart mycket snabbare.

Den bästa lösningen hade däremot varit att optimera själva koden. Behöver det köras så mycket beräkningar? Har jag gjort något i koden som gör det långsammare? Kan jag justera om så att inte så mycket data laddas in?

Cache är ett verktyg bland många

Sammanfattningsvis kan man säga att cache är bra och en självklar del av verktygslådan. Men du behöver ha rätt förväntningar. Cache är inget magiskt som bara löser alla prestandaproblem. Det är ett verktyg för att optimera maximalt.

Du bör alltså sträva efter att webbplatsen ska ladda så bra som möjligt även utan cache. Med cache kommer det bara bli ännu bättre.

Har du en dynamisk webbplats, exempelvis en e-handel?

När du använder cache så sparas i regel en tillfällig fil som ska gälla för alla besökare. Det här behöver du vara vaksam på om du har en dynamisk webbplats. Det kan exempelvis vara en webbshop som har en kundvagn, eller om webbplatsen låter sig logga in.

En feluppsatt cache riskerar i dessa fall att visa fel information för fel användare. Exempelvis kan det gå att komma åt en annan användares konto. Eller se någon annans varukorg. Anledningen är den tillfälliga lagringen av en färdiguträknad webbplats.

Det finns några olika alternativ, beroende lite på hur mycket som är unikt på sidan för besökaren.

Du kan använda dig av Edge Side Includes (eller liknande). Ett sätt att hämta in fragment av webbplatsen som är unika (exempelvis en varukorg). Det här är bra om du har endast en liten del av webbplatsen som är unik, medan resterande del är samma för alla.

Du kan också låta ditt system skapa individuella cache-filer för varje användare. Det här är bra om du användare som ofta besöker din webbplats. Åtminstone flera gånger per dag.

Du kan också välja att strunta i att använda fullständig cache. Den stora vinsten med cache är att du sparar laddtid genom att samma beräknade sida kan presenteras många gånger till flera besökare. Om varje sidladdning är unik och ändrar sig försvinner vinsten.

Vad bör du göra med cache?

För en snabb webbplats bör du göra följande:

  • Se till att statiska resurser cachas i webbläsaren så länge som möjligt.
  • Se till att dynamiska sidor är cachade för att minska antalet gånger hela hämtningar behöver ske
  • Använd en object cache för att snabba upp hämtningar från databasen

2. Minifiera och optimera resurser

Förutom själva databeräkningen så laddar du sannolikt in en mängd olika resurser på din webbplats. Stilmallar (CSS), JavaScript, bilder, typsnitt, spårningspixlar med mera är alla exempel på resurser. Vissa kanske finns på din egen server. Andra på någon annan server.

När du mäter hur lång tid din webbplats tar att ladda är de här resurserna ofta det som tar längst tid. Större filer (i filstorlek) tar längre tid att ladda än mindre. Därför är det viktigt att optimera de resurser du laddar in.

Använder du WordPress hos oss? Läs mer om hur du bäst optimerar resurser rent praktiskt här.

Minimera mängden resurser totalt sett

Du bör alltid sträva efter att minimera mängden resurser du laddar in totalt sett. Ju färre, desto snabbare. Det här bör du ha i bakhuvudet när du installerar tillägg, justerar utseende eller skapar innehåll.

En vanlig prestandatjuv är typsnitt, exempelvis från Google Fonts. Varje extra typsnitt och variant du laddar in påverkar laddtiden. Välj därför gärna få typsnitt (helst inte fler än två) och endast de stilar du verkligen behöver.

Minska mängden externa anrop

Externa resurser är oftast spårningspixlar eller skript som ligger på en annan server än din egen. Att skicka en fråga efter en resurs på en annan server och få den tillbaka tar tid. Hur lång tid beror mycket på hur snabb den andra servern än, och hur långt bort den är rent geografiskt.

En bra tumregel är att minska mängden externa anrop som du gör till de allra mest nödvändiga. De kommer alltid ta mest tid.

Aktivera DNS prefetch på externa anrop

För de externa anrop som du har kvar bör du aktivera så kallad [DNS prefetch]. Förenklat innebär det att din server kollar upp var den kan hitta de externa resurserna så att det går snabbare att ladda in.

Minifiera CSS och JavaScript

När du skriver kod har du en massa tomrum. Mellanslag, blanka rader, kommentarer. Utan detta hade koden varit svår att arbeta med och utveckla. Men för en webbläsare är det helt onödigt. Genom minifiering kan vi automatiskt göra CSS- och JavaScript-filer mindre och därmed snabbare att ladda.

Minska mängden oanvänd CSS och JavaScript

All kod används inte överallt. Genom att bara ladda in den kod som faktiskt används gör vi webbplatsen mindre i storlek, och därmed snabbare. Det här behöver du tänka på när du utvecklar webbplatsen. Ladda inte in ett skript på en sida när det inte behövs.

I många system kan du också göra det automatiskt i samband med minifiering för CSS.

Ladda in bilder och JavaScript fördröjt

När du laddar in resurser kommer webbplatsen att vänta tills allt är inladdat. Oftast behövs däremot inte alla bilder eller JavaScript för att besökaren ska kunna använda webbplatsen.

Genom att ladda in bilder och JavaScript fördröjt säger du till webbläsaren att prioritera det viktiga, för att sedan ladda in resten medan besökaren använder webbplatsen. Det leder till förbättrade laddtider.

För bilder kan du dessutom ladda in en lågupplöst platshållare under tiden de större bilderna laddas in.


3. Optimera bilder och filmer

Media på en webbplats är oftast det som tar absolut längst tid att ladda. Bild och framförallt film är oftast stora filer i relation till allt annat på din webbplats. Samtidigt är media viktigt för att skapa en bra upplevelse.

Det kan låta konstigt, men många bilder kan optimeras mycket utan att få sämre bildkvalitet. Förenklat innebär det att bildfilen rensas på en del data. Kvaliteten blir något sämre, men ofta inte märkbart med ögat. Vanligtvis minskar det filstorleken med mer än 50%.

Många publiceringssystem eller tillägg till system optimerar automatiskt bilder du laddar upp så att du slipper tänka på det. Det är det överlägset smidigaste sättet att arbeta med bildoptimering.

Använder du WordPress hos oss? Läs mer om hur du bäst optimerar bilder och filmer rent praktiskt här.

Använder du filmer på din webbplats, särskilt som bakgrund, behöver du tänka extra mycket på storleken. Film blir snabbt stort och tar då en lång stund att ladda. Det här behöver du göra själv på datorn innan du laddar upp filmen.

Du bör sträva efter en så liten filstorlek som bara är möjligt. Redan över cirka 1-2MB märker du rejäla prestandaförsämringar. Det här kräver att filmen är komprimerad, kort och inte alldeles för stor i dimensioner. Du får alltså skippa full-HD.


4. Placera resurser på ett CDN

Om du har många besökare från olika ställen runt om i världen kan det löna sig att kika på att använda ett Content Delivery Network (CDN) för statiska resurser som bilder, CSS och JavaScript.

Geografiskt avstånd spelar roll även på nätet. Det kommer gå fortare för dig att ansluta till en server om den är nära dig rent geografiskt. För en typisk webbplats märker du däremot ingen större skillnad inom en region. Inom Sverige, eller ens inom Europa är inga större problem. Men med längre avstånd än så kommer laddtiderna öka.

Ett Content Delivery Network (CDN) funkar så att det sprider ut dina resurser på olika servrar runt om i världen. Du i Sverige kommer kanske ladda ned dem från en server i Stockholm. Besökaren från Storbriannien får från en server i London. Besökaren från östra USA kanske från en server i New York.

Eftersom resurserna oftast är det som tar längst tid att ladda ned kan det här öka prestandan på den webbplats en bit.

Behöver jag ett CDN?

Har du en tjänst hos oss på Oderland (våra servrar är i Sverige) och din huvudsakliga målgrupp är i Sverige så kommer ett CDN inte göra någon större skillnad. Är din huvudsakliga målgrupp däremot i USA eller Asien kan det vara något att överväga.

Har du en affärskritisk webbplats med många besökare från runt om Europa kan du också ha viss nytta av en CDN så länge de har många servrar runt om i Europa.

Det finns många bra CDN-lösningar på marknaden som exempelvis Cloudflare eller Amazon AWS. En bra CDN kostar lite pengar per månad och summan beror ofta på hur mycket trafik du har.


5. Optimera tabellerna i din databas

De allra flesta publiceringssystem, däribland WordPress, använder en databas för att lagra innehåll och inställningar. Precis som mycket annat behöver den lite kärlek och underhåll.

Över tid blir en databas fragmenterad. En stor databas som är fragmenterad gör hela webbplatsen långsammare. Genom att optimera dina tabeller genom PhpMyAdmin sorteras datan och gör databasen, och därmed din webbplats, snabbare.

Att optimera tabeller är någonting du med fördel kan göra regelbundet.

Använder du WordPress hos oss? Läs mer om hur du optimerar tabellerna i din databas rent praktiskt här.


6. Optimera webbplatsens kod

Det riktigt avgörande för hur snabbt en webbplats går är hur bra koden är. Kod kan vara mer eller mindre effektivt skriven och därmed köras mer eller mindre snabbt. Allt från hur databasfrågor ställs till hur logiken i koden är strukturerad påverkar hur snabbt webbplatsen går.

För att sammanfatta det mindre tekniskt: Ju fler funktioner du lägger på, desto långsammare kommer det gå eftersom mer logik behöver köras av servern för varje besök.

Använder du WordPress så kan det här innefatta att minska antalet tillägg och undvika att lägga in stora tillägg som gör mer än vad du behöver.