Blog

Het optimaliseren van de front-end heeft als grote voordeel je server minder te belasten door het aantal aanvragen te beperken of uit te stellen. Door de bestanden ook klein te schalen zullen ze sneller tot bij de bezoeker geraken en zal je uitgaand dataverbruik ook drastisch dalen. In deze blogpost haal ik enkele tips aan die je in een mum van tijd kan toepassen om zo de front-end van je website te optimaliseren.

CSS3

Moderne browsers kunnen tegenwoordig perfect om met HTML5 en CSS3. Met CSS3 kan je perfect gradients, shadows of andere stijlen toepassen die we voorheen in een afbeelding moesten plaatsen. Uiteraard moet je rekening houden met verouderde browsers en hun een gepaste fall-back aanbieden.

Op Smashing magazine hebben ze onlangs een test gedaan om aan te tonen dat CSS3 tot 33% sneller en 9,5% kleiner kan zijn dan gewone CSS. Ook zal je het aantal http-requests tot je server met 45% kunnen terugdringen.

Bron: http://www.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark

E-tags

Entity Tags (Etags) zijn bedoeld om het inladen van componenten te versnellen. Op basis van de E-tag bepaalt de browser of hij dit element kent en bepaalt hij of hij dit moet downloaden of uit de cache ophalen.

Toch loopt dit niet altijd van een leien dakje en raakt je browser soms in de knoop wanneer je gebruik maakt van verschillende servers en blijft hij deze afbeeldingen steeds opnieuw downloaden. Deze E-tags maken je http-headers soms ook overbodig groter dan dat nodig zou moeten zijn.

Het is daarom dan ook aangeraden om deze uit te schakelen zodat je browser op andere waardes gaat controleren en bepalen of hij de bestanden uit de cache haalt of niet.

Je kan E-tags snel en gemakkelijk uitschakelen in je Apache configuratie of in een .htaccess bestand:

FileETag none

Expire headers

Doordat we geen gebruik meer maken van onze E-tags valt onze browser terug op enkele andere headers, De Last-Modified, Expires en Cache-Control header zijn hier onderanderen enkele van. Het is dus aangeraden deze zeker goed in te stellen.

Doordat de grafische elementen van je website niet wekelijks zullen veranderen is het aangeraden deze bijvoorbeeld enkele maanden te cachen. Dit kunnen we instellen in onze Apache server of in een .htaccess bestand:

ExpiresActive On
ExpiresDefault "access plus 2 month"

Hiernaast gaan we onze Cache-control header ook op een correcte manier enkele maanden laten cachen:

Header set Cache-Control "max-age=2592000, public"

Een volledig uitgewerkt voorbeeld, met de nodige controle op de juiste Apache modules kan je op volgende pagina terugvinden: https://gist.github.com/976049

Photoshop

Photoshop heeft een prachtig ingebakken mogelijkheid om afbeeldingen te exporteren voor het web. Toch heb je bij dit exporteren nog steeds te keuze uit JPG, PNG24, PNG8, GIF, etc. In de meeste gevallen ben ik er grote voorstander van steeds grafische elementen in PNG8 op te slaan (indien ze dit toelaten). Dit omdat je bij PNG8 afbeeldingen steeds zeer kleine bestandsgroottes hebt. In tegenstelling tot een JPG kan dit tot 50% aan bestandsgrootte schelen. In sommige gevallen ben je gewoon verplicht te kiezen voor PNG24. Dit doordat PNG8 niet overweg kan met transparante shadows of gradients.

Het belangrijkste is hier naar de bestandsgrootte indicator te kijken in Photoshop. Deze geeft aan hoe groot je bestand zal zijn als je dit zal opslaan in PNG8 of PNG24. Je kan best dus eens even wisselen tussen de verschillende formaten en de afweging maken of het ook perfect uitziet in PNG8.

Smush.it

Elke afbeelding die je opslaat of exporteert in Photoshop heeft standaard extra data aan boord. Deze extra bytes zijn vooral nodig voor afbeeldingen en voorvertoningen op je desktop, op internet heb je hier vrij weinig tot niets aan.

De service Smush.it van Yahoo verwijdert deze overbodige bytes van je afbeeldingen zonder dat je hier iets van merkt aan je afbeelding zelf. In sommige gevallen kan je met deze tool de bestandsgrootte van je afbeeldingen tot 20% terugdringen.

Te gebruiken via: http://smush.it

YUI Compress

Zoveel te meer grafische elementen op je website zoveel te groter zal je CSS code worden. Toch kan je de bestandsgrootte van je CSS en JS bestanden terugdringen door deze door een compressor te halen zoals de YUI compress van Yahoo. Deze compressor zal overbodige spaties, nieuwe regels, etc uit je CSS halen en je javascript code volledig herbekijken met kortere variabelen.

Het resultaat en de werking van je CSS en JS code blijven hetzelfde, enkel dat ze na de YUI compress toch wel stukken kleiner zijn. Een handige online YUI compressor: http://refresh-sf.com/yui/

De testing tools

Je ziet dat je met behulp van enkele handige tools als snel de grootte van je website kan verkleinen. Naast de aangehaalde tips bestaan er nog tal van andere mogelijkheden om je website te optimaliseren. Om extra tips te verzamelen of je website aan een test te onderwerpen kan je het best een tooltje zoals Yslow (Firefox) gebruiken. Deze zal je website op een 20-tal puntjes testen en aangeven wat je het beste nog kan aanpassen.

Yslow installeren: http://developer.yahoo.com/yslow/
Google biedt ook een online tool aan om je website te testen: http://pagespeed.googlelabs.com

Heb je verder nog een handige tip om je website te optimaliseren, laat deze dan zeker even weten aan ons!