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.
Vroeger (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.
CSS
CSS sandbox
Deze pagina kwam ik ineens weer tegen toen ik lekker aan het CSS’en was (alhoewel, voor mij heeft CSS toch vaak wel een hoog oh, zit dat zo gehalte).
Hij heeft als naam de ‘CSS sandbox’. Hij is vooral als je je hierin herkent:
“Hoe zit het nou ook alweer met die property, moet ik nou overflow:auto of overflow:scroll gebruiken, en hoe werkt de background-repeat nou ook alweer? Even aanpassen, Save, reload pagina en ja, of nee, zo is het wel / niet goed….”.
Dan toont de CSS sandbox pagina namelijk een stuk tekst in een DIV waar je al deze propertys met een muisklik kunt aanpassen en direct kunt zien hoe het resultaat is.
Hiernaast zie je een deel van de propertys die je kunt aanpassen. De geselecteerde opties zijn rood, en klik je op een andere waarde dan wordt deze direct toegepast.
IE6 / IE7 / FF CSS hacks no longer needed
I was developing a page, and it turned out to be quite a simple one. So i thought: “What the heck, i’m gonna style it with a stylesheet as much as possible”. Oh my, what a trouble i i turned myself into.
Just started, i remembered a book i once read (CSS: The Definitive Guide) and what my overall conclusion then was: don’t get started: you’ll wind up crazy supporting all browsers with all those hacks.
But as time goes by, you forget, and new possibilities arise. So yes, these days there are differences between browsers in interpreting CSS, but providing different styles for the mainstream browsers (which are IE6, IE7 and Firefox right now), is as easy as this:
<head>
<link href=”affinno.css” rel=”stylesheet” type=”text/css” media=”screen” />
<!–[if IE 6]> <link href=”affinnoie6.css” rel=”stylesheet” type=”text/css” media=”screen” /> <![endif]–>
<!–[if IE 7]> <link href=”affinnoie7.css” rel=”stylesheet” type=”text/css” media=”screen” /> <![endif]–>
</head>
(funny to notice that in my case, the ‘normal’ stylesheet is for FireFox)
And the good part is: you only have to supply the styles you want to override in the IE stylesheets.
An example: you have a <H2> tag with a font-size of ‘medium’, which shows up good in FireFox but not so good in IE. Just put the IE variant of the <H2> tag in the IE stylesheet, and you’re done. It picks up every other style from the main stylesheet, and overrides the <H2> style with the special IE one.
Affinno's blog 