Je pagina is een doolhof: zo maak je je HTML lichter
Je pagina bestaat uit HTML-elementen: koppen, alinea's, blokken in blokken in blokken. Al die elementen samen heten de DOM. Paginabouwers maken daar soms duizenden van, ook voor een eenvoudige pagina.
In het kud-rapport Je pagina is een doolhof
Waarom het uitmaakt
Hoe meer elementen, hoe meer werk de browser heeft met opbouwen, opmaken en bijwerken. Dat maakt laden en reageren trager, vooral op telefoons.
Een zware HTML kost ook gewoon downloadtijd. Soms komt dat door ingesloten afbeeldingen of grote blokken code die de paginabouwer in de pagina zet.
Zo los je het op
- Vereenvoudig je opbouw. Elk extra blok-in-een-blok kost iets; vaak kan dezelfde opmaak met minder lagen.
- Laad lange lijsten, sliders en tabbladen niet allemaal tegelijk. Toon eerst een deel en laad de rest als iemand erom vraagt.
- Verwijder verborgen inhoud die er alleen voor mobiel of desktop staat; vaak staat alles dubbel in de pagina.
- Controleer of er geen afbeeldingen als tekst (base64) in je HTML zijn ingebakken.
Op jouw platform
- WordPress
- Paginabouwers als Elementor en Divi maken veel geneste elementen. Recente versies hebben opties om dat te beperken, zoals "optimized DOM output" of containers in plaats van secties en kolommen.
Veelgestelde vragen
Hoeveel elementen is te veel?
Google waarschuwt vanaf ongeveer 800 elementen en geeft een fout vanaf ongeveer 1400. Het gaat ook om de diepte: blokken die heel diep genest zijn.
Moet ik daarvoor mijn hele site opnieuw bouwen?
Meestal niet. Begin met de zwaarste pagina's, vaak de homepage, en ruim daar de grootste onderdelen op.