Archief voor de categorie ‘Webdesign’


Woensdag, Mei 20, 2009

HTTP Requests

requestsNog een heel belangrijk item op de optimalisatie check-list is het aantal HTTP Requests of Objecten. Met een HTTP Request wordt een connectie naar een object bedoeld wat los staat van de HTML code. Dit kan bijvoorbeeld een CSS bestand zijn, maar ook afbeeldingen of externe JavaScripts vallen hieronder. Eigenlijk dus alles wat buiten je HTML bestand valt en “ge-include” wordt in je code. HTTP Requests werken als een bottleneck voor alle browsers vandaag de dag. Hoe meer objecten, hoe slomer je site wordt.

Dit komt omdat browsers de beperking hebben maximaal 3 objecten (1 object per connectie) gelijktijdig te kunnen downloaden. Dus iedere keer als er een JavaScript, CSS file of Image moet worden gedownload op je website wordt er hiervoor 1 van de 3 beschikbare connecties gebruikt. Hoe minder objecten (HTTP Request), hoe sneller je website zal laden. Denk hier dus aan bij het bouwen van je website, want deze regel geldt ook voor images die in CSS gebruikt worden. Iedere keer als je dus een background image gebruikt zul je je dus af moeten vragen of je niet beter met HTML kleuren kan werken. (more…)

Zaterdag, Februari 7, 2009

Website Performance Optimalisatie - GZIP / HTTP Compression

Het belangrijkste (maar eenvoudigste) om te performance mee te winnen is HTTP Compression. Onthoudt deze term! HTTP COMPRESSION.

HTTP Compresssion
HTTP Compressie(Ja ik zorg echt dat je het onthoud). Je kunt HTTP Compression zien als het zippen van je website.

HTTP Compression zorgt er dus voor dat op de webserver je site als het ware wordt ingepakt en in de browser weer wordt uitgepakt. Don’t worry about browser compatibilty, alle gangbare browsers ondersteunen dit tegenwoordig. Over het algemeen heb je hier vaak 60 tot 80% snelheidswinst mee! Dat lees je inderdaad goed ja, 60 tot 80% door het installeren van een simpele add-on voor je webserver. Dit betekent in kilobytes dat als je homepage totaal 496kb is, dat de totale downloadgrootte wordt teruggebracht naar ergens tussen de 80 en 160kb (in het waarschijnlijke geval). De grootte van je homepage heeft natuurlijk verschillende factoren: HTML, CSS, JavaScript (extern), Media zoals Flash of Movies en natuurlijk de Afbeeldingen.

Dit is een hele snelle winst die je pakt als je ad-hoc problemen op moet gaan lossen. Als HTTP Compression niet aanstaat, meteen aanzetten dus! HTTP Compressie werkt in principe op alle text-based bestanden. Dit zijn dus bijvoorbeeld: HTML, XML, JavaScript en CSS files.

Compressie wordt geregeld door een klein programmaatje wat op de server meedraait met de webserver software. Bij Apache als gratis onderdeel genaamd, MOD_GZIP en vanaf Internet Information Services 7 ook onderdeel van de webservervice. Gebruikers van IIS6 kunnen heel moeilijk doen, makkelijk doen om HTTP Compression te installeren op een Windows Server. Je kunt ook een third party tool (Port80 ZipEnable gebruiken als je meerdere sites beheerd en niet alles wil comprimeren.

Tip 1
Mocht je nou niet de luxe hebben van een dedicated server en heb je een beetje een onflexibele hosting provider (stel ze bieden geen MOD_GZIP ondersteuning), dan heb ik voor de PHP-ers goed nieuws! Gebruikers van PHP kunnen de MOD_GZIP van Apache omzijlen door rechtstreeks in PHP gebruik te maken van HTTP Compression. Je kunt dit eenvoudig doen door de volgende regel bovenaan je pagina toe te voegen: <? ob_start(”ob_gzhandler”); ?>.

Tip 2
Dan denk je natuurlijk: Chips, nu kan ik alleen maar PHP files comprimeren… what about my CSS en JS bestanden? Die kun je heel simpel renamen naar style.php en scripts.php en op dezelfde manier aanroepen in je <head>. Je voegt dan de ob_start regel hierboven toe in je css en script files (let op de <? en ?> tags!). Voorbeeld:

<link href=”style.php” rel=”stylesheet” type=”text/css”>
<script src=”scripts.php” type=”text/javascript”></script>

Succes met de need for speed!

Donderdag, Januari 29, 2009

Website Performance Optimalisatie - Tools

Website OptimalisatieWebsite Optimalisatie, maar dan met praktische tips waar je wat aan hebt in plaats van die blabla-adviezen van mensen die alleen de theorie kennen. Dit is de eerste uit een reeks artikelen, ik hoop dat je er wat aan hebt.

Vandaag de dag zijn er diverse manieren om een website te analyseren, je kunt hierbij denken aan programmatuur welke kijkt hoe groot je website is en je vervolgens advies geeft op welke gebieden verbeteringen moet maken. Naast analyse tools zijn er bijvoorbeeld ook code-crunchers/optimizers (deze maken je code effectiever of comprimeren deze), de image optimizers (deze maken je images compacter) en de geintegreerde tools voor je webserver (zoals Apache Bench die de complete traffic bekijkt en in staat is om stress tests uit te voeren).

Ikzelf maak vaak gebruik van browser-tools om een site te analyseren zodat je snel een beeld krijgt van de bottlenecks in de website (dit is hoofdzakelijk grafisch en codetechnisch). (more…)

Zondag, Januari 25, 2009

Spam 2.0?

Zelfs de e-mail spammers stappen over op Glossy-Apple-achtige-Web 2.0-graphics ;) Deze kreeg ik afgelopen weekend binnen en vond ik toch wel een vermelding waard eigenlijk!

