Spritebaker CSS booster

Een eenvoudige online tool om je CSS bestand en alle externe media in één bestand te “bakken” met base64 encoded datasets. In combinatie met gzip-compression zou je website een enorme snelheidsboost krijgen. Het idee is namelijk dat je alle kleine bestandjes die normaal los geladen worden door je browser samenbrengt in één bestand. Dit scheelt al snel tientallen requests. In theorie zijn die losse request namelijk langer bezig met het opvragen van de server, het bestand en het downloaden dan dat je dit samenvoegt. Als met een tool als Firebug de Net explorer pakt zie je snel hoe een request is opgebouwd en dan blijkt inderdaad dat vaak een deel van de tijd bezig is met het leggen van een verbinding met de server.

Nooit kun je iets mooier testen dan met je eigen site. Even snel de Webparking website voorzien van een gebakken-css bestand om te kijken wat de verschillen zijn. Omdat de logica je zegt dat gebakken-css altijd winst is ging ik uit van prachtige resultaten. Helaas… Het viel allemaal iets tegen.

Even wat testcijfers (drie runs per keer);
Normaal  met browser cache uit:
24 server requests (1.22 s, 1.07 s, 1.22 s)

Normaal met browser cache aan:
2 server requests (731 ms, 739 ms, 637 ms)

Gebakken CSS met browser cache uit:
11 server requests (1.4 s, 1.25 s, 1.41 s)

Gebakken CSS met browser cache aan:
2 server requests (998 ms, 892 ms, 913 ms)

Nu is natuurlijk de vraag. Waar zit dit negatieve verschil toch in. Leuk is in iedere geval om te zien dat het aantal requests met 50% afneemt in de gebakken versie. Logisch maar toch leuk. Alleen het lijkt geen echte tijdswinst te geven. In iedere geval zeker niet voldoende om het waard te maken meerdere styles naast elkaar te draaien. Niet alle browsers  hebben namelijk even goede ondersteuning voor data URI’s (de base64 geëncodeerde blokken in de CSS).

Geef een reactie

Jouw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *