home | sitemap

Vormgeving optimaliseren

Een vormgeving bestaat normaliter uit een HTML template en één of meerdere CSS en eventueel javascript bestanden. Daarnaast kan de vormgeving één of meerdere afbeeldingen bevatten.

Voor een snelle website is het van belang dat al deze bestanden zo snel mogelijk gedownload kunnen worden. Om bestanden snel te kunnen laten downloaden zijn verschillende technieken beschikbaar die samen ingezet kunnen worden voor het beste resultaat. Enkele zijn:

Caching

Browsers kunnen eenmaal opgehaalde bestanden lokaal opslaan. Bij een volgende verzoek zal de browser het bestand niet van de server ophalen, maar direct tonen vanuit zijn eigen cache (op disk of in het geheugen). De webserver kan de browser vertellen hoelang een bestand lokaal gebruikt mag worden voordat de browser de server moet vragen of er een aangepaste versie beschikbaar is.

De server van het cms zorgt er voor dat de browser van de bezoeker per type bestand de juiste caching gegevens meegestuurd krijgt. Zo zijn html-pagina's bijv. 4 uur cachable, afbeeldingen 1 maand en afbeelding en CSS/js-bestanden van de vormgeving 1 dag. Pagina's van een beveiligde websites zijn bijv. niet-cachable.

Met de toets-combinatie Ctrl-F5 kan de browser expliciet worden gevraagd de huidige pagina te herladen en alle(!) bestanden opnieuw op te halen, ongeacht de cache-gegevens.

Tip: Tijdens het maken van de HTML/CSS voor een vormgeving kan caching lastig zijn: je moet steeds Ctrl-F5 doen om aanpassingen te kunnen zien. Dit kun je voorkomen door de url naar het css-bestand altijd uniek te laten zijn door er een code achter te zetten, bijv. /css/vormgeving/mijncss.css?123.
Het cms kan je daarbij helpen. Gebruik onderstaande oplossing om de url automatisch uniek te laten zijn:

<link rel="stylesheet" type="text/css" href="/css/vormgeving/mijn.css<!-- TMPL_IF NAME="edit" -->?<!-- TMPL_VAR NAME="xcms_unique" --><!-- /TMPL_IF -->">

Cache busting

Alle bestanden, javascript- en css-bestanden, afbeeldingen, etc. kunnen ook worden voorzien van een kenmerk om de cache van een browser expliciet te updaten. Neem afbeeldingen: het cms laat browsers afbeeldingen 30 dagen cachen. Als je een afbeelding update en de naam blijft hetzelfde, dan is de kans dus groot dat vele bezoekers tot 30 dagen in de toekomst nog steeds de oude afbeelding zien. Door in de verwijzing de naam van het bestand vooraf te laten gaan met _cms<cijfers>_ kun je de url uniek maken en zo browsers forceren de nieuwe afbeelding te tonen (en te cachen). Voorbeeld (in een css bestand):

body {
  ...
  background: url(/gfx/plaatje.jpg) 0 0 no-repeat;
 ...
}

Als plaatje.jpg is vervangen met een nieuw plaatje met dezelfde naam, kun je het weergeven van het plaatje forceren met

  background: url(/gfx/_cms123_plaatje.jpg) 0 0 no-repeat;

Mocht het plaatje een volgende keer weer gewijzigd worden, maak dan van 123 bijv. 1234, etc...

Bovenstaande kun je overal toepassen. Enkele voorbeelden:

<img src="/css/vormgeving/gfx/_cms456_logo.png" alt="logo" />
<link rel="stylesheet" type="text/css" href="/css/vormgeving/_cms20131207_mijnbestand.css" />
<script src="/css/vormgeving/_cms333_style.js"></script>

Deze 'techniek' wordt ook wel cache busting of version revving genoemd. T.z.t. zal het werken met vormgeving worden aangepast om dit automatisch door het cms te laten regelen.

Compressie

Bestanden die de server verstuurd kunnen worden gecomprimeerd, net als bestanden op een computer met bijv. WinZIP. De server van het cms comprimeert automatisch alle bestanden (voornamelijk HTML/XML, CSS en javascript bestanden), maar bijv. niet afbeeldingen (die zijn vaak al gecomprimeerd) of PDF-bestanden (kan fouten geven).

Voorbeeld:
Bestand: http://www.site-supply.nl/js/support.js

  Zonder compressie Met compressie 
