Website Optimalisatie Tips Voor Gevorderden

Website optimalisatie is een breed concept en kent daardoor geen eenduidige definitie. Om een beter beeld van de betekenis te geven kan deze omschrijving helpen: "Het verbeteren van je website waardoor deze beter converteert, een fijnere gebruikerservaring biedt, en hoger scoort in zoekmachines".

Wat is website optimalisatie?

Zoals blijkt uit bovenstaande kan het optimaliseren van websites je helpen om de doelen van je organisatie te behalen. In veel gevallen wordt er een proces gebruikt om te bepalen waar de grootste verbeterpunten liggen en hoe deze het beste aangepakt kunnen worden. Een voorbeeld van zo'n optimalisatie proces is: inventariseren, onderzoeken, testen, en optimaliseren. Een website review kan een goed startpunt van een dergelijk verbeterproces vormen.

Een website optimaliseren kan op veel verschillende manieren worden aangepakt, maar heeft bijna altijd betrekking op één of meerdere van de volgende online marketing disciplines.

Conversie optimalisatie (CRO)

Allereerst zullen we conversie optimalisatie (CRO) bespreken. Binnen deze discipline zullen de verbeteringen aan de website met name gericht zijn op de conversies verhogen. Met andere woorden, er wordt geprobeerd om er voor te zorgen dat meer bezoekers zullen 'converteren' tot leads of klanten. Conversie optimalisatie staat bekend om zijn data-gedreven blik op website optimalisatie. Zo wordt er vaak gebruik gemaakt van web statistieken (bijvoorbeeld vanuit Google Analytics) en vormen AB testen een belangrijk onderdeel van het proces.

User experience (UX)

Een andere discipline die zich veel bezig houdt met het verbeteren van websites is 'UX' (wat staat voor User eXperience). Met behulp van gebruikersonderzoek wordt er bekeken hoe de website gebruikersvriendelijker gemaakt kan worden. Denk hier bijvoorbeeld aan methoden als user testing, focusgroepen, en interviews. Ook wordt er vanuit deze afdeling onderzoek gedaan naar de customer journey en worden aspecten als personas en segmenten van bezoekers verder uitgediept.

Zoekmachine optimalisatie (SEO)

Ten slotte misschien nog wel de discipline waar de meeste mensen aan zullen denken als ze denken aan website optimalisatie tips. Wat deze afdeling doet is zorgen dat er zoveel mogelijk relevant verkeer via zoekmachines op de website komt. Het gaat hier dan om 'organisch' verkeer, wat wil zeggen dat dit bezoekers zijn die niet op een betaalde advertentie hebben geklikt. Bij SEO wordt de website niet alleen geoptimaliseerd voor menselijke bezoekers, maar ook voor zoekmachines. Zij kijken naar technische zaken als titels en meta descriptions, maar tegenwoordig ook steeds meer naar de ervaring die bezoekers op de website hebben. Om te controleren of je website in de basis goed staat ingesteld kun je een scan doen met een tool als WooRank. Daarmee check je een groot aantal factoren en krijg je advies over wat je kunt verbeteren.

Algemene website optimalisatie tips

Een goede basis is een must om een website succesvol te kunnen optimaliseren. Denk maar eens terug aan die ene interessante website met zo'n trage laadtijd dat je hem weggeklikt hebt, of dat resultaat in Google waar direct een foutmelding in beeld kwam nadat je doorklikte. De volgende algemene website optimalisatie tips kunnen je helpen om deze basis op orde te krijgen.

Kies een geschikte website bouwer

Website bouwers zijn er in alle soorten en maten. Van de spreekwoordelijke tiener op de zolderkamer tot grote bedrijven met honderden mensen in dienst. Informeer jezelf uitgebreide over de ins and outs van hoe je toekomstige website en samenwerking. Welk platform wordt er gekozen? Hoe snel worden updates doorgevoerd? Wordt er gewerkt met sprints? Is er sprake van een vaste account manager? Kun je de website zelf aanpassen? Etc. Vraag desnoods een second opinion aan bij iemand die je vertrouwt om een minder eenzijdig beeld te krijgen van wat er geboden wordt. Een ander advies is om een website bouwer te zoeken die ongeveer even groot is als jullie eigen organisatie. Dit voorkomt dat je de grootste klant van een klein bedrijf wordt of juist de kleinste klant van een groot bedrijf, hetgeen beide vaak niet optimaal is.

