Als u zich enigszins beperkt door de flexibiliteit van lay-outs die door WordPress thema ‘s, bent u misschien geïnteresseerd in het bouwen van uw WordPress webpagina’ s met een page builder plugin.
WordPress pagina bouwers zijn razend populair geworden omdat ze iedereen, zelfs degenen zonder de gave van code, een mooie website of landing page laten bouwen met behulp van een eenvoudige drag and drop, WYSIWYG editor., Als u onderzoek welke website builder of WordPress plugin het beste voor u zou zijn, zul je kijken naar een aantal belangrijke factoren: gebruiksgemak, prijzen, Pagina-indeling sjablonen, enz. In dit bericht, we zijn gericht op het vergelijken van deze pagina bouwers op een factor: snelheid.
zijn de eindproducten die page builders produceren allemaal hetzelfde als het gaat om prestaties? Of, zijn deze bouwers het creëren van inefficiënte code bloat die vertraagt de prestaties van uw WordPress site en schaadt uw UX? Een mooie, pixel perfecte pagina is niet veel waard als uw gebruikers stuiteren omdat uw site duurt 5 seconden te laden.,
hoe snel uw website laadt is gekoppeld aan het succes. Statistieken geven aan dat elke 100 milliseconden laadtijd zorgt voor een toename van ongeveer 7% in uw bounce rate.
maar tenzij u de tijd wilt nemen om identieke landingspagina ‘ s te bouwen met verschillende pagina-bouwers en hun prestaties te testen, is het moeilijk om zeker te weten hoe elke pagina-bouwer opstapelt.
Nou … we namen de tijd.,
Ik bouwde bijna identieke landingspagina ‘ s met vijf populaire WordPress pagina bouwers en vervolgens liep ze door een hele reeks snelheidstests om de beste WordPress pagina bouwer in termen van prestaties te vinden. Nu ga ik al die gegevens met jullie delen.
hier is hoe ik deze 5 pagina bouwers ga testen
om de prestaties van elke pagina bouwer te testen, ga ik een landing page bouwen met elk van de vijf pagina bouwers. Ik zal dit ruwweg baseren op de Pagely landing page, met een paar elementen toegevoegd en verwijderd.,
deze landingspagina ‘ s zullen, zoveel mogelijk, Perfect identiek zijn, hoewel dit niet altijd haalbaar is vanwege de elementen die beschikbaar zijn in elke paginabouwer.
verwacht ook niet dat ze er zo goed uitzien als de originele pagely homepage, want ik ben… nou ja, geen professionele ontwerper (of zelfs een amateur ontwerper).,
zodra ik de bestemmingspagina met elke paginaboder heb gebouwd, zal Ik gegevens verzamelen met behulp van drie verschillende tools:
- WebPagetest – geeft een gedetailleerde prestatie – analyse, inclusief laadtijd en een “snelheidsindex”
- Pingdom Tools – biedt paginabelastingstijd, paginagrootte, aantal aanvragen
- Query Monitor plugin-toont hoeveel databasequery ’s de plugin maakt en hoe lang deze query’ s duren
Ik zal ook de tijd geven hoe lang duurt het me om de demo landing page te bouwen, maar ik raad je aan om deze getallen als ruwe schattingen te nemen, in plaats van absoluten., Hier is waarom: Ik heb sommige van deze pagina-bouwers meer gebruikt dan de anderen, dus het is niet wetenschappelijk voor mij om één “gemakkelijker te gebruiken” te verklaren dan de anderen.
hier zijn de Technische Details van mijn testopstelling
als deze tests een waarde hebben, moeten ze consistent zijn. En je moet erop vertrouwen dat ze consistent zijn.
dus voordat ik spring in een daadwerkelijke test, laten we eens kijken hoe mijn test site is opgezet:
- gehost op Pagely
- met WordPress 4.9.,2
- gebruikmakend van het Astra-thema, een populaire optie voor ontwikkelaars om te koppelen met pagina-bouwers
- geen zijbalk. Volledige breedte uitgerekt container (deze zijn Astra thema opties)
- Query Monitor plugin geïnstalleerd
- Geen andere plugins geïnstalleerd
- Geen pagina snelheid optimalisaties buiten die automatisch uitgevoerd door Pagely hosting
En hier zijn de pagina bouwer plugins die ik gebruik:
- Elementor – versie 1.9.2*
- de Bever Builder Pro – versie 2.0.3.1
- Divi Builder plugin (dus niet het thema versie) – versie 2.0.,31
- WPBakery Page Builder-versie 5.4.2 (voorheen bekend als Visual Composer)
- SiteOrigin Page Builder – versie 2.6.1 plus SiteOrigin Widgets Bundle version 1.11.3
*omdat Elementor Pro een add-on is, in plaats van een zelfstandige plugin zoals de andere premium versies, denk ik dat het eerlijk is om te testen met behulp van de gratis versie van Elementor.
het uitvoeren van de Tests voor elke individuele WordPress pagina bouwer
nu je weet waarop deze tests zijn gebouwd, laten we springen in en kijken naar de gegevens!,
Voor elke pagina bouwer, ik zal zijn:
- Een schermafbeelding van wat de geteste landing pagina ziet eruit als
- Pingdom performance data
- WebPagetest performance data
- Hoe lang het duurde om de pagina te maken (denk eraan dit is slechts een ruwe richtlijn – neem het niet als een harde vergelijking)
- Een schermafbeelding van wat er gebeurt na het uitschakelen van de pagina bouwer, om een idee te geven van hoe veel “lock-in” is er
en Dan aan het einde, zal ik zet het allemaal samen in één, makkelijk te vergelijken met tabel en maak een aantal conclusies!, Als u liever de play-by-play overslaat, kunt u hier klikken om direct naar de overzichtstabel te gaan.
Elementor Performance Test
net als alle pagina builder plugins die hier worden weergegeven, maakt Elementor het eenvoudig om snel een mooie webpagina te maken zonder HTML, CSS of Javascript te hoeven kennen.
Elementor biedt een unieke functie genaamd “Elementor Canvas” waarmee u een webpagina volledig vanuit het niets te bouwen — volledig los van het WordPress thema. Er is geen voettekst ingevoegd, geen menu ‘ s, geen sidebars., Het is de ultieme flexibiliteit in WordPress design en zeer handig voor het maken van drag and drop landing pages in het bijzonder (die vaak gebruik maken van niet-standaard lay-outs en vereisen minimale afleiding van de oproep tot actie).,
Wat De Landing Pagina eruit Zag:
Tijd om Te Bouwen Pagina: 22:09
Pingdom Test Gegevens:
WebPagetest Test Gegevens:
Query Monitor Data:
Wat Gebeurt er Na het Uitschakelen van De Plugin:
de Bever Builder en Performance Testen
de Bever Builder is een populaire website building plugin gebruikt door meer dan 175k websites. Het is beroemd om zijn gebruiksgemak en intuã tieve gebruikersinterface.,
Het biedt ook een aantal geavanceerde functies, zoals sneltoetsen en de mogelijkheid om rijen en kolommen op te slaan, zodat ze gemakkelijk kunnen worden hergebruikt. Beaver Builder is gebouwd op de Bootstrap framework en beweert snel en lichtgewicht te zijn., Laten we eens kijken hoe het werkt in de echte wereld…
Wat De Landing Pagina eruit Zag:
Tijd om Te Bouwen Pagina: 20:37
Pingdom Test Gegevens:
WebPagetest Test Gegevens:
Query Monitor Data:
Wat Gebeurt er Na het Uitschakelen van De Plugin:
Divi Builder en Performance Testen
Divi, door Elegante Thema ‘ s, is zowel een WordPress thema en een stand-alone pagina builder plugin., Hier zijn we de herziening van de prestaties van de website builder plugin niet het WordPress thema.
u kunt pagina ’s en berichten maken in de WordPress-backend of zelfs uw site ontwerpen met behulp van WordPress’ s frontend met een wyswig-editor. Divi biedt honderden kind thema ‘ s en pre-built pagina templates. Trouw aan de naam van het bedrijf, Divi biedt een echt elegante pagina gebouw ervaring met veel Pools, eye candy, en intuã tieve functies.,
Wat De Landing Pagina eruit Zag:
Tijd om Te Bouwen Pagina: 21:02
Pingdom Test Gegevens:
WebPagetest Test Gegevens:
Query Monitor Data:
Wat Gebeurt er Na het Uitschakelen van De Plugin:
WPBakery Pagina Builder en Performance Testen
net Als de Elementor, WPBakery is vaak gebundeld in veel populaire WordPress thema ‘ s., WPBakery onderscheidt zich van veel van de andere pagina bouwers vanwege het aantal add-ons en verbeteringen zijn beschikbaar. U kunt kiezen uit meer dan 200 add-ons die alles doen van slick CSS animaties om het verbeteren van uw WooCommerce productpagina ‘ s.,
Wat De Landing Pagina eruit Zag:
Tijd om Te Bouwen Pagina: 27:18
Pingdom Test Gegevens:
WebPagetest Test Gegevens:
Query Monitor Data:
Wat Gebeurt er Na het Uitschakelen van De Plugin:
SiteOrigin Pagina Builder en Performance Testen
SiteOrigin is volledig gratis. Terwijl veel pagina bouwers installeren hun eigen widgets, Site oorsprong is uniek in dat het speelt leuk met standaard WordPress widgets.,
hoe de Landing Page eruit zag: * SiteOrigin Page Builder heeft geen teller-element, dus gebruikte ik statische HTML in plaats daarvan wat het een klein voordeel geeft in de prestatietests.,
Tijd om Te Bouwen Pagina: 19:51
Pingdom Test Gegevens:
WebPagetest Test Gegevens:
Query Monitor Data:
Wat Gebeurt er Na het Uitschakelen van De Plugin:
WordPress Page Builder Snelheid Vergelijking
Na alle tests werden uitgevoerd en de gegevens worden verwerkt, hier is hoe dingen schudde.
laten we eerst naar het goede Kijken., Hier is de winnaar van elke categorie:
- Snelste Pingdom de laadtijd van de Pagina: SiteOrigin Pagina Builder op 390 ms
- Minimaal Pingdom Aanvragen: SiteOrigin Pagina Builder met 13
- Laagste Pingdom Pagina Grootte: SiteOrigin Pagina Builder met 245.0 kB
- Snelste WebPagetest Volledig Geladen Tijd: SiteOrigin Pagina Builder met 578 ms
- Laagste WebPagetest snelheidsindex: SiteOrigin Pagina Builder op 500
- Minimaal Database-Query ‘ s: Divi Builder met 8
- Laagste Database Query Time: Divi Builder op 0.,0039 s
En laten we nu eens kijken naar de slechtste performer in elke categorie in onze tests:
- Langzaamste Pingdom de laadtijd van de Pagina: Bever Builder, 665 ms
- de Meeste Pingdom Aanvragen: Elementor met 28
- Hoogste Pingdom Pagina Grootte: Divi Builder op 532.7 kB
- Langzaamste WebPagetest Volledig Geladen Tijd: Divi Builder op 1.294 s
- Hoogste WebPagetest snelheidsindex: Divi Builder, 901
- de Meeste Database-Query ‘ s: Elementor met 30
- Hoogste Database Query Time: Elementor op 0.,Page Builder
Pingdom Page Load 489 ms 665 ms 463 ms 401 ms 390 ms Pingdom Requests 28 20 15 15 13 Pingdom Page Size 530.,7 kB 416.6 kB 532.7 kB 435.7 kB 245.0 kB WebPagetest Fully Loaded 1.254 s 943 ms 1.,d=”573b113c2a”>578 ms WebPagetest Speed Index 574 700 901 610 500 Database Queries 30 14 8 10 9 DB Queries Time 0.,0123 0.0059 0.0039 0.0042 0.0042 Time To Build Page 22:09 20:37 21:02 27:18 19:51 What Conclusions Can We Draw About Page Builder Performance?,
de gegevens zijn er voor u om zelf te interpreteren. Maar hier zijn enkele conclusies waarvan ik denk dat ze het overwegen waard zijn:
pagina bouwers zijn, tot op zekere hoogte, een evenwicht tussen prestaties en functies
Het is niet verwonderlijk dat SiteOrigin Page Builder de beste prestaties had in bijna alle tests.
maar hier is het ding:
SiteOrigin Page Builder is niet alleen lichtgewicht als het gaat om prestaties – het is ook lichtgewicht als het gaat om functies.,
u krijgt betere prestaties dan de andere paginabouwers door ten dele functionaliteit op te offeren.
voor de prestatiegerichte optie is die trade-off wellicht de moeite waard.
maar andere mensen kunnen bereid zijn om een beetje van de prestaties te ruilen voor een meer krachtige pagina bouwen ervaring, en ik denk niet dat er per se iets mis mee.
De gemiddelde gebruiker zal in staat zijn om een complexere pagina te bouwen met een van de andere vier paginabouwers.,
om die reden denk ik dat het het beste is om te zoeken naar een pagina builder die de functies heeft die u nodig hebt en dan de prestaties van pagina builders te vergelijken die aan die criteria voldoen.
er zijn geen grote verschillen tussen de krachtige WordPress pagina bouwers
Als u SiteOrigin Page Builder uitsluit en u alleen richt op de meer feature-rijke pagina bouwers, zult u merken dat er geen ton verschil tussen hen is.,
U kunt zeker enkele verschillen zien – Elementor is een beetje zwaar op database queries en verzoeken, terwijl Beaver Builder de kleinste paginagrootte bood.
maar over het algemeen hebben al deze plugins duidelijk gewerkt om de prestaties te optimaliseren, wat waarschijnlijk de reden is waarom ze de marktleiders in de ruimte zijn.
shortcode Lock-in Is een echte overweging
Als u een paginabouwer voor het leven kiest, hoeft u zich hier geen zorgen over te maken.,
maar als je denkt dat er een kans is dat je later overschakelt (of stopt met het gebruik) van pagina-bouwers, is het belangrijk om erop te wijzen dat slechts twee van deze pagina-bouwers volledig schone code achterlaten.
de twee plugins die 100% schone code achterlaten zijn:
- Elementor
- Beaver Builder
SiteOrigin Page Builder laat meestal schone code achter, maar het laat een paar shortcodes achter, met name opdagen waar ik gebruikte knoppen.,
ten slotte laten zowel Divi Builder als WPBakery Page Builder een hoop shortcodes achter die je nodig hebt om een manier te vinden om te verwijderen.
Wat zijn uw ervaringen met de prestaties van WordPress Page Builders?
natuurlijk is de snelheid van uw WordPress website slechts een factor om rekening mee te houden als het gaat om het vinden van de beste page builder voor uw site. Dingen zoals gebruiksgemak, de kwaliteit van de pagina templates ze omvatten, hoe eenvoudig de styling van de pagina ‘ s is, prijzen, niveau van ondersteuning, en vele andere factoren komen in het spel.,
maar, wat je uiteindelijk probeert te produceren is een mooie website die snel laadt, dus de prestaties van deze verschillende pagina bouwers is een kritische overweging.
Wat zijn uw eigen ervaringen met deze WordPress page builder plugins en prestaties? En nog belangrijker, waar denk je dat de balans moet liggen tussen functies en prestaties? Voor een andere diepgaande mening stuk van Pippin Williamson op pagina bouwer plugins, check this out.,
auteur
Colin Newcomer
Colin Newcomer is een freelance schrijver met een achtergrond in SEO en affiliate marketing. Hij helpt klanten hun zichtbaarheid op het web te vergroten door voornamelijk te schrijven over digitale marketing, WordPress en B2B-onderwerpen.
