Optimalisatie van je website. Verstandig?

Al in april 2010 kondigde Google (de grootste speler in de zoekmachine markt) aan de snelheid van een website als score mee te nemen in relevantie van zoekresultaten. Het antwoord op de vraag of het verstandig is om je website qua snelheid te optimaliseren is dus: “Ja”.

Maar hoe doe je dat? Hoe kun je zien welke score je volgens Google haalt? In deze blogposting vind je wat tips en kun je zien hoe Tuxis haar klanten gaat helpen de score te verbeteren.

  1. Inzicht verkrijgen
  2. Sprites
  3. Browser caching
  4. Minify CSS, Javascript en HTML
  5. Hoe Tuxis haar klanten helpt
  6. Maar helpt het ook echt?

Inzicht verkrijgen

Het optimaliseren van je website begint met inzicht over hoe Google (maar ook Yahoo!) tegen je website aan kijkt. Hier zijn een aantal tools voor:

  • Firebug is een onmisbare add-on voor Firefox als je bezig gaat met het ontwikkelen en optimaliseren van een website. Het stelt je in staat om makkelijk naar het stukje broncode te springen dat verantwoordelijk is voor een bepaald onderdeel op de pagina waar je naar kijkt. Klik met de rechter muisknop op het stuk dat je wilt bekijken en selecteer ‘Inspect Element’.
  • Een plugin voor Firebug die je informatie geeft over de snelheid van je pagina en wat je eraan kunt doen is Google’s Page Speed extension. Door deze plugin te installeren verschijnt er een extra tabje in de Firebug interface. Je kunt klikken op ‘Ananlyze performance’, waarna Page Speed gaat kijken waar je website verbeteringen kan gebruiken.
  • Yslow van Yahoo! is een vergelijkbare plugin voor Firebug. Deze plugin laat zien hoe Yahoo! naar uw website kijkt en welke verbeteringen Yahoo! voorstelt.

Sprites

Bij het optimaliseren van de website van Tuxis kwam een punt naar voren waarvan het niet direct duidelijk was wat er bedoeld werd: “Combine images into CSS sprites”. Ik kwam er niet goed achter wat die ‘CSS sprites’ precies waren. Verder onderzoek wees uit dat de plaatjes die op de site van Tuxis gebruikt worden om de blauwe lijnen te maken gecombineerd moesten worden. Dat scheelt in het laden van de website, omdat ieder onderdeel van de website dat apart geladen moet worden (zoals elk plaatje) tijd kost. Iedere keer moet immers aan de webserver gevraagd worden: “Mag ik dat bestand aub?”.

Leuk, maar hoe maak je dan zo’n sprite? Hoe combineer je die plaatjes in een enkel plaatje, en hoe pas je de CSS daarop aan? De website spriteme.org biedt uitkomst! Door de ‘SpriteMe’-link op die site aan je bookmarks toe te voegen kun je iedere site testen of sprites mogelijk zijn. Dat niet alleen, het kan ook nog het benodigde plaatje produceren en aangeven hoe je dat in CSS moet verwerken.

Zo kwam onderstaand plaatje uit de voorstellen van spriteme.org:

Spriteme.org uitkomst

Dat is dus één verzoek aan de webserver, in plaats van vier. En zo kunnen alle kleine beetjes helpen.

Browser caching

Een andere veel voorkomende tip is het verbeteren van caching door de browser. Hierdoor weet de browser beter hoe lang hij bepaalde dingen mag onthouden. Doordat hij dingen onthoudt gaat hij niet aan de webserver vragen of iets nog geüpdatet is en dat scheelt weer tijd.

Het opgeven van deze waarden moet door de webserver gedaan worden. Hoe je dat het makkelijkst kunt doen? Voor Apache bestaat daarvoor mod_expires. Mits mod_expires geladen wordt door de webserver, kun je de instellingen hiervan doen via de .htaccess bestanden.

Nginx heeft geen ondersteuning voor .htaccess bestanden. Daar moet het in de

server {}

definitie van de webserver met het add_header commando. Bijvoorbeeld:

