Gisteravond heb ik de webinar, (oftewel Mozinar, :)) van Dean Hume gevolgd, waarin nog eens duidelijk werd gemaakt, hoe belangrijk het is om een snelle website te hebben. Naar aanleiding van de webinar, geef ik u graag 6,5 belangrijke tips om uw website een stuk sneller te maken.

Waarom een snelle website zo belangrijk is

Met betrekking tot de optimalisatie van de vindbaarheid van websites (SEO), is er vaak heel veel focus op de inhoud en structuur. Echter wat minstens zo belangrijk is, is de snelheid van uw website. Google waardeert snellere websites beter. Google denk namelijk dat achter een goed presterende website, ook een goed bedrijf schuilt. Echter, dit is niet de enige reden voor een snelle website. Er zijn experimenten gedaan waarin duidelijk is geworden, dat de snelheid van de website invloed heeft op de omzet. Amazon heeft gemeten wat het resultaat zou zijn, als zij een 100 milliseconden paginavertraging (latency) zouden inbouwen. Dit resulteerde in 1% minder omzet! Dus op iedere 100 euro, 1 euro minder! Reken maar eens uit wat dit betekent voor een bedrijf als Amazon met honderdduizenden transacties per dag. Kortom het is belangrijk om de snelheid serieus te nemen, vandaar dat ik deze tips graag met u deel.

1. Optimaliseer uw afbeeldingen

De snelste winst kunt u boeken door de afbeeldingen onder handen te nemen. De meeste websitepagina’s bestaan voor meer dan 50% uit afbeeldingen. Het is belangrijk dat deze afbeeldingen niet te zwaar zijn. Vaak heeft een afbeelding allerlei extra informatie die wordt opgeslagen, zoals bijvoorbeeld de camera-informatie. Let op dat u uw afbeelding, bij het opslaan bewaard als website bestand. Veel bewerkingstools hebben een dergelijke optie (opslaan voor web, save for web). Daardoor wordt alle extra informatie niet mee opgeslagen, wat aanzienlijk in de omvang scheelt. U kunt ook online tools gebruiken om uw afbeeldingen te comprimeren, zoals Kraken, Yahoo's Smush.it, Jpeg Mini en Tiny PNG. WordPress heeft ook een Smush.it plugin die u kunt installeren. Deze plug-ing comprimeert alle afbeeldingen op uw WordPress-site. Gebruik ook het juiste bestandsformaat. JPG is geschikt voor afbeeldingen en PNG voor bestanden waar u transparantie in wilt gebruiken zoals bijvoorbeeld uw logo. 

2. Het afbeeldingformaat

Heel vaak zie je dat men afbeeldingen upload die afwijken van het daadwerkelijke gebruikte formaat op de website. Er worden dan grote bestanden gebruikt die vervolgens op de website kleiner worden weergegeven. Dit betekent ten eerste dat meer data geladen moet worden dan nodig. Ten tweede zal de browser per afbeelding een aparte bewerking moet uitvoeren bij het laden, om de afbeelding op het juiste formaat weer te geven. Voor een snelle website is het beter om de afbeeldingen op het juiste formaat te uploaden en die vervolgens op de website pagina's te plaatsen. Let op dat een websitepagina een resolutie heeft van 72 ppi en afbeeldingen voor magazines vaak een veel hogere resolutie hebben. Dit kunt u aanpassen in een fotobewerkingsprogramma. Een gratis online bewerkingsprogramma is Pixlr.com.

3. Minify 

Uw website bestaat uit HTML, CSS en Javascript (gemiddeld zelfs 16%). Op uw website is de meeste HTML, Javascript en CSS zo geschreven dat het prettig leesbaar is voor de ontwikkelaars. Met andere woorden er zit veel witruimte tussen de stukken code, zodat dit prettig te lezen en te begrijpen is. Voor de server is het echter sneller als alle code gecomprimeerd wordt en minder regels en witruimte bevat. Er zijn diverse tools beschikbaar om deze bestanden te comprimeren. Let er wel op, dat het verstandig is om back-ups te maken van de oorspronkelijke bestanden en als u er zelf weinig ervaring in heeft, hulp in te roepen van een specialist. De tools zijn onder andere: CSS Minifier, Refresh SF, JavaScript Minifier, Better WordPress Minify.

4. Samenvoegen CSS en Javascripts

U kunt een bezoek aan een website vergelijken met een bezoek aan de supermarkt. CSS en Javascripts zijn dan de boodschappen. Veel websites hebben allemaal losse CSS en Javascript bestanden staan. Dit houdt dan in dat u dan keer op keer opnieuw de supermarkt in moet om en alle boodschappen per stuk te kopen. Dit is natuurlijk niet heel efficiënt. Het is daarom beter om de CSS en Javascript bestanden samen te voegen en er één groot bestand van te maken. De browser hoeft maar één keer de supermarkt in. Er zijn diverse tools beschikbaar om dit te doen. Let wel op dat ook dit proces risico’s heeft en dat het verstandig is om back-ups van uw oorspronkelijke bestanden te maken. Vraag om hulp van een internetspecialist, als u er zelf weinig verstand van heeft. Tools om te combineren zijn: Refresh SF, Better WordPress Minify, WordPress W3 Total Cache.

5. Caching

Nog een handige tip voor een snelle website is door gebruik te maken van caching. Als u een website bezoekt dan komt het vaak voor dat diverse pagina’s dezelfde afbeeldingen en elementen voorkomen. Het is zonde van de servercapaciteit als er iedere keer opnieuw aanspraak op gemaakt moet worden om bijvoorbeeld dezelfde afbeelding op te halen. Caching biedt dan de oplossing. Caching houdt in dat er bepaald bestanden gewoon opgeslagen worden op de computer van de bezoeker, waardoor deze  bestanden niet opnieuw geladen hoeven te worden. Vaak merkt u het op sommige websites als u dan een vervolgpagina bezoekt dan staat de afbeelding er ineens veel sneller. Als u een WordPress-website heeft dan kunt u gebruik maken van de WordPress W3 Total Cache plugin. Meer over caching vindt u op https://www.mnot.net/cache_docs/.

6. Online testen

Ok nou wilt u natuurlijk weten hoe u website het doet qua snelheid en prestatie. Er zijn daarvoor een aantal handige online tools beschikbaar. Wilt u weten of u een snelle website heeft dan kunt u gebruik maken van Google's PageSpeed Insights, Feed the Bot of Pingdom Website Speed Test. Google Pagespeed Insights test trouwens meteen de reguliere en de mobiele prestaties. 

6,5. Google Pagespeed Module

Nog een halve tip…. Sommige hosting bedrijven ondersteunen de Google PageSpeed Module. Deze module optimaliseert uw website meteen van A tot Z en optimaliseert uw CSS, Javascript en afbeeldingen.

CDN

Niet besproken in dit artikel is, het gebruik maken van een Content Delivery Network (CDN).  Dit is naar mijn mening alleen echt interessant is als u veel klanten heeft in het buitenland. Als dit het geval is, dan raad ik u aan om daar gebruik van te maken, omdat dit betekent dat uw website als het ware gekopieerd wordt op andere servers, dichterbij de bestemming. Dit kan u een veel snellere website opleveren.

Foto: Usain Bolt 2012 (bron Wikipedia)

Leave a comment

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *