Logo visualcreations
Website omzetten naar Elementor

⁠Elementor website optimaliseren

Elementor is een van de populairste page builders die er zijn. Hoewel Elementor veel handige functies heeft, is de snelheid niet voor iedereen optimaal...
Website omzetten naar Elementor

Inhoud van dit artikel:

Elementor is een van de populairste page builders die er zijn. Hoewel Elementor veel handige functies heeft, is de snelheid niet voor iedereen optimaal. Dat is jammer, want niet alleen laadt de website langzaam, maar ook Google weegt de laadsnelheid mee in zijn ranking. De snelheid wordt namelijk gemeten door Core Web Vitals.

In deze blog neem ik je mee in de oorzaken van tragere laadtijden voor sites die gemaakt zijn met Elementor. Ook geef ik je tools om de snelheid te verbeteren. Op die manier zullen zowel bezoekers als Google je site meer waarderen.

Waarom een site met Elementor traag werkt

Snelheid is een gevoelig onderwerp onder websitebouwers. Vooral als het om Elementor gaat, lopen de gemoederen soms hoog op. Er zijn websitebouwers die Elementor namelijk geen goede page builder vinden vanwege de laadsnelheid.

Toch zijn slechte laadtijden goed te voorkomen met deze bouwer. Om dit te voorkomen of op te lossen, is het belangrijk om de oorzaak van de slechte laadtijden te achterhalen. Op die manier kun je als ontwikkelaar gerichter actie ondernemen om de prestaties te verbeteren.

Is Elementor echt trager dan andere builders?

Ja, Elementor is langzamer dan bijvoorbeeld de standaard WordPress builder Gutenberg. Toch betekent dit niet dat het onmogelijk is om een snelle site te bouwen met Elementor. Met de juiste optimalisatie is het zeker haalbaar om een Google PageSpeed score van 90+ te halen of zelfs richting de 100 te gaan.

Hiervoor moet je rekening houden met de volgende zaken:

  • Elementor zorgt voor gemak, maar er is optimalisatie nodig om een snelle website neer te zetten.
  • Download niet te veel extra functies en addons. Deze zorgen vaak juist voor problemen.

Maar voordat je begint met optimaliseren, is het belangrijk om een back-up te maken van je website. Er kunnen bepaalde dingen conflicteren en dat heeft weer invloed op de voorkant van je website.

Wanneer je het goed aanpakt, kunnen sites met Elementor zeker snel en gebruiksvriendelijk zijn. Het vraagt alleen wel meer aandacht voor de prestaties.

Waarom een Elementor website geoptimaliseerd moet worden

Elementor is populair vanwege de gebruiksvriendelijke drag-and-drop interface. Wanneer je een website bouwt kan je direct zien welke widgets je gebruikt en welke veranderingen je aanbrengt. Dit levert helaas ook nadelen op voor de prestaties.

Hoe zit dat precies?

Door de realtime preview functie voegt Elementor extra code toe, zoals HTML, CSS en JavaScript. Ook wordt gebruikgemaakt van externe lettertypen, pictogrammen en bibliotheken. Dit alles leidt tot meer gegevensverkeer bij het laden van pagina’s.

Moet ik Elementor dan maar niet gebruiken?

Dat kan natuurlijk gewoon. Met wat aanpassingen en optimalisaties is het zeker mogelijk om een snelle website te bouwen met Elementor. Het kost alleen wel meer tijd en skills dan bij eenvoudigere builders.

De afweging is dus of de voordelen van Elementor opwegen tegen de extra inspanning van optimalisatie. Voor veel projecten is dat naar mijn mening zeker het geval.

Elementor website optimaliseren

Achterhalen van oorzaken voor een trage website

Voordat je aan de slag gaat met het optimaliseren van je website, is het verstandig om vast te stellen wat je website op dit moment vertraagt. Door de oorzaken te achterhalen, kun je gerichter actie ondernemen.

Hieronder leg ik een aantal oorzaken uit die ervoor kunnen zorgen dat je website traag wordt en wat je eraan kunt doen.

Trage plugins opsporen

Een veel voorkomende oorzaak van slechte prestaties zijn trage plugins. Dit zijn vaak Elementor addons. Gelukkig zijn er handige tools om de boosdoeners te achterhalen.