Zonder minification (zie volgende hoofdstuk) 30.246 bytes  8.974 bytes (-71%!)
Met minification  18.986 bytes (-38%!)  6.597 bytes (-79%!)

Na compressie en minification is het bestand dus 80% kleiner en wordt 4,6x sneller geladen!

Minification (minify)

CSS en javascript
CSS en javascript bestanden kunnen voor compressie ook nog 'verkleind' worden. Zo kunnen bijv. alle enters, commentaarregels, etc. verwijderd worden. Bij javascript bestanden kunnen ook nog eens alle namen van variabelen ingekort worden. De browser heeft hier geen 'last' van en kan de CSS en javascript bestanden gewoon lezen.

Voorbeelden:

Originele CSS (145 bytes): Originele javascript (262 bytes): 
/*** algemeen ***/
body {
margin: 0;
padding: 0;
}

img { 
border: 0;
}

a { /* remove ff dotted border */
outline: none;
}

function DigitsOnly(e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else {
    if (e) {
     keycode = e.which;
    } else {
      return true;
    } 
  }
  if (keycode > 47 && keycode <= 58) {
    return true;
  }
  return false;
}
Verkleinde CSS (55 bytes, -62%): Verkleinde javascript (149 bytes, -43%): 
body{margin:0;padding:0;}img{border:0;}a{outline:none;}

function DigitsOnly(b){var a;if(window.event){a=window.event.keyCode}else{if(b){a=b.which}else{return true}}if(a>47&&a<=58){return true}return false}

Bij de vormgeving (overzicht van alle bestanden) kunnen met de knop 'Minify CSS/JS' alle CSS- en javascript-bestanden verkleind worden van een bestaande vormgeving. Het cms maakt van alle bestanden een (verborgen) kopie en verkleind te bestanden.
Als een CSS- of javascript-bestand wordt bewerkt zal het cms automatisch het bestand verkleinen, het is dus niet nodig na elke aanpassing de Minify-knop te gebruiken!
Klik gewoon op een bestand om het te bewerken: het cms opent dan het origineel dat gewoon leesbaar is. Bij het opslaan zal het cms automatisch weer een verkleinde versie opslaan.

