„Elementor is traag“ is een van de hardnekkigste beweringen in de WordPress-wereld. Ze is niet helemaal onjuist en toch misleidend. Een paginabouwer produceert meer markup dan handgeschreven code — dat kost iets. Maar wat Elementor-pagina's in de praktijk werkelijk traag maakt, zijn bijna altijd andere dingen, en die laten zich verhelpen.
De drie waarden waar het om gaat
Google meet sinds enkele jaren drie kengetallen die samen de Core Web Vitals vormen.
LCP (Largest Contentful Paint) — wanneer het grootste zichtbare element is geladen. Meestal de hero-afbeelding of de grote kop. Doel: onder 2,5 seconden.
INP (Interaction to Next Paint) — hoe snel de pagina op een invoer reageert. Heeft de eerdere FID-waarde vervangen. Doel: onder 200 milliseconden.
CLS (Cumulative Layout Shift) — hoe sterk de inhoud tijdens het laden verspringt. Iedereen kent het: u wilt een link aantikken en op het laatste moment schuift er een afbeelding tussen. Doel: onder 0,1.
Belangrijk om het te plaatsen: Google beoordeelt op velddata van echte bezoekers, niet op het testresultaat van één enkele oproep. Een goede waarde in het testgereedschap bij slechte velddata betekent dat uw bezoekers een andere pagina ervaren dan u.
LCP: bijna altijd de hero-afbeelding
In negen van de tien Elementor-projecten die ik bekijk, is de grote afbeelding bovenaan de reden voor een slechte LCP.
De grootte. Een foto rechtstreeks uit de camera is al snel 4000 pixel breed en meerdere megabytes groot. Weergegeven wordt hij op 1600 pixel. Schaal vóór het uploaden naar het werkelijk benodigde formaat.
Het formaat. WebP in plaats van JPEG bespaart bij gelijke kwaliteit doorgaans een derde. Er zijn plugins die dat automatisch afhandelen.
Geen lazy loading voor de hero-afbeelding. Dat klinkt tegenstrijdig, maar is doorslaggevend: vertraagd laden is bedoeld voor afbeeldingen die pas bij het scrollen zichtbaar worden. Past u het toe op de bovenste afbeelding, dan vertraagt u precies het element dat de LCP bepaalt. In Elementor schakelt u dat uit in de afbeeldings-widget.
Achtergrondafbeeldingen met beleid. Een afbeelding als containerachtergrond wordt later geladen dan een echte afbeeldings-widget. Voor het bovenste element op de pagina is de afbeeldings-widget de betere keuze.
CLS: ruimte reserveren
Layoutsprongen ontstaan als een element achteraf ruimte opeist die vooraf niet was ingepland. Drie oorzaken dekken vrijwel alles af.
Afbeeldingen zonder vaste maten. De browser weet pas tijdens het laden hoe hoog de afbeelding wordt en schuift alles daaronder naar beneden. Geef afbeeldingen breedte en hoogte of een vaste beeldverhouding.
Lettertypen die nalezen. De tekst verschijnt eerst in een vervangend lettertype en verspringt bij de wissel. Zelf gehoste lettertypen met een passende laadstrategie lossen dat op — en zijn privacyrechtelijk toch al de betere keuze, zie Elementor AVG-conform.
Balken die van boven inschuiven. Een cookiebanner of meldingsbalk die de inhoud naar beneden duwt, is een gegarandeerde CLS-treffer. Leg hem óver de inhoud in plaats van ervoor.
INP: minder is meer
De reactiewaarde lijdt onder te veel JavaScript. Bij Elementor-pagina's zijn de gebruikelijke verdachten: sliders en carrousels, geanimeerde tellers, bewegingseffecten bij het scrollen, ingesloten video's en externe scripts zoals chatvensters of tracking.
De doeltreffendste maatregel is ook de minst geliefde: gebruik er minder van. Een slider met vijf afbeeldingen waarvan nauwelijks iemand verder kijkt dan de eerste, kost laadtijd zonder tegenwaarde.
Voor ingesloten video's geldt: niet rechtstreeks insluiten, maar eerst een voorbeeldafbeelding tonen en de video bij een klik naladen. Elementor biedt daarvoor een optie in de video-widget.
Wat Elementor zelf meebrengt
Onder Elementor → Instellingen → Functies vindt u meerdere schakelaars die merkbaar helpen:
Geoptimaliseerd laden van CSS laadt alleen de stijlen die op de pagina nodig zijn, in plaats van één groot verzamelbestand. Verbeterd laden van assets en de optie om ongebruikte iconenbibliotheken weg te laten, gaan dezelfde richting op.
Schakel die opties afzonderlijk in en controleer daarna de pagina. In zeldzame gevallen ontbreekt een stijl die via een plugin van derden kwam.
Hoe u daarnaast opruimt, leest u in Elementor-ballast verwijderen.
Wat Pro daaraan verandert: niets
Om hier geen verkeerde verwachting te wekken — de Pro-versie maakt uw pagina niet sneller. Ze brengt functies, geen snelheid. Wie door Pro meer widgets inzet, wordt eerder trager.
Elementor Pro: Zinvol vanwege Theme Builder, formulieren en pop-ups — niet vanwege de laadtijd. Dat hoort bij een eerlijke inschatting. Bekijk Elementor Pro
De volgorde die ik aanhoud
Eerst de afbeeldingen, dan de caching, dan de lettertypen, dan de scripts. In die volgorde, omdat ze op afnemende opbrengst is gesorteerd. Bij de meeste pagina's brengen alleen al de eerste twee stappen de waarde van het rode naar het groene bereik.
Meet vooraf en achteraf, anders optimaliseert u blind. En meet mobiel — daar zijn de waarden slechter en daar valt de beoordeling.
Meer hefbomen heb ik verzameld in Elementor-performance optimaliseren. Als u dat liever een keer op uw eigen site doorloopt, doen we dat in mijn Elementor-training.
Tags