CSS sprites

Er is een onderzoek geweest dat sites met veel afbeeldingen (en daarbij tellen zeker ook achtergronden van buttons en hun mouseovers) een groot deel van de laadtijd besteden aan het 1 voor 1 laden van die afbeeldingen.
De browser haalt namelijk de html op, en komt er dan in de CSS (background: url(‘mouse.gif’) no-repeat;) of de HTML zoals de image source (<img src=”mouse.gif”) achter dat er nog een plaatje van de server afgehaald moet worden.
Bij veel afbeeldingen loopt dat aantal requests snel op, en dat geeft wel een ervaring aan de gebruiker dat er iets aan het gebeuren is, maar kan al met al wel tot 50% van de laadtijd extra kosten.
cssspriteVroeger (in internet termen dan) was het wel een must om de gebruiker te laten zien dat de pagina iets aan het doen is, maar aangezien de meeste 28K8 modems er wel zo’n beetje uit zijn, kun je ook het volgende doen:
Je neemt in plaats van allemaal kleine afbeeldingen 1 grote afbeelding, en je laat alleen dat stukje van de afbeelding zien wat je op dat moment nodig hebt.
Als je de eerste aanroep van de afbeelding bovenin je html zet, dan zijn in de rest van de pagina alle afbeeldingen al direct, zonder nieuw request, beschikbaar.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s