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!
2 replies on “Speed me up, Scotty!”
Bra sammanfattning, kanske en liten komplettering:
Man inte glömma att antalet bilder spelar stor roll, då liksom CSS och Javascript-filer räknas som anrop. Om man använder WP:s smiles riktigt flitigt kan det slöa ned sidan ordentligt. Slår man ihop alla bilder till ett par större bilder och använder CSS för att plocka fram varje enskild motiv, minskar man antalet anrop. Dessutom sparar man ett par bytes på att slå ihop bilerna. Dock bör man tänka på att bilderna får inte bli förstora. En bild på 100 mb kan för några ta evigheter att ladda in. Heller 10 mb * 10 än en stor.
Tack Eric, jag tror att ett förtydligande är på sin plats! Ska komplettera inlägget imorgon.
CSS-sprites är riktigt användbart dessutom, brukar använda det för ikoner och navigationer vid active/hover-effekter