Selecteer een goede hosting partij

Er komt een boel kijken bij het kiezen van de juiste hosting partij. Niet alleen lopen de prijzen uiteen van een paar euro per maand tot een paar duizend euro per maand, ook de kwaliteit van de hosting zelf verschilt vaak enorm. Daar komt dan nog eens bovenop dat sommige platformen zoals Magento vaak nog een specifieke hosting setup vereisen, die dan vervolgende weer totaal verschillend uitgewerkt wordt door de hosting partijen. Ga niet over één nacht ijs bij het kiezen van een hosting partij en laat zeker de maandelijkse kosten niet de enige factor zijn die je meeweegt in je beslissing. Een aanvullende tip is om niet blind te kiezen voor de hosting partij die je website bouwer je aanbeveelt. Vraag hen waarom er specifiek voor deze partij gekozen wordt en wat bijvoorbeeld hun voordelen en nadelen ten opzichte van vergelijkbare partijen zijn.

Optimalisatie tips voor gevorderden

Nadat de basis op orde is wordt het zaak om verder te kijken. Onderstaande website optimalisatie tips geven een beeld van de mogelijkheden die er zijn om je website verder te verbeteren. Zo zorgen zij voor optimalisatie op het gebied van laadsnelheid, beveiliging, toegankelijkheid, foutoplossing, en ontwikkelsnelheid.

Maak gebruik van HTTP/2 of HTTP/3

Wanneer je een website bezoekt, dan worden de gegevens van die website via het HTTP netwerk protocol verstuurd naar jouw apparaat. Voorheen had je als website slechts één keus op dit gebied, namelijk gebruikmaken van HTTP/1.1. In mei van 2015 werd echter HTTP/2 geïntroduceerd, die een sterk aangepaste methode gebruikt om data over het netwerk te versturen. Intussen is in januari van 2021 zelfs HTTP/3 officieel aangekondigd, die op zijn beurt ook weer grote wijzigingen kent.

Verbetering ten opzichte van HTTP/1

Een belangrijk verbetering in HTTP/2 voor wat betreft het optimaliseren van websites is dat de datapakketjes in parallel vanaf de server naar de browser verstuurd kunnen worden. Hierdoor kan een website potentieel veel sneller inladen dan dit op HTTP/1 het geval was. Om hier optimaal gebruik van te maken is het echter wel zaak dat je de code van je website hier goed voor neerzet. Kort door de bocht kun je bij HTTP/2 namelijk beter een grotere hoeveelheid kleine bestanden inladen dan een kleinere hoeveelheid grote bestanden. Voorgaande is precies het omgekeerde van hoe dat bij HTTP/1 het geval was.

Nakijken welk protocol je nu gebruikt

Met behulp van Google Chrome kun je nakijken via welk protocol je website en bestanden worden ingeladen. Dit doe je door naar je website toe te gaan, en vervolgens de developer mode te openen (cmd+shift+c op Mac of F12 op Windows). Daarna klik je op de 'Network' tab om deze afdeling te openen. Vervolgens klik je met je rechtermuisknop op de bovenste rij van de tabel onderaan je scherm en vink je 'Protocol' aan. Als je nu je website ververst dan zie je voor iedere request met welk protocol deze ingeladen wordt. Zitten hier nog een groot aantal requests met 'http/1.1' tussen? Dan wordt het mogelijk tijd om je met developer en hosting partij te gaan overleggen of een overstap naar HTTP/2 misschien wenselijk en mogelijk is.

Haal dubbele ID attributes weg

Elke id-attribuut in een HTML document moet uniek zijn. Dit zorgt ervoor dat screen readers hun werk goed kunnen doen voor bezoekers met beperkingen en dat JS en CSS code gekoppeld kan worden aan één specifiek element. Denk bijvoorbeeld aan het toevoegen van click tracking op een call to action knop waarbij je alleen clicks op die specifieke knop wilt meten.

Met behulp van de Lighthouse tool in Google Chrome kun je nakijken of jouw website dubbele id attributen heeft. Mocht dit het geval zijn, dan kun je bespreken met je developers wat hier aan gedaan kan worden.

Voeg relevante ARIA attributes toe