Spam 2.0

Donderdag, November 20, 2008

Glossy Plastic Buttons

Even een korte tutorial met een handigheidje waar ik achter ben gekomen tijdens het ontwerpen van een set buttons voor een back-office interface.

Wat ontwerpers vaak doen ik vaak doe is een background image maken voor een button. Deze image werd dan ingesteld als achtergrond van de <input> button met een repeat-x parameter (CSS) waardoor de image wordt meegerekt over de breedte van de button.

Mijn ervaring met buttons is dat ze vaak moeten wisselen van kleur, waardoor je dus meerdere images voor meerdere buttons in zal moeten laden, wat weer ten koste gaat van de performance van je site. Hier komt nog bij dat kleurinformatie vaak de bepalende factor is bij de grootte (in bytes) van images. Hoe meer verschillende kleuren, hoe meer kleurinformatie er opgeslagen moet worden, hoe groter de image zal worden, dit geldt in het bijzonder voor gradients bijvoorbeeld. Bij dit artikel gaat het vooral om recyclability van je HTML/CSS en images. Voor performance tips verwijs ik je naar dit artikel. (more…)

Maandag, September 8, 2008

Google Optimizer Code Examples

Zoals beloofd, hierbij de code-voorbeelden hoe je een test op moet zetten in Google Optimizer zodat je dus toch Dynamische code kan gebruiken. Als je de uitleg van Google zelf mag geloven dan kun je prima met dynamische inhoud werken, alleen geven ze enkel een voorbeeld met plaatjes:

“Het sectiescript moet worden bijgewerkt zodat dit overweg kan met de dynamische inhoud. Het doel van dit scenario is een HTML-afbeeldingscode te maken met de betreffende bestandsnaam. Zoals beschreven in het gedeelte Voordat u begint, moeten de afbeeldingsbestanden worden benoemd volgens een schema waarbij de drie afbeeldingstypen van elkaar worden onderscheiden, zoals P1234.jpg, P1234_studio.jpg en P1234_actief.jpgMeer

Aldus Google. Het legt dus uit hoe je een plaatje kunt switchen d.m.v. Javascript. Echter geven ze geen oplossing voor dynamische teksten (ze schrijven het image type weg met document.write) en al helemaal multi-language content wordt - zoals eerder beschreven - een probleem. Hier de oplossing, het verdient zeker geen schoonheidsprijs, maar het zorgt dat je multivariate testing met dynamic content kan laten werken. (more…)

Zaterdag, September 6, 2008

Google Optimizer en Dynamische Websites

Als je een website wil gaan optimaliseren, zul je bepaalde tests moeten gaan uitvoeren. Je zou bijvoorbeeld willen weten welke pagina-indeling de beste conversie oplevert. Ook zou je je af kunnen vragen of bepaalde headgroottes, afbeeldingen of teksten kunnen leiden tot meer conversies (een conversie kan een registratie, aankoop of aanvraag zijn bijvoorbeeld). Bij de ene test zal een simpele A/B test volstaan, maar bij andere gevallen zul je gebruik moeten maken van multivariate testing. Er zijn diverse tools te huur of te koop, maar dan ben je vele duizenden euro’s (vaak per maand ook nog) kwijt. Gelukkig is er Google Site Optimizer: een gratis A/B en Multivariate testing tool (voorheen al beschikbaar via AdWords). Nu is dit niks nieuws, maar hierbij mijn bevindingen over de (on)mogelijkheden van deze tool.

Probleem

Tegenwoordig volstaat een statische site niet meer als regelmatig nieuwe content plaatst op je website. Het probleem met dynamische sites en tools als Google Site Optimizer is dat je geen PHP, ASP(X) of JSP code in je tests kan plakken. Als je bijvoorbeeld een site hebt draaien op PHP en MySQL, wordt er data opgehaald uit de database, geparsed en uiteindelijk weergegeven in HTML. Nou is het op zich niet zo’n ramp als je simpele dingen zou willen gaan testen, maar het wordt wel problematisch als je bijvoorbeeld een lijst met zoekresultaten middels een multivariate test wil gaan testen.

(more…)