Vraag tien WordPress-bouwers naar de paginabouwer snelheid en u krijgt tien meningen, meestal stellig en zelden onderbouwd. De ene helft vindt dat Elementor en Divi de reden zijn dat het web traag is; de andere helft wijst erop dat een slecht gebouwde site in elke techniek traag is. Ze hebben allebei een punt, en het echte antwoord is nuttiger dan beide kampen.
Hieronder wat het verschil in de praktijk is, waar het vandaan komt, en wat u kunt doen als u niet van plan bent uw hele site opnieuw te bouwen.
Wat een paginabouwer technisch anders doet
De blokkeneditor van WordPress slaat uw inhoud op als HTML met opmerkingen erbij. De opmaak komt uit een klein stylesheet dat WordPress zelf meebrengt. Er is geen extra laag.
Een paginabouwer werkt anders. Uw pagina wordt opgeslagen als een structuur van instellingen, die bij elk bezoek wordt vertaald naar HTML en CSS. Daar hangt een raamwerk aan: scripts voor de bewerkbaarheid, een opmaakbibliotheek, vaak een iconenset en een animatiebibliotheek. Bovendien ontstaan er diepe nesten van omhullende elementen, waardoor de browser meer werk heeft met het berekenen van de indeling.
Dat is geen slordigheid, het is de prijs van visueel bouwen. U koopt dat iemand zonder codekennis een pagina kan aanpassen, en dat is voor veel ondernemers een reële besparing.
Paginabouwer, snelheid en het verschil in cijfers
Op een vergelijkbare pagina, gemeten op een testomgeving met dezelfde inhoud en dezelfde afbeeldingen, ziet het patroon er meestal zo uit:
- Blokkeneditor met een licht thema: zo’n vijftien tot vijfentwintig verzoeken, tussen de tweehonderd en vierhonderd kilobyte.
- Paginabouwer met standaardinstellingen: vijftig tot negentig verzoeken, tussen de achthonderd kilobyte en anderhalve megabyte.
- Paginabouwer plus een zwaar thema plus drie uitbreidingspakketten: boven de honderd verzoeken, twee megabyte en meer.
In tijd komt dat op een gemiddelde mobiele verbinding neer op een half tot anderhalve seconde verschil in de tijd tot de pagina bruikbaar is. Dat is merkbaar, maar het is minder dan wat een slordige startpagina met zes ongecomprimeerde foto’s kost. De volgorde van uw problemen is dus belangrijker dan de keuze van uw gereedschap.
Belangrijk detail: het verschil zit vooral in de eerste weergave. Bij goede caching en herhaalbezoek loopt het verschil terug, omdat de bestanden dan uit het geheugen van de browser komen. Hoe dat werkt staat in de uitleg over caching bij WordPress.
De verborgen kosten van een paginabouwer
Naast de laadtijd zijn er twee zaken die pas na jaren opspelen, en die in deze discussie vaak ontbreken.
Vastzitten aan het gereedschap. Schakelt u de bouwer uit, dan blijft er een pagina vol onbegrijpelijke haakjes over. Uw inhoud is er nog, maar de opmaak niet. Overstappen kost daarom altijd handwerk per pagina.
Onderhoud. Een bouwer is een grote plugin die vaak update, soms met wijzigingen die uw indeling verschuiven. Dat vraagt om testen na elke update, en dat is precies waarom een vaste testronde na updates bij dit soort sites geen luxe is.
Daar staat tegenover dat een bouwer bespaart op iets wat ook geld kost: u hoeft niet voor elke tekstwijziging een bureau te bellen. Voor een ondernemer die maandelijks pagina’s bijwerkt, kan dat opwegen tegen een halve seconde.
Er is nog een verschil dat pas zichtbaar wordt bij groei. Een site die met blokken is opgebouwd, kan later relatief eenvoudig een ander uiterlijk krijgen door het thema aan te passen; de inhoud staat immers los van de opmaak. Bij een bouwer zit de opmaak in de pagina zelf, dus een nieuw ontwerp betekent dat elke pagina opnieuw wordt ingericht. Voor een site van tien pagina’s is dat te overzien, bij honderd productpagina’s met eigen indelingen niet meer. Weet dus vooraf hoe groot uw site over drie jaar moet zijn.
Sneller worden zonder over te stappen
Voor de meeste lezers is dit het praktische deel. Deze ingrepen kunt u binnen een dagdeel doen en ze leveren op een gemiddelde bouwersite serieus tijd op.
- Zet ongebruikte functies uit. Zowel Elementor als Divi heeft een scherm met experimentele en optionele onderdelen. Zet daar de bibliotheken uit die u niet gebruikt.
- Schakel de meegeleverde iconenset uit als u alleen eigen iconen gebruikt. Dat scheelt vaak honderd kilobyte.
- Beperk uw lettertypen tot maximaal drie varianten en laad ze vanaf uw eigen server.
- Vermijd sectieachtergronden voor grote foto’s. Die worden altijd op volle grootte geladen, ook op een telefoon.
- Gebruik geen animaties op elementen boven aan de pagina. Die vertragen precies het deel dat gemeten wordt.
- Ruim overbodige nesten op. Vier secties in elkaar om een marge te krijgen komt vaak voor en kost berekentijd.
- Zet CSS-generatie op bestanden in plaats van in de pagina zelf, zodat de browser die kan bewaren voor het volgende bezoek.
Voor Elementor en Divi staan de specifieke instellingen uitgewerkt in de aparte artikelen daarover; de volgorde hierboven werkt bij allebei.
Wat wij aanraden
Bouwt u een nieuwe site en heeft u geen bijzondere ontwerpwensen, kies dan de blokkeneditor met een licht thema. U krijgt een snellere site die bovendien niet aan één leverancier vastzit.
Draait uw site al jaren op een paginabouwer en is iedereen eraan gewend? Dan is overstappen zelden de moeite waard puur voor snelheid. Slank af, ruim op en meet opnieuw. Wij zien bij WebMaintor regelmatig dat een opgeschoonde bouwersite sneller is dan een verwaarloosde blokkensite, wat maar weer laat zien dat onderhoud zwaarder weegt dan de techniekkeuze. Wat zo’n opschoonronde inhoudt, staat beschreven bij onze aanpak om overbodige bestanden per pagina te schrappen.
Concrete volgende stap: kijk in de instellingen van uw bouwer of er onderdelen aanstaan die u niet gebruikt, en zet er deze week twee uit. Meet ervoor en erna, dan weet u wat het u waard is.
