Er is geen CSS ondersteuning.
Wat nu weer?
Lees je al voor jaren dat de gebruikerservaring van bezoekers beter is als je jouw
"plaatjes" laadt voordat je de html op de pagina zet, en nu komen ze (op de dns5)
opeens vertellen dat je dat niet moet doen...(?!).
Klopt als een bus!
Maar enige uitleg is uiteraard op zijn plaats hier.
Het is de bedoeling dat de bezoekers van jouw website zo snel
mogelijk de pagina "voor hun neus" krijgen. En dan bedoel ik met
"zo snel mogelijk" niet 10 seconden of iets in die richting.
Zelfs op een redelijk trage verbinding moet je het toch voor elkaar
zien te krijgen om de html in ongeveer 1½ seconde ingeladen te hebben.
Als je (te) veel afbeeldingen op jouw pagina's hebt, en je gaat die inladen
(pre-loaden) voordat de html aan de beurt is kan het gebeuren dat de bezoekers
geheel niet meer geinteresseerd in jouw prachtige pagina zijn. Je moet niet vergeten
dat vandaag de dag de internet-gebruikers verwend (zeg maar gerust: verpest) zijn
door de razendsnelle toegang die b.v. google hun geeft. Kijk nu naar jezelf:
Wat ga jij denken als opeens een pagina van google er 10 seconden over gaat doen
om een resultaat op het scherm te zetten. Als ik voor mijzelf spreek: Ik haak al
heel snel af als een pagina "koffie staat te malen". Maar als een pagina er in
één klap staat,dan vind ik het helemaal niet erg om het een paar seconden
zonder plaatjes op de pagina te moeten stellen. Ik kan al beginnen met te kijken
wat de strekking van de pagina is en besluiten of ik verder wil lezen of niet.
Voor de gebruikers-ervaring is het dus beter dat de pagina er ogenblikkelijk staat,
dan als de pagina als één geheel tegelijkertijd op het scherm wordt
geplaatst.
Dus wat te doen?
Zorg er voor dat de html er zo snel als mogelijk "staat". Met de html bedoel ik natuurlijk de lettertjes en alles wat niet graphisch is... Als de html er heel erg lang over doet om op het scherm te komen, stop dan met het lezen van deze pagina en ga eerst proberen om het voor elkaar te krijgen om binnen MAXIMAAL 4½ seconden een pagina op het scherm te "toveren" (zonder plaatjes). Als je een professionele webmaster bent, lees dan voor de 4½ seconden: 1½ seconde. Geen excuses dat het onmogelijk is. Het is gewoon heel goed mogelijk... Kwestie van keuzes maken...
Dan komen nu de plaatjes aan de beurt. Het is zaak dat als de pagina er staat,
de plaatjes zo snel als mogelijk de "lege ruimten" gaan opvullen. Je moet er
voor zorgen dat niet de pagina (de tekst hierop) gaat verschuiven omdat er plaatjes
ingeladen worden: de ruimte moet je al gereserveerd hebben.
In de brocode van veel pagina's van de dns5 (waar plaatjes op staan) kan je de
hieronderstaande code vinden:
<script type="text/javascript">
function laadplaatje(){
document.getElementById("img1").src="afbeelding-1.jpg";
document.getElementById("img2").src="afbeelding-2.jpg";
document.getElementById("img3").src="afbeelding-3.jpg";}
setTimeout(function(){laadplaatje();},200);
</script>
en een "img" ziet er op de pagina dan meestal zo uit:
<img id="img1" height="961" width="652" alt="1" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' />
Het werkt als volgt: Eerst wordt tegelijkerijd met de html een base64 "blanco png" van 1 px
op de plaats van de img gezet, met de werkelijke hoogte en breedte van de afbeelding. Als de
pagina geheel geladen is v.w.b. de html wordt er met een kleine vertraging van (in dit geval)
200 milliseconde de definitieve afbeelding op de plaats van de "blanco png" gezet. Als alles
goed gedaan is zal de bezoeker in de meeste gevallen nog geen-eens door hebben dat er een vertraging
was (scroll straks maar eens verder naar beneden om te kijken wat deze pagina heeft ingeladen...).
Deze procedure is beschreven in dit performance-script. Lees daar maar verder hoe je alles
kan doen.
cache 01-09-2010