Wanneer je ervoor kiest een nieuwe auto te kopen, bedenk je uiteraard waar je die auto voor nodig hebt. Rij je meestal alleen in de auto? Dan koop je waarschijnlijk een kleiner model, terwijl je voor je gezinnetje wellicht eerder voor een stationwagen kiest.
Wanneer je zo’n auto voor normale ritjes gebruikt, zoals het doen van boodschappen of het naar school brengen van de kinderen, dan is zo’n auto prima. Maar wanneer je ook nog met deze auto wilt racen, ga je toch naar andere dingen kijken.
Je kunt dan je auto uitrusten met een strakke spoiler, een brute uitlaat en effectieve side skirts, maar uiteindelijk zal je toch onder de motorkap moeten kijken om de prestaties van de auto te kunnen bevorderen.
Op het gebied van SEO werkt het ook zo met een website: je kunt visuele verbeteringen doorvoeren die de vindbaarheid van je website verbeteren (de content), maar je kunt ook onder de motorkap kijken om onzichtbare verbeteringen door te voeren. Veel van deze onzichtbare verbeteringen hebben invloed op hoe je website wordt ingeladen. Dit is met de introductie van de Google Web Core Vitals nog belangrijker geworden.
Een belangrijk onderdeel van het onzichtbaar optimaliseren van je website is het kiezen van de hosting, wat in principe de motor van je website is. Bij auto’s zit er een groot verschil tussen bijvoorbeeld een standaard Fiat motor en de motor die achterin een Lamborghini ligt. Zo is het ook bij hosting: je kunt voor een paar tientjes per jaar een hostingpakketje nemen dat op zich prima is, maar voor betere prestaties kom je hier vaak tekort mee.
Hoe krachtig je hosting moet zijn, is volledig afhankelijk van wat voor website je op deze hosting plaatst. Een simpele HTML-website heeft weinig rekenkracht vanuit de hosting nodig en zal bij een simpel hostingpakketje redelijk snel kunnen laden, terwijl dynamisch opgebouwde websites veel meer rekenkracht vereisen. Hierbij is een belangrijke rol weggelegd voor hoe efficiënt je website opgebouwd is – een website met veel inefficiënte processen of vervuiling vereist een krachtige hosting om snel te blijven werken.
Bij de motor van een auto gaat het niet alleen om het stuk metaal dat onder je motorkap ligt, maar ook de software van die motor. Zo is de Ford EcoBoost motor beschikbaar in versies van 100 en 125 pk, waarbij de motor zelf identiek is – de software maakt het verschil tussen deze twee versies.
De software op een server is net zo belangrijk. Als eerste is het belangrijk dat je software up-to-date gehouden wordt door je webhostingprovider. Naast dat nieuwere software (zoals PHP) vaak verbeteringen biedt op het gebied van snelheid, krijg je hiermee vaak ook verbeteringen op het gebied van veiligheid. Het efficiënt inrichten van de software op een server is echt een vak apart, dus kies voor een hostingprovider die hier veel ervaring mee heeft.
Met websitebuilders is het tegenwoordig veel eenvoudiger geworden om websites te maken. Moest je vroeger nog echt in de html/css/php duiken, hoef je tegenwoordig geen stukje code meer zelf te schrijven om een website in elkaar te zetten. Dit klinkt allemaal fantastisch, maar heeft wel als keerzijde dat websitebuilders generiek opgezet zijn.
Om alle opties aan te kunnen bieden, wordt er vaak veel onnodige code ingeladen. Daarnaast is het erg verleidelijk om extra plugins te installeren, niet wetende wat voor effect dit heeft op de snelheid van je website. Dit heeft tot als gevolg dat mensen veelal niet meer weten wat er precies ‘onder de motorkap’ van de website gebeurt.
Om een beeld te krijgen van wat je website precies inlaadt, kun je uiteraard de broncode induiken, maar het kan ook eenvoudiger: via de DevTools van je Chrome browser (Edge en Opera hebben precies dezelfde omgeving). De DevTools kun je openen door op F12 te klikken of door met de rechtermuisknop op de site te klikken en vervolgens voor ‘Inspecteren’ te kiezen.
Voor een SEO-specialist zijn er diverse tabbladen die erg interessant kunnen zijn om de prestaties van een website te verbeteren. Het elementen tabblad is interessant om te kunnen zien hoe bepaalde delen van de website in elkaar zitten, maar kan voor sommige SEO-specialisten nog vrij ingewikkeld zijn.
Een tabblad waar altijd wel naar moet worden gekeken is de console-tab. Hier zie je eventuele fouten bij het inladen van de website. Met fouten ontstaat er inefficiëntie bij het laden van de site, wat ten koste gaat van de snelheid. Vaak zijn dit fouten die je aan je ontwikkelaar door kunt geven.
De meest interessante tab is zonder twijfel de netwerk-tab. Wanneer je deze tab opent, zie je in eerste instantie nog niets, maar wanneer je de website opnieuw laadt, zie je de tab volstromen met allerlei bestanden. Let hierbij wel op dat je bij de instellingen de optie ‘Disable cache’ aan hebt staan en de optie ‘Preserve log’ uit hebt staan, tenzij je een situatie wilt testen met daarin een redirect.
De netwerk-tab toont precies welke bestanden er in worden geladen met het openen van de webpagina. Hierbij kun je bijvoorbeeld zien in welke volgorde dit gebeurt, hoe lang de browser over elk bestand doet en hoe groot de bestanden zijn. Het is verstandig om bij dit overzicht op de bestandsgrootte te sorteren, zodat je kunt zien hoe groot de ingeladen bestanden zijn. Dit kan vooral handig zijn om te ontdekken of er afbeeldingen met te weinig compressie of in een veel te groot formaat ingeladen worden. Ook kun je hier zien of er problemen zijn met het laden van bepaalde bestanden.
Binnen de netwerk-tab kun je ook zien hoe de website tijdens het laden verspringt (CLS), wat onderdeel is van de Web Core Vitals van Google. Hiervoor ga je naar de instellingen van het tabblad, waar je de optie ‘Capture screenshots’ aanvinkt. Vervolgens kun je door middel van screenshots zien hoe de website zich tijdens het laden opbouwt.
Per bestand kun je in de netwerk-tab ook interessante informatie vinden. Klik bijvoorbeeld op een CSS-bestand, waarna je in het schermpje op ‘Headers’ klikt. Hier zie je een grote hoeveelheid informatie over het bestand, de zogenaamde HTTP-headers. De voor een SEO-specialist meest interessante informatie staat achter ‘cache-control’ en ‘content-encoding’.
Bij cache-control vind je terug hoe lang een browser een bestand opslaat, voordat deze het bestand weer opnieuw gaat downloaden, met als gevolg dat het bestand sneller ‘beschikbaar’ is. Deze periode is vastgelegd in seconden. Stel deze periode via de HTTP-headers ten minste in op 30 dagen (2592000 seconden), al is het advies van Google zelfs 1 jaar (31536000 seconden). Deze informatie geef je per bestandstype aan, dus wanneer je niet vaak een afbeelding onder dezelfde naam opslaat kun je het bijvoorbeeld voor een afbeelding op 1 jaar instellen. Wanneer je af en toe wel wijzigingen in de CSS of javascript maakt, kun je hiervoor de cache-periode op 1 maand instellen.
Content-encoding is een manier om bepaalde data verkleind te versturen. Je hebt zelf waarschijnlijk wel eens bestanden verkleind door ze in een zip-bestand te plaatsen. Voor een website werkt het net zo, waarbij bijvoorbeeld HTML, CSS en javascriptbestanden gecomprimeerd naar je browser verstuurd worden en vervolgens automatisch worden uitgepakt. Dit wordt uitgevoerd door software dat op je server geïnstalleerd is, waarbij Brotli (te herkennen aan de benaming ‘br’) en Gzip de meest gebruikte software zijn.
Onderaan de netwerk-tab zie je onder andere hoeveel bestanden er gedownload zijn, hoe groot deze bestanden bij elkaar zijn en hoe lang de browser er over deed om de pagina te laden. De hoeveelheid bestanden is van belang, aangezien het gewoon meer tijd kost om meer bestanden te downloaden. Sinds de introductie van http/2 – dat op de meeste servers actief is – is het hebben van veel kleine bestanden zelfs beter dan het bundelen van deze bestanden, maar als je je website kunt versimpelen, kan dit nooit kwaad!
De totale grootte van de website is uiteraard een totaal van alle bestanden bij elkaar, waarbij kleinere websites over het algemeen sneller laden dan websites die in totale bestandsgrootte groter zijn. Dit alles resulteert in een laadtijd, waarbij de ideale laadtijd onder de twee seconden ligt. Duurt het langer om de website te laden? In de netwerk-tab kun je ook precies zien hoe het duurt om elk bestand in te laden, zodat je kunt achterhalen waar het probleem zit!
Websitebuilders zorgen er ook vaak voor dat je website – zonder dat je hier bewust van bent – data extern inlaadt. Denk hierbij bijvoorbeeld maar aan Google Analytics, Google Fonts, de Facebook conversiepixel, chatwidgets, etc. In de netwerk-tab kun je filteren op ‘3rd-party-requests’ om te zien wat er allemaal extern ingeladen wordt.
Probeer externe scripts altijd zoveel mogelijk te voorkomen, want elke keer moet de website de dns-gegevens ophalen en verbinding maken met elke externe server, voordat het bestand gedownload kan worden. Dit leidt opnieuw weer tot een langzamere laadtijd.
Dit kun je gelukkig oplossen door hoog in de broncode of in een HTTP-header alvast een verzoek in te dienen via een ‘preconnect’ of ‘prefetch’ optie, maar uiteindelijk heb je geen controle over externe verbindingen. Is de server in kwestie traag of heeft de externe partij een script extra zwaar gemaakt, dan zal jouw website ook trager laden.
Het laatste interessante tabblad van de Google Chrome DevTools is de Lighthouse-tab. Hier vind je de welbekende controle van de Google PageSpeed Insights, maar ook tips op het gebied van bijvoorbeeld SEO en Accessibility.
Wanneer je je website zo goed mogelijk voor vindbaarheid wilt optimaliseren, is het zeker van belang om onder de motorkap van je website te kijken. Hoe ver je hier echter mee wilt gaan is echter volledig afhankelijk van je concurrentie. Als je de strijd aan moet gaan met een Opel, hoef je echt je Fiat niet in te ruilen voor een Ferrari. Je eindigt daarmee wel op de eerste plaats, maar dat had je waarschijnlijk ook wel gedaan met een Ford voor slechts 5% van de kosten.
Zo werkt het ook met SEO: hoe ver je de hosting en de techniek van je website optimaliseert is volledig afhankelijk van hoe sterk je concurrentie is, waarna je met een kosten-batenanalyse kunt bepalen hoe ver je moet gaan.
Het mooie van SEO is gelukkig dat je niet telkens een volledig nieuw product hoeft te kopen, maar telkens een stapje verder kunt gaan. Wanneer je de eerste plaats in handen hebt is het verstandig om nog even een veilige voorsprong op te bouwen, waarna je met het onderhouden van je website en linkprofiel deze stevig in handen kunt houden.
Wij kunnen je daar ook bij helpen. Neem gerust contact met ons op en dan bespreken we alle mogelijkheden.