NB: het cms zal geen css-bestanden minify-en die de css hack 'html>/**/body {}' bevatten! (Zie http://www.webdevout.net/css-hacks.)

Tip: Wil je niet dat het bestand verkleind wordt (bijv. om javascript te debuggen)? Houd de Shift-toets ingedrukt als je op 'Ok' of 'Opslaan' klikt en het bestand zal niet verkleind worden. 

Afbeeldingen
Afbeeldingen kunnen vaak nog in omvang verkleind worden door overbodige informatie te verwijderen. Zo kan een JPG-afbeelding bijvoorbeeld een kleine thumbnail in zich bevatten. GIF-afbeeldingen bevatten vaak overbodige kleurinformatie. Door al dat soort zaken die voor browsers niet van belang zijn weg te laten kunnen afbeeldingen soms wel tot 40% kleiner worden!

Bij de vormgeving (overzicht van alle afbeeldingen) kunnen per map met de knop 'Minify GIF/JPG/PNG' alle afbeeldingen verkleind worden van een bestaande vormgeving. Het cms maakt in dat geval geen kopie van de originele afbeeldingen! (Al zullen de afbeeldingen nog wel een maand in de normale backup van het cms beschikbaar zijn.)
Nieuwe afbeeldingen die worden geupload worden automatisch verkleind, het is dus niet nodig steeds de Minify-knop te gebruiken na wijzigingen!

Data URI's

Maakt een vormgeving gebruik van vele kleine afbeeldingen, bijv. icoontjes, knoppen, repeterende achtergrondjes, etc. dan kunnen deze afbeeldingen ook *in* de css worden opgenomen. Dit scheelt men name in het aantal requests dat een browser moet doen om alle afbeeldingen op te halen.

Stel dat in een css bestand 20 plaatjes worden gebruikt, dan moet de browser (naast alle andere requests voor afbeeldingen in de html, javascript bestanden, etc.) 21 requests uitvoeren (1x voor css bestand en 20x voor afbeeldingen).

Als de afbeeldingen in de css worden opgenomen dan is nog maar 1 request nodig... en dat scheelt tijd.

Om afbeeldingen in de css te laten opnemen dient het css bestand een regel met

/* xcms: data_uri */

te bevatten.

Voorbeeld:

p {
  background: url(/gfx/plaatje.gif) 0 0 no-repeat
}

wordt dan

p {
  background: url("data:image/gif;base64,R0lGODlhDgANALMAAP///zk+RcrMzVNXXbGztaSmqpWXm+b
n6PPz89rb3L2/wW9yd3t+g0ZLUQAAAAAAACH5BAAAAAAALAAAAAAOAA0AAARAEMhJ61SFICvVCGBgWIn
4hSO1BAJAnMExHWArvUExCTWFMDoJjTUhrIKSTwsHSlB4BpjIQmiEphwEoVCQcb6UCAA7" 0 0 no-repeat;
}

NB: data URI's werken in alle browsers maar bij Internet Explorer alleen vanaf IE8!

Wil je ook ondersteuning voor IE6 en IE7, voeg dan tevens de regel

/* xcms: data_uri_ie67 www.example.org */

toe. Vervang daarbij www.example.org met de domeinnaam voor de website of een algemene domeinnaam die naar het cms verwijst.

Zaken die je zelf nog kunt doen

Combineer css- en javascript-bestanden

Als de vormgeving meerdere css of javascript bestanden nodig heeft, voeg die dan samen tot 1 bestand. Heeft de vormgeving bijvoorbeeld 3 javascript bestanden nodig:

<script type="text/javascript" src="/css/vormgeving/menu.js"></script>
<script type="text/javascript" src="/css/vormgeving/jquery.js"></script> 
<script type="text/javascript" src="/css/vormgeving/style.js"></script>

Maak daar dan 1 bestand van, door de inhoud van die 3 bestanden (en in die volgorde als nodig) in 1 bestand te zetten, bijv.

<script type="text/javascript" src="/css/vormgeving/combined.js"></script>

Het cms kan dit ook on the fly voor je regelen!
Maak een bestand dat eindigt op .combined.js of .combined.css, bijv. mijncss.combined.css of alles.combined.js.
Zet daarin met de bekende <!-- TMPL_INCLUDE NAME="..." --> alle gewenste bestanden. Voor het bovenstaande voorbeeld met 3 js bestanden zet je bijv. in alles.combined.js het volgende:

<!-- TMPL_INCLUDE NAME="menu.js" -->
<!-- TMPL_INCLUDE NAME="jquery.js" -->
<!-- TMPL_INCLUDE NAME="style.js" -->

In de html zet je nu ipv de 3 script-tags alleen nog maar

<script type="text/javascript" src="/css/vormgeving/alles.combined.js"></script>

Voordeel van het automatisch samenvoegen is dat je de losse bestanden kunt laten staan wat het beheer van je code een stuk makkelijker en overzichtelijker maakt.

Tip: je kunt ook bestanden uit andere vormgevingen samenvoegen. Maak je vaak gebruik van enkele handige jquery/javascript/css modules, zet die dan in een aparte map en verwijs er steeds naar toe! In een .combined.css of -.js bestand mag je ook naar andere mappen verwijzen. Bijvoorbeeld

<!-- TMPL_INCLUDE NAME="../mijnmap/menu.js" --> // relative verwijzing
<!-- TMPL_INCLUDE NAME="/css/handy/jquery.lightbox.js" --> // absolute verwijzing

Combineer afbeeldingen

Maak gebruik van zogenaamde sprites: 1 afbeelding waarin meerdere of zelfs alle afbeeldingen nodig voor de vormgeving zijn ondergebracht. Door de afbeelding als achtergrond te gebruiken en steeds de positie te veranderen kun je het gewenste deel van de afbeelding weer laten geven.
Aangezien de browser maar 1 afbeelding hoeft te downloaden in plaats van meerdere wordt de website sneller geladen.
Lees meer over sprites op http://www.whelp.nl/css-sprite-design/

Combineer css-bestanden
Combineer waar mogelijk alle css-bestanden tot 1 bestand (net als bij de javascript-bestanden). Aangezien de browser maar 1 bestand hoeft te downloaden in plaats van meerdere wordt de website sneller geladen.

Meten wat het effect van de optimalisatie is?

Er zijn verschillende programma's en plugins in omloop om te meten of een pagina snel(ler) geladen wordt. De meeste plugins zijn beschikbaar voor Mozilla Firefox:

Meer weten over hoe een website/vormgeving te optimaliseren?