Wat betekent het vandaag de dag om low-code developer te zijn? Ik kan je vertellen dat het geweldig is. Alle dingen die mijn klanten maar bedenken zijn bijna altijd op te lossen met css.
Welke dingen kun je nu dan nu als AI boosted developer doen die je vroeger niet kon doen?
Met gebruik van AI kun je vragen om een widget die bijvoorbeeld niet helemaal is zoals de klant wil, aan te passen met css door te omschrijven welke widget je gebruikt, wat de huidige css class is en HTML en wat je dan voor uitkomst wél zou willen. Zo kun je met wat extra css heel specifiek bijvoorbeeld alleen de foto’s van een bepaalde widget aanpassen of van bepaalde posts etc. Je kennis van css is ineens geboost!
Heeft extra css gevolgen voor je website?
In principe is het niet slim om heel veel extra css te gebruiken als je WordPress Elementor gebruikt, stel dat Elementor de naam van een bepaalde class aanpast, dan werkt wellicht jouw target van je css niet meer, echter kun je het dan wel weer heel snel oplossen. Het probleem komt pas bij heel veel extra Javascript.
De “Gouden Regels” voor CSS in Elementor
Als je CSS wilt gebruiken zonder je SEO te schaden, houd je dan aan deze hiërarchie (van best naar slecht):
| Methode | Score | Waarom? |
| Child Theme style.css | ⭐⭐⭐⭐⭐ | Eén extern bestand, perfect gecached, zeer schoon. |
| Elementor Site Settings > Custom CSS | ⭐⭐⭐⭐ | Wordt centraal opgeslagen en vaak gecombineerd in de Elementor-cache. |
| Page Settings > Advanced > Custom CSS | ⭐⭐⭐ | Alleen laden op de pagina waar het nodig is, maar onoverzichtelijk. |
| Widget > Advanced > Custom CSS | ⭐ | Zorgt voor versnippering en herhaling van code. |
Wat is extra JavaScript dan?
Het lijkt een snelle en makkelijke oplossing: even een scriptje in een Code Snippet plugin plakken om die ene knop te animeren of een tracking-pixel toe te voegen. Maar als je dit te vaak doet bij een Elementor-site, bouw je eigenlijk een kaartenhuis dat de zoekmachines niet bepaald vrolijk maakt.
Hier is waarom de combinatie van WordPress + Elementor + een overvloed aan losse JavaScript (JS) snippets schadelijk kan zijn voor je SEO:
1. De “Dom-overload” en Paginasnelheid
Elementor is van zichzelf al een vrij zware plugin. Het genereert veel code (HTML-nesting) om visueel alles op zijn plek te krijgen.
- Het probleem: JavaScript-snippets worden vaak “render-blocking”. Dat betekent dat de browser van de bezoeker stopt met het laden van de rest van de pagina totdat het script volledig is verwerkt.
- SEO-gevolg: Je Core Web Vitals (met name de LCP – Largest Contentful Paint) kelderen. Google straft trage sites genadeloos af in de ranking.
2. Conflicten en ‘Jank’
Hoe meer losse snippers code je toevoegt, hoe groter de kans op namespace-conflicten. Als Snippet A en Snippet B (of Elementor zelf) dezelfde variabelen proberen aan te roepen, breekt de boel.
- Het probleem: Visuele “jank” (haperingen) of elementen die pas na 3 seconden op hun plek springen (Cumulative Layout Shift).
- SEO-gevolg: Een hoge CLS-score is een directe negatieve rankingfactor. Bovendien verhoogt een haperende site je bouncepercentage; bezoekers vertrekken direct, wat Google ziet als een teken dat je pagina niet relevant is.
3. De JavaScript Execution Time
Googlebot heeft een zogenaamd “crawl budget”. Hoewel Google tegenwoordig goed is in het renderen van JavaScript, kost dit veel meer rekenkracht dan het lezen van platte HTML.
- Het probleem: Als jouw site 20 kleine snippets moet uitvoeren voordat de content zichtbaar is, kan het zijn dat Googlebot de pagina niet volledig indexeert of de content verkeerd begrijpt.
- SEO-gevolg: Je belangrijkste zoekwoorden worden misschien niet eens opgepikt omdat de bot “stopt met kijken” voordat de scripts klaar zijn met het opbouwen van de pagina.
Vergelijking: Snippets vs. Schone Code
| Aspect | Veel Code Snippets | Geoptimaliseerde aanpak |
| Laadtijd | Traag (vele kleine HTTP-verzoeken) | Snel (gecombineerde bestanden) |
| Beheer | Onduidelijk waar fouten zitten | Centraal en overzichtelijk |
| Browser Cache | Snippets worden vaak niet gecached | JS-bestanden worden gecached |
| Googlebot | Heeft moeite met renderen | Kan direct bij de content |
Wat kun je beter doen?
- Gebruik de ‘Custom Code’ functie van Elementor Pro: Als je toch JS moet toevoegen, doe dit dan via de ingebouwde functie van Elementor. Deze is beter geoptimaliseerd dan de gemiddelde third-party snippet plugin.
- Minify & Combine: Gebruik een plugin zoals WP Rocket of Autoptimize om al die losse snippers samen te voegen in één bestand. Dit scheelt enorm veel verzoeken aan de server.
- Vraag jezelf af: Is dit nodig? Veel JS-aanpassingen voor visuele effecten kunnen tegenwoordig ook met simpele CSS worden gedaan. CSS is vele malen lichter en beter voor je SEO.
Hopelijk helpt dit
