Thursday, August 20, 2009 3:11 PM
Vimpyboy
Snabba upp din sida med deflate/GZip
Det finns en intressat tråd på Aspsidan om hur man komprimerar sin HTML så att de går mycket snabbare att ladda genom att använda deflate eller GZip.
Tråden kan du hitta här.
I tråden tas det upp hur det görs med aspx-filer, men man bör även göra detta med andra filer så som css och js.
Det finns även andra sätt att få ned sidans storlek på, vilket jag tar upp nedan.
CSS Sprites
Ett annat sätt att få ned storleken på är att använda så kallade “CSS Sprites”. Det går ut på att man tar flera bilder (ofta mindre ikoner) och lägger de i samma bild. Sedan använder man CSS för att visa den aktuella bilden. Då det är samma bild som laddas in så behöver man bara göra en request istället för flera.
Exempel på CSS Sprites:
Använd YSlow för Firebug
Alla webbutvecklare måste använda sig utav Firebug när de utvecklar. Det finns developer tools inbyggt i Internet Explorer 8, men Firebug är fortfarande det absolut bästa som finns. Det finns även mängder av tillägg till det, och ett som underlättar när man ska få ned laddningstiden på sidan är YSlow från Yahoo!.
Packa ihop dina js- och css-filer
Js- och css-filer kan ofta bli väldigt stora, samtidigt som de innehåller många tabbar och whitespaces. Genom att plocka bort dessa så kan man få ned filstorleken väldigt mycket. Om man kikar på jQuery så finns det två varianter, en vanlig vilken används för utveckling, och en minimerad (innehåller “min” i filnamnet) vilken kan användas för produktion.
För att få ned storleken på filerna så finns dessa otroligt bra verktyg:
Få ned antalet requests
Något man bör satsa på är att ha så få requests som möjligt. Ett sätt att lösa det på är att använda CSS Sprites, vilket jag nämnde tidigare. Utöver det så kan man även packa ihop sina css- och js-filer så att man har en av varje istället för kanske 10. Ofta så används ett flertal filer för t.ex. jQuery, sidspecifika javascript m.m., men genom att få ihop dessa till en enda fil så blir det färre requests och sidan går snabbare att ladda.
Har du egna tips på hur man kan få sidan snabbare så skriv gärna ned detta!
Filed under: Javascript, HTML, CSS, Prestanda