Något som jag varit besatt av den senaste tiden är att få upp hastigheten på webbplatser. Sedan Google påpekade att de kommer börja ranka sidor efter hastighet så känns det som att det är vettigt att lägga ner lite tid på att undersöka detta.
Ett bra ställe att börja på är Yahoos riktlinjer och “good practices” på deras developer network.
Jag tänkte gå igenom några av de saker som jag tycker är viktigast när det gäller att optimera laddningstider.
Javascript i footern
En tumregel jag har är att javascript ska läggas i sidfoten och stilmallar ska ligga i sidhuvudet. Anledningen till att jag vill ladda Javascript i sidfoten är för att undvika att blockera visningen av innehåll, ni kan läsa mer om detta på “Yahoo: Put Scripts at the Bottom“.
Undvik inline-Javascript och inline-CSS
Låt mig cacha! Detta kan inte betonas nog hårt. Genom att lägga Javascript och CSS externt så får webbläsaren möjlighet att cacha filerna.
Utnyttja Content Delivery Networks (CDN)
Jag har de senaste dagarna testat Autobahn hos Loopia i kombination med WordPress. Det har fungerat väldigt smidigt och jag verkligen glad att jag provade det!
Vill man vara riktigt duktig kan man skapa en s.k. “cookie-free domain” på en separat domän. Det går ut på att du har en helt separat domän för ditt statiska material och då undviker du att skicka redan satta cookies till den domänen (utöver den vanliga domänen). Läs mer om detta på “Yahoo: Use Cookie-free Domains for Components“.
Något jag funderat kring men ännu inte provat särskilt mycket är att använda externa CDN även för ex. jQuery.
Fördelarna är att ifall besökaren besökt en annan webbplats som använder samma CDN som du använder för jQuery-versionen så har den redan laddat ner den och cachat den, så den behöver inte laddas ner på nytt. Nackdelen är att du har lite svårare att kontrollera någon slags “fallback” ifall din CDN ligger nere.
Dra ner på antalet anrop(!)
Med anrop menas antalet bilder, Javascript och CSS -filer som laddas in vid en sidladdning. Jag använder mig av Firebug för att hålla koll på mängden anrop. Jag försöker undvika att ladda för mycket, även om det är svårt att sätta en speciell gräns på vad som är “för mycket”.
Detta brukar kunna bli ett stort problem när man kör många WordPress-tillägg, då väldigt många använder sig av en hel del Javascript och CSS. Är jag riktigt ambitiös så redigerar jag tillägget och rycker ut de filerna som de använder för att slå ihop dem till en enda, detta för att få ner antalet anrop.
En metod för att hålla nere anropen av bilder är att utnyttja CSS-sprites, läs mer i “The Mystery Of CSS Sprites“.
Slutsats
Ta dig tid att läsa på om ämnet och försök göra dina servrar och besökare glada genom att erbjuda korta laddningstider. Bra verktyg att använda är Firebug och YSlow.
Jag har uppdaterat mina resurser en del under de senaste veckorna, ta gärna en titt på dem.
Har ni några tips får ni gärna lämna en kommentar till mig!