Een daarvan is de Query Monitor plugin. Zodra je deze plugin hebt gedownload en op instellingen klikt, kun je op het tabblad Database Queries klikken. In de laatste kolom met “tijd” kun je zien welke plugin veel tijd kost.

Een andere optie is om een plugin tijdelijk uit te schakelen om het verschil te zien. Is de website een stuk sneller? Dan weet je dat deze plugin geoptimaliseerd moet worden of misschien een alternatief nodig heeft. De snelheid van je website kun je testen via Google PageSpeed Insights.

Google page speed

Door trage plugins te ontdekken, weet je specifiek waar je kunt verbeteren. Dit is vaak een belangrijke stap in het optimaliseren van een Elementor website.

TTFB en instellingen van de hosting.

TTFB (Time To First Byte) staat voor de tijd tussen het moment dat een serververzoek wordt gedaan en het moment dat de eerste bytes van de content worden ontvangen. Dit is eigenlijk de laadtijd van de server. Een lange TTFB heeft veel invloed op Core Web Vitals.

Volgens Google mag TTFB maximaal 200 ms zijn. Je kunt dit checken in DevTools. Hiervoor moet je naar inspecteren gaan en op “netwerk” klikken bovenaan. Is je TTFB hoger? Dan is het misschien tijd voor een nieuwe hostingprovider.

Er zijn hostingpakketten die gespecialiseerd zijn in WordPress. Veel daarvan leveren goede prestaties. Maar voor sites met zogenaamde AJAX plugins, zoals filters, is het handig om zelf de caching-instellingen te kunnen bepalen. Niet elke managed hosting biedt dat.

Kortom, met de juiste serverinstellingen kun je TTFB verlagen en de snelheid verbeteren. Dit is zeker een aandachtspunt wanneer je een Elementor website optimaliseert.

Memory limit en CPU optimaliseren

Elementor vraagt een minimale geheugenlimiet van 256 MB, met 768 MB als aanbevolen instelling voor de beste prestaties.

Controleer de limieten van je hosting en pas deze aan in het bestand wp-config.php met:

‘define( ‘WP_MEMORY_LIMIT’, ‘768M’ );

CPU-gebruik moet ook worden gecontroleerd. Treedt er vaak een piek op? Zo ja, overweeg dan om de limiet te verhogen.

Voor dynamische Elementor sites wordt een echte dedicated server aanbevolen. Met gedeelde hosting kan hoog CPU-gebruik van andere klanten je site ook vertragen.

Het geheugen en de rekenkracht optimaal afstemmen op de behoeften van je site draagt bij aan het soepel laden van Elementor pagina’s. Dit is ontzettend belangrijk om de prestaties te verbeteren.

Elementor website optimaliseren: 16 tips

De juiste Elementor instellingen voor betere optimalisatie

Na het installeren van Elementor is het goed om even de tijd te nemen om de instellingen te bekijken. Onder het tabblad “Algemeen” kun je kiezen voor welke inhoudstypen je Elementor wilt gebruiken. Schakel types uit waarvoor je Elementor niet nodig hebt.

Op het tabblad Geavanceerd wordt de optie Extern CSS-bestand aanbevolen voor de CSS-uitvoermethode. Lettertypen kun je beter lokaal opslaan en Google Fonts uitschakelen. Mocht je externe lettertypen nodig hebben, kies dan de ‘swap’ laadmethode. Ook het uitschakelen van Font Awesome 4-ondersteuning bespaart veel dataverkeer.

Het tabblad Functies bevat de meeste relevante instellingen. Activeer alleen de secties die je echt gebruikt, want de meeste staan standaard aan. In het gedeelte Optimalisatie kun je bijvoorbeeld opties zien om DOM-opmaak te optimaliseren en het laden van onderdelen te verbeteren. Dit zorgt voor minder code en voorkomt onnodige downloads.

Flexbox-ondersteuning is ook belangrijk omdat veel Elementor-functies hiervan afhankelijk zijn. Houd er rekening mee dat content verdwijnt als je Flexbox uitschakelt nadat je ermee hebt gewerkt. Tot slot is het aan te raden om functies als notities en animaties uit te schakelen omdat ze niet nodig zijn.

Element Manager

