Als u uw site met Elementor hebt laten bouwen, hebt u waarschijnlijk weleens gelezen dat paginabouwers traag zijn. Dat is te kort door de bocht, maar er zit iets in. Elementor voegt een laag toe: uw opmaak wordt opgeslagen als een structuur die bij elk bezoek omgezet moet worden naar HTML en CSS. Doet u dat slordig, dan zit u zomaar aan drie keer zoveel bestanden als nodig.
Het goede nieuws is dat u Elementor sneller maken kunt zonder de site opnieuw te bouwen. Hieronder negen stappen, geordend van weinig moeite en veel opbrengst naar meer werk. Werk ze van boven naar beneden af en meet na elke stap. Maak vooraf een back-up en test bij voorkeur op een oefenomgeving.
Stap 1 tot 3: het laaghangend fruit
1. Zet de experimentele functies aan. In het beheer vindt u onder Elementor de sectie Functies. Daar staan schakelaars die in nieuwere versies standaard aan horen te staan maar bij oudere sites vaak uit zijn blijven staan. De belangrijkste zijn Optimized DOM Output, Improved CSS Loading, Inline Font Icons en Optimized Markup. Samen schelen ze doorgaans tientallen procenten aan overbodige HTML en CSS. Zet ze één voor één aan en controleer telkens of de opmaak nog klopt, want bij oude aangepaste CSS kan er iets verschuiven.
2. Laad alleen de pictogrammen die u gebruikt. Elementor laadt standaard de complete Font Awesome-verzameling: duizenden pictogrammen voor de drie die op uw pagina staan. Met Inline Font Icons aan wordt elk pictogram als losse SVG in de pagina gezet en verdwijnt dat lettertypebestand. Dat scheelt al snel honderd kilobyte per pagina.
3. Ruim de extra widgets op. Veel sites hebben naast Elementor Pro nog twee of drie widgetpakketten draaien, waarvan er één ooit is geïnstalleerd voor één enkel element. Die pakketten laden hun eigen stijl- en scriptbestanden op elke pagina. Kijk welke u werkelijk gebruikt, en of u het overblijvende element kunt vervangen door een standaardwidget. In de betere pakketten kunt u bovendien per module aangeven of hij geladen moet worden; zet daar alles uit wat u niet gebruikt.
Stap 4 tot 6: opmaak en beeld
4. Beperk het aantal lettertypen. Elementor maakt het verleidelijk om per sectie een ander lettertype te kiezen. Elk lettertype met elk gewicht is een apart bestand. Twee lettertypen met elk twee gewichten is ruim voldoende voor de meeste sites. Zet in de globale instellingen vast wat u gebruikt en haal de rest weg. Host ze bovendien op uw eigen server in plaats van ze bij Google op te halen; dat scheelt een extra verbinding en is prettiger voor de privacywetgeving. Wij schreven daar apart over in ons artikel over het lokaal hosten van lettertypen.
5. Vervang zware elementen door lichte. Sommige widgets kosten veel meer dan ze opleveren. Een slider met vijf sfeerfoto’s laadt vijf grote afbeeldingen plus een scriptbibliotheek, terwijl bezoekers zelden verder komen dan het eerste beeld. Eén stevige afbeelding met een titel eroverheen doet hetzelfde werk. Hetzelfde geldt voor animaties bij het scrollen, tellers, deeltjesachtergronden en ingesloten video’s die automatisch starten. Vraag u per element af of het iets toevoegt voor de bezoeker of alleen voor het gevoel van de bouwer.
6. Pak de bovenste sectie apart aan. De grote afbeelding boven aan uw pagina bepaalt in de meeste gevallen wanneer Google uw pagina als zichtbaar beschouwt. Zorg dat die afbeelding niet lui laadt, dat hij niet groter is dan het scherm waarop hij getoond wordt en dat er geen animatie overheen zit die hem pas na een seconde toont. Ook een achtergrondafbeelding die via CSS geladen wordt, kan hier het probleem zijn. Meer daarover in ons stuk over het verbeteren van de LCP.
Stap 7 tot 9: onder de motorkap
7. Regel caching op één plek. Elementor-pagina’s zijn zwaar om op te bouwen, dus paginacache levert hier meer op dan bij een eenvoudig thema. Kies één cacheoplossing, in de plugin of bij uw hostingpartij, en zet de rest uit. Zet daarnaast het regenereren van de CSS-bestanden aan na elke wijziging, anders blijft er oude opmaak rondslingeren.
8. Wees voorzichtig met uitstellen en samenvoegen. De meeste snelheidsplugins bieden opties om JavaScript uit te stellen of CSS te combineren. Bij Elementor gaat dat geregeld mis: menu’s die niet meer opengaan, formulieren die niets doen, tabbladen die stil blijven. Zet zulke opties één voor één aan en klik na elke wijziging uw site door op mobiel en desktop. Sluit bij twijfel de bibliotheken van Elementor uit van het uitstellen.
9. Ruim de database op. Elementor bewaart bij elke opslagbeurt een revisie van de volledige paginastructuur. Op een site die twee jaar meegaat, staan er zomaar honderden per pagina. Beperk het aantal bewaarde revisies en verwijder de oude. Ruim daarnaast de restanten op van plugins die u eerder hebt verwijderd; die laten vaak tabellen en instellingen achter.
Wat u niet moet doen
Er circuleert advies om Elementor helemaal te vervangen door het blokkensysteem van WordPress. Dat kan een goede keuze zijn bij een nieuwe site, maar het is geen snelheidsmaatregel voor een bestaande. U bouwt dan feitelijk de hele site opnieuw, met alle risico’s op verloren opmaak, gebroken links en verdwenen formulieren. Doe dat alleen als er inhoudelijk een reden voor is.
Evenmin verstandig: alle vinkjes in een snelheidsplugin tegelijk aanzetten en dan kijken wat er stukgaat. U weet dan niet meer welke instelling het probleem veroorzaakte en draait uiteindelijk alles terug, inclusief de instellingen die wel werkten.
Een voorbeeld uit de praktijk
Een tandartspraktijk uit Haarlem had een site met Elementor Pro, twee extra widgetpakketten en zes lettertypen. De homepage haalde op mobiel een score van 24 en laadde in ruim zeven seconden. De praktijkhouder overwoog een nieuwe site te laten bouwen.
Dat bleek niet nodig. De experimentele functies aan, één widgetpakket verwijderd en het tweede teruggebracht tot drie modules, de lettertypen naar twee, de slider op de homepage vervangen door één afbeelding, en de bovenste afbeelding uitgezonderd van lazy loading. De pagina laadde daarna in ongeveer 2,8 seconden en de score kwam boven de 70. Er is niets herbouwd; er is vooral veel weggehaald.
Wat u zelf kunt en wanneer u hulp inschakelt
De stappen 1 tot en met 6 kunt u met een beetje geduld zelf doen. Werk rustig, verander één ding tegelijk en houd bij wat u aanpast. Meet met een hulpmiddel dat op mobiel meet, want daar zit het probleem meestal.
De stappen 7 tot en met 9 raken aan caching, scripts en de database. Daar kan iets kapotgaan zonder dat u het meteen ziet, bijvoorbeeld een formulier dat pas een week later blijkt te haperen. Voelt u zich daar niet prettig bij, of blijft de site na alle vinkjes traag, dan is het verstandiger om een gerichte snelheidsoptimalisatie te laten uitvoeren op een oefenomgeving, zodat uw bezoekers er niets van merken.
Tot slot
Elementor is niet traag van zichzelf. Traag worden sites die tien widgets gebruiken waar er drie nodig zijn en zes lettertypen laden voor twee koppen. Begin daarom bij stap 1: open het functiescherm van Elementor en kijk of de optimalisaties aanstaan. Dat is vijf minuten werk en vaak de grootste sprong die u vandaag kunt maken.
