Sinds 1 juni 2009 is Whelp! doorgegaan met een nieuwe eigenaar: Byte. Byte is geen onbekende van Whelp. Al eerder verschenen er artikelen over Joomla templates eerst op Byte en daarna op deze site. De samenwerking beviel goed. Toen ik dit voorjaar voor mezelf nieuwe plannen wilde maken, heb ik Byte gevraagd de nieuwe eigenaar te worden.

De plannen van Byte
Gruus, directeur van Byte, zegt het volgende over zijn plannen: "Byte wil het gedachtengoed van Theo in Whelp! voortzetten. Inzichtelijke artikelen, leuke relevante onderwerpen voor mensen die sites maken, voor professionals en amateurs, stapsgewijs. Byte zal de komende maanden Whelp.nl op haar eigen website integreren.
De volgende stap is met verschillende auteurs leuke informatieve stukjes schrijven, over webdesign, webdevelopment, webhosting en allerlei andere actuele zaken.
Byte bedankt Theo voor een heel sterke basis om een mooie kennisbank voor en met webprofessionals op te bouwen en namens alle Byters heel veel succes met je volgende stappen!"

Hartelijke dank!
Ik wil iedereen die mijn artikelen de afgelopen jaren heeft gelezen, me heeft gemaild en commentaar op de website heeft gezet heel erg bedanken! Ik heb het zeer gewaardeerd!

Vriendelijke groet,

Theo Bakker

Je kan veel leren van de manier waarop je bezoekers zoeken. Als je denkt vanuit de zoekopdrachten van je bezoekers zul je meer bezoekers trekken. Google plaatst je pagina namelijk hoger in de resultaten als de woordvolgorde overeenkomt met de teksten in je website. Hoe kan je je eigen mindset hierop aanpassen? Hoe vind je zoekwoorden die je bezoekers gebruiken? Waar zet je die zoekwoorden vervolgens in je pagina?

Welke zoekwoorden gebruikt een (be)zoeker?
Een voorbeeld. Stel je bent een universiteit en je wilt studenten je pagina's laten vinden over een opleiding. Hoe pak je dit aan? In eerste instantie zal je geneigd zijn om te spreken over 'opleidingen'. Dat is de term die je gebruikt binnen een universiteit. Maar zoekt een student daarop? Nee. Hij of zij zal zoeken op woorden als 'studie', 'bachelor', 'master' of nog waarschijnlijker de naam van de opleiding of een paar woorden daaruit.

In dit derde deel over YSlow (een hulpmiddel van Yahoo om de snelheid van je website te verbeteren) gaan we in de laatste tips die YSlow ons gegeven heeft. In het vorige deel in deze serie hebben we de snelheid flink kunnen ophogen door bestanden te zippen. Een aantal andere adviezen bleken al opgevolgd te zijn (zoals CSS bovenin je pagina en het achterwege laten van CSS expressies). Wat nog mogelijk is Javascript bestanden te verkleinen, redirects te vermijden en ETags in te stellen. Hoe werkt dit?

10) Minify JS – Maak Javascript bestanden zo klein mogelijk. Hoe kleiner een bestand des te sneller dat zal inladen. Hoe kan je dit doen? Om te beginnen kunnen je overbodige zaken verwijderen: tabs, regeleinden, dubbele spaties. Hiermee zal je wat tijdswinst halen. Een hulpmiddel hiervoor kan Dojo ShrinkSafe zijn. Je kunt ook nog lange namen van varialen hernoemen naar kortere versies. Dit alles komt wel ten nadele van de leesbaarheid van je code en maakt debuggen lastig (misschien wel onmogelijk).
Het verkleinen van de Javascript bestanden is bij gebruik van PHP Speedy voor WordPress niet meer nodig; dit wordt door deze plugin al voor je gedaan.

11) Avoid redirects – Vermijd 301 redirects. Soms komt het voor dat je een pagina hebt verhuist naar een andere locatie. Met een 301 redirect help je je bezoeker en zoekmachine naar de nieuwe locatie. Bij deze doorverwijziging gaat er wel tijd verloren. Probeer dit dus tot een minimum te beperken.
Het kan gebeuren dat er een redirect plaatsvindt zonder dat je het zelf doorhebt. Zo werden alle categorieën op deze pagina geredirect (aangezien ze niet met een / eindigen, wat wel zou moeten). Dit heb ik nu gefixt.

12) Remove duplicate scripts – Verwijder dubbele scripts. Ongewild kan het voorkomen dat je hetzelfde Javascript twee keer gebruikt. Met het toenemende gebruik van Javascript is dit niet zo vreemd. Ook kan het zijn dat je twee of meer plugins gebruikt die eenzelfde script gebruiken. Met YSlow zou je dit kunnen achterhalen en corrigeren. Dit probleem kwam niet voor mijn site.

13) Remove ETags – Verwijder Entity Tags (ETags). Van origine waren Entity Tags bedoeld om het inladen van componenten te versnellen. Op basis van een Entity Tag kon een browser bepalen of een component uit een pagina dat werd aangeboden al eerder was ingeladen. In de praktijk blijkt dit tegenwoordig averechts te werken; met name bij websites die van meerdere servers gebruik maken (bijv. druk bezochte websites). Het advies is daarom om de ETags te verwijderen. Hiermee wordt caching verbeterd. Op Apache doe je dit met het volgende commando in je .htaccess bestand.

Het (voorlopig) eindresultaat
We zijn heel wat opgeschoten. De ranking van de homepage is verder verbeterd naar 63. Een aantal zaken was niet op te lossen; dit zit hem met name in aanroepen vanaf het Google domein (voor de advertenties), maar ook vanwege het statistieken programma dat ik gebruik (Mint). Misschien dat daar nog wat aan te verbeteren valt. Op de website van Yahoo worden overigens nog veel meer verbeterpunten aangereikt (in totaal maar liefst 34 op dit moment). Deze heb ik nog niet meegenomen. Mocht daar nog iets uitkomen, dan zal ik dit in een vervolg publiceren.

Zojuist ben ik gestuit op een heel leuke plugin voor Firefox: smush.it. Met dit programmaatje kan je in één klap alle afbeeldingen van een pagina die je open hebt staan verkleinen. Het is gemaakt door Nicole Sullivan en Stoyan Stefanov.

Laat smush.it los op je website
Als je smush.it hebt geinstalleerd en Firefox herstart, bezoek dan je site en klik op het smush.it icoontje dat onderin je browser is verschenen. De site van smush.it opent zich nu en een-voor-een wordt gekeken of de afbeeldingen van je website nog verkleind kunnen worden.

Zoals je kunt zien was er maar liefst 11,14% (32.04kb) van de afbeeldingen van de homepage nog af te schaven. Is dat nog belangrijk in deze tijd van snelle verbindingen? Jazeker. Kortere laadtijden dragen bij aan een hogere ranking door Google.

Per afbeelding wordt aangegeven wat er nog te verbeteren valt
Smush.it maakt een mooi overzicht van de afbeeldingen van de pagina in kwestie en geeft per afbeelding precies aan hoeveel procent er te verbeteren valt. Helaas staat er niet bij hoe dit precies gedaan is.

Hierna kan je de afbeeldingen downloaden in een zip bestand. Als je je afbeeldingen vervangt, let er dan wel op dat je de cache van je browser leegt en – als je cachingsystemen gebruikt op je server – ook de cache van je website weggooit.

In het vorige deel hebben we YSlow voor het eerst gebruikt en al wat snelheidswinst weten te boeken. We hebben gekeken naar het omlaag brengen van het aantal HTTP verzoeken (advies 1) en het cachen van met name afbeeldingen (advies 3). We gaan in dit deel door met de volgende stappen.

4) Gzip components – Door een bestand op de server eerst te zippen en dan over de 'lijn' sturen kan je de hoeveelheid data met 70% omlaag brengen. De browser van je bezoeker moet dan wel die gegevens weer kunnen unzippen. Volgens Yahoo geldt dit voor 90% van de browsers. Aangezien ik mijn grootste 'klandizie' in Nederland heb, ga ik ervan uit dat dit percentage nog wel hoger zal liggen. De moeite waard dus om te proberen.

Voeg hiervoor de volgende code toe aan je .htaccess bestand.

Wat we hier testen is of de module mod_deflate wel geactiveerd is op de server. Zo ja, dan gebruiken we die bij javascript, CSS en php bestanden. Het effect is dat de homepage nu (na caching) onder de 2 seconden komt! Maar ook bij een eerste aanroep zal dit heel wat tijd schelen. Gzip via PHP speedy heb ik nog aanvullend getest, maar dit bleek niet te werken in Internet Explorer…