Sinds versie 3.18 heeft Elementor een handige extra: Element Manager. Hier kun je alle widgets zien die je gebruikt, niet alleen van Elementor zelf maar ook van andere plugins.

Erg handig is dat je kunt zien hoe vaak een widget wordt gebruikt. Zo weet je of je deze kunt deactiveren of niet, bijvoorbeeld als deze al ergens in een lay-out staat.

Ongebruikte widgets kun je hier uitschakelen door op de widget te klikken. Met Elementor Manager heb je zichtbaarheid en controle over alle beschikbare widgets van Elementor. Zo gebruik je alleen diegene die nodig zijn voor een snelle en schone site!

Element Manager - Elementor

Optimalisatie / caching plugins en instellingen

Optimalisatie- en cachingplugins zijn een must voor Elementor sites. Je kunt hier dan ook kiezen uit verschillende plugins.

Voorbeelden van goede plugins zijn: Lightspeed en WP Rocket.

Deze plugins minimaliseren CSS en JavaScript, stellen de verwerking uit of vertragen deze en cachen natuurlijk.

Met de juiste plugin en goede instellingen bespaar je een hoop laadwerk en optimaliseer je de prestaties maximaal. Test verschillende opties om te zien wat het beste werkt voor jouw site. 

Voordat je hiermee aan de slag gaat, is het altijd een goed idee om een back-up van je site te maken. Komt er iets tussen? Dan kun je altijd terugvallen op de back-up van je website.

Beperk het aantal Elementor add-ons

Test en check add-ons zorgvuldig voordat je ze installeert. Kies alleen add-ons die je website niet onnodig zwaar maken en waarvan je alle tools echt gebruikt.

Ga niet te ver met Elementor add-ons. Het is beter om een hele plugin te installeren en maar één of twee widgets te gebruiken. Bovendien kunnen add-ons van verschillende makers conflicten veroorzaken.

Overweeg in plaats daarvan:

  • Gratis widgets uit de Elementor bibliotheek
  • Extensies van dezelfde maker voor een samenhangend geheel
  • Lichtere tools die minder invloed hebben op de prestaties

Door een kritische afweging te maken bij het kiezen en combineren van extensies, voorkom je dat je je site onnodig belast. Minder is soms meer als het op optimalisatie aankomt.

Elementor add-ons

Meer belangrijke optimalisatie tips

  1. Optimaliseer afbeeldingen. Kies bij voorkeur WebP-bestanden. Deze zijn vaak het kleinst qua bestandsgrootte.
  2. Stel je afbeeldingen in op Lazy Load. Behalve de afbeeldingen above the fold die websitebezoekers als eerste zien. 
  3. Gebruik een CDN voor de levering van afbeeldingen en content.
  4. Beperk revisies en automatische opslag om DB- en CPU-belasting te verminderen.
  5. Maak de database regelmatig schoon met Advanced Database Cleaner.
  6. Schakel pagina- en objectcaching in.
  7. Gebruik niet te veel plugins.
  8. Zorg ervoor dat WordPress, PHP en plugins up-to-date zijn.
  9. Activeer gzip-compressie op Apache-servers. Plugins bevatten deze functionaliteit of doen het in .htaccess.

Hulp nodig bij het optimaliseren van een Elementor website?

Het optimaliseren van je website is geen eenvoudige klus. Het vereist zowel kennis van performance-technieken als specifieke ervaring met Elementor. Heb je hulp nodig bij het implementeren van optimalisaties of het vaststellen van knelpunten? Neem dan gerust contact met me op.

Ik heb jarenlange ervaring met het bouwen en optimaliseren van snelle websites met Elementor. Ik weet als geen ander welke aanpassingen de laadtijd en gebruikerservaring van je site kunnen verbeteren. Of het nu gaat om het updaten van plugins, het optimaliseren van afbeeldingen of het configureren van caching, ik help je graag op weg.

Picture of Tom Heijnens

Tom Heijnens

Webdesigner en Elementor expert. Door zijn jaren lange ervaring in het maken van de meest uiteenlopende projecten is hij gespecialiseerd in het maken van doordachte en ijzersterke designs.

Meer interessante blogs voor jou:

Dagen :
Uren :

- tijdelijk slechter bereikbaar -

Op reis tot
5 augustus