Webdesign tips voor minder page loads

Voordat ik projectleider werd hield ik mij bezig met CSS. Ik probeerde altijd om zo efficient mogelijk een design in CSS te ontwikkelen. Soms houd ik me er nog wel eens mee bezig en nu was ik benieuwd wat je nog meer kunt doen om HTTP-requests te verlagen. Hierbij een aantal tips:

CSS-sprites
Nu gebruiken wij dit regelmatig bij Zest voor de navigatie, wanneer het design er zich daarvoor leent. CSS-sprites is ook handig voor andere onderdelen van de site, denk maar aan header foto's, iconen e.d. Het vergt wel wat meer CSS-tijd, maar zorgt er ook voor dat er bij elk design kritisch naar de uitvoer wordt gekeken. Zie voor meer info over CSS sprites: http://css-tricks.com/css-sprites/

Afbeeldingen optimaliseren
Er zijn aardig wat tools beschikbaar om afbeeldingen te optimaliseren. Met deze tools kun je kijken hoe groot het bestand zal zijn wanneer die in een bepaald formaat wordt opgeslagen, inclusief dataverlies. Je kiest hiermee het formaat waarbij het kwaliteitsverlies acceptabel is met de kleinst mogelijke bestandsgrootte. Onder ander heeft Photoshop zo'n tool.

Bij gebruik van CSS-sprites wordt aangeraden om de afbeeldingen horizontaal te plaatsen met zo min mogelijk tussenruimte, ipv verticaal. Dit resulteert in een kleinere bestandsgrootte.

CSS-code
Het verwijderen van onnodige karakters leidt ook tot verbetering van de laadtijd. Hierbij kun je denken aan verwijderen van commentaar, onnodige spaties, nieuwe regels, witregels en tabs.

Voor het bovenstaande denk ik dat je een middenweg kunt vinden. Heb je een complex design met veel css code dan is de opmaak hiervan wel degelijk bruikbaar voor de leesbaarheid en het snel vinden van css classes. Bij gebruik van commentaar raad ik wel aan om deze zo kort maar begrijpelijk mogelijk te houden, en alleen gebruiken wanneer bepaalde css code uitleg nodig heeft. Dit maakt het vriendelijker voor andere collega's of derden die de code moeten wijzigen.

Naast de bovenstaande tips zijn er meerdere tips te vinden voor caching en site optimalisatie op:

• http://developer.yahoo.com/performance/rules.html
• Voor Plone: http://plone.org/documentation/tutorial/optimizing-plone

Web Analyse tools
Ok, dit waren de optimalisatie tips, maar hoe kun je nu testen wat je page load daadwerkelijk is? Er zijn genoeg analyseprogramma's die je kunt kopen of gratis kan downloaden. Zelf heb ik de voorkeur voor YSLOW, een add-on product voor Firefox.

Yslow analyseert je pagina en geeft informatie welke onderdelen van de site geoptimaliseerd kunnen worden, inclusief links naar webpagina's met meer info betreft het onderwerp. De statistieken is een duidelijk vormgegeven pie chart die informatie geeft over het aantal HTTP-requests, totale grootte van de http-requests en een samenvattend overzicht welke onderdelen voor de http-request zorgen. Programmeurs, systeembeheerders, webdesigners en CSS-specialisten kunnen hier hun voordeel mee doen.