Toegankelijkheid van websites wordt een steeds belangrijker onderwerp. Zo is het sinds enige tijd verplicht voor Nederlandse overheidswebsites om te voldoen aan toegankelijkheidseisen. Ook voor 'normale' websites is het echter een win-win om deze te optimaliseren voor toegankelijkheid. Zo zorgt dit er allereerst natuurlijk voor dat bezoekers met een beperking de website beter kunnen gebruiken. Een bijvangst hiervan is echter dat de website in sommige situaties ook beter zal presteren voor bezoekers zonder beperking. Denk bijvoorbeeld aan het bekijken van de website op een tablet in de zon. Door gebruik te maken van een verhoogd contrast zal ook deze bezoeker zonder beperking de tekst op de website beter kunnen lezen. Verder helpen veel andere maatregelen die bijdragen aan toegankelijkheid (zoals het toevoegen van alt tags aan afbeeldingen) ook bij zoekmachine optimalisatie.

Welke ARIA attributes inzetten

ARIA attributes zijn een methode om je website beter toegankelijk te maken voor bezoekers met een beperking. Binnen de WCAG 2.1 richtlijnen zijn er inmiddels een flink aantal ARIA attributes die je in kunt zetten. Tot welk niveau deze op dit moment relevant zijn voor jouw website is afhankelijk van diverse factoren, welke intern binnen de organisatie besproken dienen te worden.

Stel je HTTP headers goed in

Met elke pagina die je ophaalt in je browser komen er zogenaamde HTTP headers vanaf de server mee. Deze headers zijn opgedeeld diverse types, waarvan equest headers en response headers het meest relevant zijn in deze context. Met name op het gebied van response headers zijn er optimalisaties mogelijk vanuit een website. Zo kunnen HTTP headers ingezet worden voor het verbeteren van laadsnelheid, beveiliging, en SEO.

Benieuwd hoe de HTTP headers van jouw website er voor staan? Ga dan in Google Chrome naar de developer mode, open vervolgens de 'Network' tab en dubbelklik daarna op de rij waarbij in de kolom 'Type' het woord 'Document' staat.

Verklein je afbeeldingen

Een snelle laadsnelheid was altijd al van belang voor een goed conversiepercentage op je website. Recent heeft Google echter ook aangegeven dat zij laadsnelheid in de vorm van zogenaamde Web Vitals officieel mee gaan nemen als ranking factor. Daarmee is een snelle laadsnelheid nu nog belangrijker.

Afbeeldingen controleren

Afbeeldingen spelen (door hun bestandsformaat) een belangrijke rol bij de laadtijd. Het loont dan ook zeker om je afbeeldingen te optimaliseren, maar hoe gaat dit in zijn werk? Allereerst kun je met behulp van eerder genoemde 'Network' tool en Lighthouse audit bekijken hoe het er op jouw website voor staat qua afbeeldingen. Geeft Google aan dat er hier ruimte is voor verbeteringen?

Effectief je afbeeldingen verkleinen

Zorg er in ieder geval voor dat de afbeeldingen die je upload geen grotere afmetingen hebben dan nodig. Het is niet zeldzaam dat ik afbeeldingen tegenkom die als 200 x 300 worden getoond terwijl zij afmetingen van minstens tien keer zo groot hebben. Houd er hierbij wel rekening mee dat zogenaamde retina schermen het vereisen dat afbeeldingen in dubbele afmetingen beschikbaar zijn van waarin ze getoond worden. Nadat je de afbeeldingen in de juiste afmetingen hebt geschaald, dienen deze nog gecomprimeerd te worden. Mogelijk doet je website software dit automatisch voor je, maar als dit niet het geval is kun je dit zelf natuurlijk ook doen. Op Mac is er een hele handige tool genaamd ImageOptim die je kunt downloaden en direct vanuit je besturingssysteem kunt gebruiken om afbeeldingen te verkleinen. Op de PC kun je (naast een heleboel andere tools) gebruikmaken van de 'web service' die ImageOptim aanbiedt op hun website.

Conclusie

Het optimaliseren van websites kent veel verschillende vormen en vraagt doorlopend aandacht. Zorg er echter voor dat je eerst de basis van je website op orde krijgt voordat je met meer gevorderde website optimalisatie tips aan de gang gaat. Dit zal zorgen voor het hoogste rendement van je budget en tijd.