Chrome DevTools

Chrome DevTools is de gereedschapskist die standaard in de Chrome-browser zit en waarmee je de HTML, CSS, JavaScript, netwerkverzoeken en prestaties van een webpagina kunt inspecteren. Je opent hem met F12, of met rechtermuisknop en Inspecteren. Voor SEO is het de snelste manier om te zien wat er echt gebeurt op een pagina, in plaats van wat de bouwer denkt dat er gebeurt.

De tabbladen die er voor SEO toe doen

• Elements: de HTML zoals de browser hem na uitvoering van JavaScript ziet. Hier check je of je H1, canonical en meta-description er daadwerkelijk staan.
• Network: alle bestanden die de pagina laadt, met formaat, statuscode en laadtijd. Je ziet direct welke afbeelding van 3 MB je pagina sloopt.
• Lighthouse: draait een audit op prestaties, toegankelijkheid en SEO-basics, en geeft concrete aanbevelingen.
• Coverage: laat zien welk deel van je CSS en JavaScript op deze pagina helemaal niet gebruikt wordt.
• Device toolbar: bekijk de pagina zoals een telefoon hem rendert. Google indexeert mobile-first, dus dit is de versie die telt.

Het verschil tussen broncode en DOM

Dit is waar veel mensen de mist ingaan. Met “Paginabron weergeven” zie je de rauwe HTML die de server stuurt. Het tabblad Elements toont de DOM: de HTML nadat JavaScript ermee aan de slag is geweest. Staat je content wel in Elements maar niet in de broncode, dan wordt hij door JavaScript ingeladen. Google kan daarmee omgaan, maar het gaat trager en foutgevoeliger.

Een concreet geval: een webshop toonde alle productbeschrijvingen via JavaScript vanuit een externe API. In Elements stond de tekst netjes, in de broncode niets. Google indexeerde de pagina’s als vrijwel leeg. Door de beschrijvingen server-side mee te sturen, waren ze een crawlronde later gewoon zichtbaar.

Snelle test die je meteen kunt doen

Open DevTools, ga naar Network, vink Disable cache aan en herlaad de pagina. Onderin zie je het totale gewicht. Zit je boven de 2 MB, dan valt er vrijwel altijd winst te halen met afbeeldingen en ongebruikte scripts. Wil je die analyse liever uit handen geven? Start met een gratis SEO-scan.