Maak je website sneller door laadtijden te optimaliseren, bestandsgroottes te verkleinen en de gebruikerservaring te verbeteren - voor betere SEO en meer conversies.
Thomas Haurum
Is er iets frustrerender dan wanneer je als gebruiker op een tergend trage website belandt? Nee toch?
Ons geduld is vaak ver te zoeken als we online op zoek zijn naar informatie of producten. Kom je op een website die langzaam laadt, dan klik je direct door naar de volgende.
Een trage website levert niets goeds op. Het zorgt voor een slechte gebruikerservaring en dat geldt ook voor jou als eigenaar van de website. Je mist namelijk potentiële bestellingen, en Google ziet dat bezoekers je site snel weer verlaten.
Hoe voorkom je dat? Het antwoord is: meer focus op snelheidsoptimalisatie.
Snelheidsoptimalisatie is een uitgebreide discipline die zowel theoretische kennis als technische vaardigheden vereist. Maar waarom ligt de focus hier nu zo sterk op?
Nu Google zijn algoritme aanpast om betere resultaten aan gebruikers te bieden, is snelheidsoptimalisatie steeds belangrijker geworden. Google heeft onlangs zelfs aangekondigd dat de snelheid van je website een directe rankingfactor is. Word je dus afgestraft als je de snelheid van je site verwaarloost? – Alles wijst erop van wel.
Naast het optimaliseren voor Google is snelheid vooral essentieel voor je gebruikers. Onderzoeken tonen aan dat je bezoekers verliest of wint in het eerste seconde. De gevolgen van een website met meer dan 1 seconde ‘wachttijd’ zijn minimaal:
Het is eigenlijk heel simpel. Laadsnelheid beïnvloedt de totale gebruikerservaring, je conversieratio en daarmee je omzet.
Kortom: geen excuses meer. Steek de handen uit de mouwen en werk aan de snelheid! Dat is een must als je serieuze ambities hebt met je online aanwezigheid.
In dit artikel laat ik je zien welke laaghangende vruchten de basis vormen voor een snelle website.
Het is verstandig om eerst te analyseren hoe je website nu presteert. Er zijn talloze tools die je website kunnen analyseren en precies aangeven waar verbetering mogelijk is. Zelf geef ik de voorkeur aan GTmetrix. Deze tool is gratis, uitgebreid en bovendien erg gebruiksvriendelijk. De interface is intuïtief en beoordeelt je site op een schaal van 1-100. Naast een algemene score krijg je ook per onderdeel inzicht, zodat je precies weet waar het knelt.
De manier waarop je optimaliseert, hangt sterk af van de opbouw van je website – en natuurlijk van je technische kennis. De meeste open source CMS-systemen bieden veel mogelijkheden om te optimaliseren met diverse plugins, zodat je niet meteen een ontwikkelaar hoeft in te schakelen.
Is jouw website zoals de meeste andere? Dan zijn er standaard optimalisatiekansen waarmee je direct aan de slag kunt. Hier zijn ze.
Plugins zijn een waardevolle aanvulling en kunnen je website fraaier en functioneler maken. Maar! Helaas zijn plugins vaak de grootste boosdoeners als het om snelheid gaat. Hoe meer plugins je gebruikt, hoe meer bestanden je site moet laden. En niets maakt je browser trager dan het in- en uitladen van talloze bestanden. Naast het aantal is ook de kwaliteit van plugins belangrijk: er is veel verschil in hoe goed de code is geoptimaliseerd en gecomprimeerd. Slechte plugins vormen bovendien een groot beveiligingsrisico dat je website in gevaar kan brengen.
Mijn advies: kies zorgvuldig. Installeer alleen plugins die je bedrijf echt nodig heeft en laat ‘handige’ gadgets achterwege.
Een fundamentele stap is het consequent comprimeren van je afbeeldingen. Daarbij zijn twee zaken belangrijk: uitsnijden (lengte & breedte) en comprimeren (KB/MB). Beide moeten worden meegenomen.
Uitsnijden
Vraag jezelf eerst af waar je de afbeelding gebruikt. Gebruik je een afbeelding bijvoorbeeld in een grote slider, dan moet het formaat daarop zijn afgestemd. Weet je niet precies welk formaat je nodig hebt, doe dan het volgende:
Nu zie je hoe groot de afbeelding daadwerkelijk is, en hoe groot deze wordt weergegeven op je website (zie afbeelding).
Met deze informatie weet je exact welk formaat je afbeelding moet krijgen.
Comprimeren
Veel mensen willen niet inleveren op kwaliteit omdat hun producten zo goed mogelijk moeten worden getoond – en dat is begrijpelijk. Toch kun je een afbeelding comprimeren zonder kwaliteitsverlies. Dat betekent minder bytes, maar dezelfde kwaliteit. Dit kan met Lossy- of Lossless-compressie. In grote lijnen worden de bestanden kleiner door het aantal kleuren te verminderen, waardoor er minder bytes nodig zijn om het beeld op te slaan. Visueel zie je het verschil nauwelijks, maar het effect op de bestandsgrootte is enorm.
Heb je een WordPress-site? Gebruik dan de plugin: Smush Image Compression and Optimization. Deze plugin comprimeert je afbeeldingen automatisch bij het uploaden. Heb je geen WordPress-site, gebruik dan bijvoorbeeld TinyPNG.com voordat je je bestanden uploadt.
Elke keer dat je verwijst naar een bestand, doet je browser een verzoek aan de server. Dit veroorzaakt vaak kleine vertragingen, wat ten koste gaat van de snelheid van je site.
Praktijkvoorbeeld
Je hebt al vijf jaar een webshop en in die tijd zijn er allerlei handige tools toegevoegd om meer inzicht en omzet te genereren. MailChimp, SleekNote, Pixels, Analytics, Hotjar, CrazyEgg, Facebook Messenger Plugin, LinkedIn Conversion Tracking? Daarnaast heb je een font voor de hoofdtekst in drie diktes, één voor de koppen en een cursief font voor klantreviews. Tot slot verwijs je naar 17 verschillende JavaScript-bestanden voor allerlei mooie effecten – want wat is belangrijker dan een fraaie website?
Voor al deze implementaties zijn vast goede redenen te bedenken. Maar uiteindelijk gaat het ten koste van de snelheid van je website.
Herzie en prioriteer je verzoeken
Is je bedrijf echt afhankelijk van al die verschillende lettertypes? Of gebruik je LinkedIn Conversion Tracker wel daadwerkelijk? Verwijder alles wat je niet regelmatig gebruikt en wat geen meetbaar effect heeft.
Combineer je CSS- en JavaScript-bestanden
In plaats van te verwijzen naar vijf verschillende JavaScript-bestanden, kun je ze samenvoegen tot één bestand. Vraag je ontwikkelaar dit te doen of gebruik een plugin. Heb je een WordPress-webshop, dan raad ik Autoptimize aan.
Misschien heb je wel eens gehoord van caching, maar weet je niet precies wat het doet? Simpel gezegd is cache een opslagplaats voor data van websites die je eerder hebt bezocht. Stel, je bezoekt wemarket-digital.nl voor de eerste keer. Je browser laadt dan alle JavaScript, CSS en HTML direct van de server. Bij een volgend bezoek heeft je browser deze data gecachet en opgeslagen. Daardoor kan je browser deze gegevens de tweede keer veel sneller ophalen, zonder alles opnieuw te hoeven downloaden.
Heb je nog geen caching ingesteld? Geen zorgen – er zijn plugins voor bijna elk CMS.
Veel mensen weten het niet, maar de PHP-versie heeft grote invloed op de snelheid van je site. Deze wijziging kun je meestal niet zelf doorvoeren, maar moet via je hostingpartij (zoals Unoeuro, One.com, SurfTown).
Beschikbare versies lopen meestal van PHP 5.0 tot en met 7.4.
Ons advies: update naar de nieuwste beschikbare versie. Let op: dit kan invloed hebben op de weergave van je site.
Neem contact op met je ontwikkelaar om de PHP-versie te laten updaten en vraag direct om hulp bij de andere optimalisaties uit dit blogartikel. Daar worden jij én je potentiële klanten blij van.
Andere relevante artikelen:
Google biedt betere mogelijkheden voor splittesten
Waarom kiest Google voor een mobile-first index?
WeMarket heeft uitgebreide ervaring met het ontwerpen van nieuwe websites. Lees meer hier.
Bij WeMarket bieden we bedrijven een benchmarkrapport aan waarmee hun marketinginspanningen worden vergeleken met die van de belangrijkste concurrenten. Jij bepaalt zelf met wie we de vergelijking maken.
Wij zijn gespecialiseerd in de online verkoop van fysieke producten en het laten groeien van webshops – en daar kun jij nu ook van profiteren, zelfs als je nog geen klant bent.
Het kost je niets.