add_header  Cache-Control "max-age=86400, public, public";

Dit zorgt ervoor dat de bestanden die door deze webserver geserveerd worden maximaal 1 dag onthouden mogen worden door de browser.

Minify CSS, Javascript en HTML

‘Minify’ staat voor het verwijderen van alle onnodige spaties en regeleinden in een stuk code. Bijvoorbeeld:

// how many times shall we loop? 
var foo = 10;
 
// what message should we use? 
var bar = 'Encosia';
 
// annoy our user with O(foo) alerts! 
for (var i = 0; i < foo; i++) { 
  alert(bar); 
}

wordt:

var foo=10;var bar='Encosia';for(var i=0;i<foo;i++){alert(bar);}

Lijkt niet zo zinnig, maar het is toch 194 bytes in de eerste situatie tegen 65 bytes in de tweede. Trek dit verschil eens naar een stuk Javascript- of CSS-bestand van 2KB, dat scheelt wel degelijk!

Minimaliseren van CSS, Javascript en HTML is dan wel handig voor browsers, maar het is niet zo lekker om geminimaliseerde code te bewerken. Maar daar zijn dan weer handige tooltjes voor.

Zo maakt Tuxis bijvoorbeeld gebruik van Minify. Dit project bestaat uit een stukje PHP dat je kunt gebruiken in plaats van allerlei linkjes naar CSS- en Javascript-bestanden. In de bron van de website van Tuxis zie je het volgende staan:

<script defer type="text/javascript" src="http://5740e3.cdn.tuxis.nl/min/b=custom&f=equalcolumns.js,jquery.js,mbScrollable.js,jquery.cursorMessage.js,template-tuxis.js"></script>

Tuxis heeft Minify geinstalleerd in de directory /min en geeft een aantal bestanden op waarmee het moet werken. Minify leest de opgegeven bestanden, minimaliseert ze en combineert ze tot een enkel bestand. Ook wordt een gecomprimeerde versie van het bestand (gzip) gemaakt. Driedubbele winst dus:

  1. Eén verzoek aan de webserver in plaats van vijf
  2. 100KB Javascript in plaats van 112KB
  3. De originele bestanden kun je gewoon bewerken zoals je gewend bent

Hoe Tuxis haar klanten helpt

Tuxis wil graag diensten leveren waardoor klanten zo min mogelijk hoeven te doen voor een zo goed mogelijk resultaat. Daarom is Tuxis bezig met het opzetten van een 'static content proxy'. Deze service stelt afnemers van Tuxis Webhosting in staat om in hun CMS of Webshop op te geven dat plaatjes, CSS- en Javascript-bestanden vanaf een andere plaats moeten worden geserveerd. Voor www.tuxis.nl is dat bijvoorbeeld http://5740e3.cdn.tuxis.nl/.

De 'static content proxy' haalt vervolgens het bestand op vanaf uw eigen website en slaat die gedurende 1 uur op op een geheugendisk. Deze disk is vele honderden keren sneller dan een gewone harde schijf.

Daarnaast wordt er gebruik gemaakt van een andere webserver die vele malen sneller is dan de Apache webserver waarop de website normaal gesproken draait. Door de verschillen in features tussen de twee webservers kan Apache helaas niet vervangen worden.

Ook worden de waarden voor browser caching automatisch goedgezet. U hoeft daar dus niet meer naar om te kijken.

De browser kan, doordat gebruik wordt gemaakt van twee verschillende 'sites' waarvandaan uw website komt, de pagina sneller binnenhalen omdat er twee aparte verbindingen opgezet worden. Dit wordt parallel gedaan, in plaats van serieel zoals bij een enkele website.

Maar helpt het ook echt?

Jazeker! Voordat Tuxis begon met het optimaliseren van de website haalde het in de score van Google PageSpeed een score van ongeveer 70. Op dit moment is de score 92 van de 100. Het kan dus bijna niet beter.

Vragen over deze nieuwe service of de Webhostingdienst van Tuxis? Neem contact met ons op!

Geef een reactie