Vi tenderar att fästa mycket vikt vid design, funktionalitet och innehåll när vi bygger webbplatser, men tittar vi på besökarupplevelse finns det en faktor som är viktigare än någon annan: hastighet. Besökarna är inte tålmodiga. För varje extra sekund av laddningstid fördubblas risken att besökaren ger upp och besöker något annat istället. Och det är inte bara besökarna som räknar sekunderna: Google och andra sökmotorer fäster stor vikt vid laddningstider.
Tidigare under den här veckan tog jag en lång och hård titt på WordPressguider.se för att avgöra hur jag kan göra den snabbare, lättare och smidigare. Jag passade samtidigt på att dokumentera varje steg jag gick igenom för den här fallstudien. Jag kommer attt beskriva vad jag gjorde, vilken effekt det hade och berätta hur du själv kan anpassa din WordPress-webbplats så att den laddar snabbare.
Utgångspunkten
Under arbetets gång använde jag Pingdoms hastighetstest för att analysera WPG:s laddningstider. När jag körde testet första gången fick jag följande resultat:
- Laddningstid: 4,36s
- Sidans storlek: 1,9 Mb
- Antal förfrågningar: 111
”Laddningstid” och ”Sidans storlek” kräver ingen närmare förklaring. ”Antal förfrågningar” mäter hur många filer som hämtades när sidan laddades. Ju fler förfrågningar, desto långsammare laddar sidan.
Jämfört med många webbplatser på webben är det här inte en värdelös utgångspunkt: den genomsnittliga storleken på en webbsida är ungefär 1,7 Mb (källa). Jag visste dock att jag med ganska enkla medel skulle kunna minska alla dessa värden betydligt.
Vad jag gjorde
Se över tillägg
Jag har alltid varit restriktiv med hur många tillägg jag installerar på mina webbplatser, både av hastighet- och säkerhetsskäl. När jag påbörjade optimeringsarbetet var fem tillägg installerade på WPG:
- Akismet – skyddar mot kommentarspam.
- All in One SEO – optimerar webbplatsen för sökmotorer.
- XML Sitemaps – genererar en webbplatskarta för sökmotorer.
- Jetpack WP Security, Backup, Speed, & Growth – låter mig använda Jetpacks statistikverktyg.
- No Self Pings – förhindrar WordPress från att registrera en pingback när jag länkar från ett WPG-inlägg till ett annat.
Fem tillägg är ett rimligt antal för en webbplats av WPG:s storlek, och det finns inget tillägg i listan som enkelt kan uppoffras. Det antalet – fem – är dock en sanning med modifikation. Jetpack räknas bara som ett tillägg, men i det tillägget ingår ett stort antal ”moduler” som är aktiverade som standard, oavsett om de används eller inte. När dessa moduler är aktiverade läggs flera CSS och Javascript-filer till på webbplatsen, och dessa filer ökar både sidans storlek och antalet förfrågningar.
De enda Jetpack-moduler jag använder är Subscriptions (som låter besökare prenumera på kommentarer till ett inlägg) och WordPress.com Stats, så jag avaktiverade alla andra moduler och sparade inställningarna. När jag körde Pingdoms hastighetstest igen hade sidans storlek minskat med ungefär 100 kb och den gjorde ungefär tio färre förfrågningar. Framsteg.
Ikontypsnitt över ikoner
Nästa steg var något som jag har haft på att göra-listan väldigt länge. När man ska använda ikoner i en webbdesign finns det två tillvägagångssätt:
- Spara ikonerna som bildfiler och ladda in varje ikon individuellt. Fördelar: Det är snabbt och enkelt. Lämpligt om man bara använder ett fåtal ikoner. Nackdelar: Om man vill ha en ikon i flera olika färger och storlekar måste man göra en separat fil för varje färg/storlek. Man måste också göra högupplösta versioner av bilderna för enheter med retina-skärmar. Varje enskild version av ikonen innebär att sidan måste göra en till förfrågning.
- Använd ett ikontypsnitt – ett typsnitt som innehåller ikoner istället för bokstäver, siffror och andra tecken. Fördelar: Man kan ändra färger och storlekar direkt i CSS-koden. Ikonerna är automatiskt anpassade för retina-skärmar. Bra om man har många ikoner som förekommer i många olika varianter. Nackdelar: Äldre webbläsare har begränsat stöd för ikontypsnitt.
Med tanke på mängden ikoner som används på WPG visste jag att ett ikontypsnitt var den mer lämpliga av de två metoderna. Att implementera ikontypsnittet tog tid, men det var värt det. När alla bilderna var utbytta hade sidans storlek minskat med ytterligare 100 kb, och antalet förfrågningar låg nu på 97 – en ganska rejäl minskning. Att WPG:s ikoner nu också är blixtskarpa på alla enheter, oavsett upplösning, är en fin bonus.
Se över bildformat och -storlekar
Som jag skrev ovan är den genomsnittliga storleken på webbplatser 1,7 Mb. Den siffran har ökat stadigt under de senaste åren, och mycket av tillväxten kommer från bilder. Mer än 60 procent – 1030 Kb – av den genomsnittliga webbplatsens filstorlek utgörs av bilder. Genom att vara selektiv med var och hur man använder bilder kan man banta den siffran betydligt.
| Teknik | 2012 | 2013 | Ökning |
|---|---|---|---|
| HTML | 54 Kb | 57 Kb | +6% |
| CSS | 35 Kb | 46 Kb | +31% |
| JavaScript | 211 Kb | 276 Kb | +31% |
| Bilder | 793 Kb | 1030 Kb | +30% |
| Flash | 92 Kb | 87 Kb | -5% |
| Annat | 101 Kb | 205 Kb | +103% |
| Totalt | 1286 Kb | 1701 Kb | +32% |
Många av artikelbilderna på WPG har en väldigt avskalad design. Det var inte bara ett estetiskt val: det formspråket gjorde att jag kunde spara filerna i PNG-formatet, som både är skarpare än det vanligare JPEG-formatet och dessutom kan sparas i mindre filstorlekar. PNG-versionen av bilden för artikeln om barnteman var till exempel bara fem kilobyte stor, trots en ganska väl tilltagen upplösning på 851×500 pixlar. Det är inte illa alls.
Trots hög upplösning vägs den här bilden in på bara 5 kb. PNG-formatet at work.
Problemet med att använda PNG-filer är dock att WordPress är horribelt dåligt på att komprimera bilder i det formatet. Arkivstorleken av samma bild, som WordPress beskärde till 600×387 pixlar, var hela 70 kb stor – 1400% större än den fullstora versionen. Varje enskild arkivsida innehåller tio sådana bilder. Det blir totalt uppemot 700 kb. Här fanns det mycket fett att skära bort. Genom att ändra filformatet på bilderna till JPEG-formatet, som WordPress är lite mer bekvämt med, sparade jag 30-40 kb på varje enskild arkivbild. Multiplicera med tio och du får en markant skillnad i filstorlek per arkivsida.
Filformatet var dock bara en del av problemet. Många av bilderna hade en högre upplösning än nödvändigt. Arkivbilderna behövde egentligen inte vara 600×386 pixlar, så jag ändrade deras storlek till 403×237 pixlar. Bilderna kommer att bli mindre skarpa på vissa mobila enheter, men det är en rimlig uppoffring i utbyte mot mindre sidstorlek och kortare laddningstider för alla besökare. De mindre bildformaten gjorde att jag sparade ytterligare 10-20 kb per arkivbild.
När jag körde Pingdom-testet igen var WPG:s sidstorlek bara 1,1 Mb – 700 kb mindre än tidigare. Genom att optimera bilderna lyckades jag alltså minska sidans storlek med över 30 procent. Det är en dramatisk skillnad.
Se över typsnitt
Den genomsnittliga storleken på webbplatser har ökat kraftigt de senaste åren, och en starkt bidragande orsak är att allt fler webbplatser laddar in typsnitt från webbtjänster som Google Fonts. WordPressguider.se är en av dem. Den använder Typekit till att ladda in Adelle för rubriker och Proxima Nova för brödtext.
Jag försökte vara restriktiv i hur många vikter jag inkluderade när jag designade WPG, och typsnitten vägs därför in på 220 kilobyte. Det är ganska mycket, men det är en siffra som jag kan leva med. Jag skulle kunna spara runt 150 kilobyte genom att byta ut brödtexttypsnittet Proxima Nova mot ett standardtypsnitt som Helvetica eller Arial, men riktigt så långt är jag inte villig att gå i dagsläget. Det kan dock vara bra att ha i åtanke för framtiden.
WP Super Cache
Jetpack-optimeringen och ikontypsnittet minskade antalet förfrågningar, och bildoptimeringarna bantade ned sidans filstorlek. WP Super Cache är kronan på verket. WP Super Cache är ett tillägg som tar en dynamisk WordPress-webbplats och producerar statiska HTML-filer av dess innehåll. När en besökare visar webbplatsen får hen se den statiska HTML-filen, vilket innebär att WordPress inte behöver köra tidskrävande PHP-funktioner för varje enskild besökare. Resultat: Allt på webbplatsen laddar snabbare. Magiskt.
WP Super Cache är dessutom busenkelt att använda. Du behöver bara installera tillägget, bocka för ”Aktivera cachning” och spara inställningarna. Det är gjort på fem minuter, och skillnaden i hastighet är uppenbar.
Slutresultatet
När jag började jobba på att optimera WordPressguider.se gav Pingdoms hastighetsverktyg följande resultat:
- Laddningstid: 4,36s
- Sidans storlek: 1,9 Mb
- Antal förfrågningar: 111
Efter att jag har gått igenom stegen ovan får jag följande resultat:
- Laddningstid: 1,97s
- Sidans storlek: 1,1 Mb
- Antal förfrågningar: 86
Två sekunder låter kanske inte som en särskilt stor förbättring, men det kan utgöra skillnaden mellan en nedstängd webbläsarflik och ett annonsklick. Inte ett dåligt resultat för någon timmes arbete. Jag hoppas att den här guiden har visat hur man med ganska enkla medel kan hålla nere laddningstiderna och sidstorleken på sin WordPress-webbplats.
26 april 2018 kl. 20:55
Jag vill rekommendera tillägget Shortpixel Image Optimizer för automatisk komprimering av bilder i WordPress. Riktigt bra komprimering utan att förlora kvalité, plus att den också kan omvandla png till webp-bilder, som har bättre kompression än jpeg. Kan minska storleken med upp till 90% med i princip bibehållen kvalité.