Optimering av laddningstiden för broken8.se

Laddningstiden för broken8.se var inte dåligt ens innan jag optimerade den. Det betyder dock inte att sidan kan förtjäna lite optimering, eller att det kan vara roligt att försöka trimma laddningsiden.

Kombinera och minimera javascript och css filer.

Det första steget i optimeringen var att kombinera alla javascript filer till en fil samt att se till att den hamnar i slutet av sidan istället för i . Yahoo! skriver i sin artikel Best Practices for Speeding Up Your Web Site att en viktig del av optimeringen är att kombinera filer. Att samtidigt minimera filerna sparar ännu mer tid.

Men att ha all sin javascript kod i samma fil gör det jobbigare att arbeta och om man dessutom vill ha koden minimerad blir det ohållbart. Därför har ett antal olika lösningar för att kombinera och minifiera filer "on the fly" dykt upp. Min favoritlösning är minify. Minify kan kombinera javascript och css filer samt minimera javascript, css och html. För att göra det ännu enklare för mig skrev jag ihop ett litet plugin för Habari som tar bort alla javascript och css filer som lagts till kör dem igenom minify och sedan sparar ut dem som minifierade filer.

Minification.

Minification kombinerar och minifierar javascript, css och html. Genom att samtidigt se till att javascript laddas in sist på sidan upplevs laddningen ännu snabbare. En sida som är bra konstruerad behöver inte javascript för att fungera och det är därför helt ok att ladda in dessa sist.

Imagesprites och jpeg kvalité

Yahoo! föreslår även att man ska optimera sin bilder. Det finns två sätt att förbättra laddningstiden, kombinera flera bilder i en större bild samt att ta ner kvalitén på bilderna och ta bort onödig information i dem. Då broken8.se enbart använder två bilder och dessa av väldigt olika typ kändes det inte vettigt att kombinera dessa. Istället riktade jag in mig på att ta ner kvalitén på bakgrundsbilden och det rejält. Den ursprungliga bilden var en jpeg bild som vägde 569 KB och det var på tok för mycket. Genom att försämra kvalitén från 100 till 40 gick filstorleken ner till 49 KB. Elva gånger mindre än den ursprungliga filen! Ok, att försämra kvalitén på bakgrunden så mycket resulterade i en bild med ganska tydliga jpeg artifakter, det är mycket möjligt att jag i framtiden förbättrar kvalitén något.

Tänk inte enbart på den faktiskt laddningstiden.

Även om den faktiskt laddningstiden kan snabbas upp när man kombinerar filer betyder det inte alltid att sidan upplevs snabbare. Att till exempel använda base64 encoding för att inkludera bilder i cssfilen resulterar i en större css fil. Det här innebär att man sparar in en eller kanske ett par förfrågningar men får istället en uppsjö negativa konsekvenser. Data URIs make CSS sprites obsolete tar upp fördelarna med base64 lösningen men ett antal nackdelar diskuteras även i kommentarerna.

Nackdelar med base64 bilder - som jag ser det.

• CSS filens storlek ökar, cssfilen behövs för att kunna visa sidan och ju längre tid det tar för den att ladda desto längre tid tar det innan sidan börjar visas.
• I CSS:en deklarerar man alla bilder som siten behöver. Det betyder dock inte att alla dessa bilder används på varje sida. Om en bild inte behövs på en sida kommer den heller inte att laddas. Det betyder att om du vet att visa bilder enbart kommer att användas på em speciell sida kan du ha en separat image sprite för den sidan. På så sätt kan man spara in många KB för en normal användare och ända kostnaden blir en extra bildinladdning.
• I Sverige är vi bortskämda med snabbt internet, snabba datorer och stora skärmar men det betyder inte att alla har dessa förmåner. Det finns många situationer där man inte kan eller vill visa grafik. Om man inkluderar bilderna i CSS:en tvingar man användaren att ladda dem. Min åsikt är att en eller två extra filladningar är bättre än att tvinga användaren att ladda allt.

Resultatet