om du känner dig något begränsad av flexibiliteten i layouter som tillhandahålls av WordPress-teman kan du vara intresserad av att bygga dina WordPress-webbsidor med ett sidbyggarinsticksprogram.
WordPress-sidbyggare har blivit väldigt populära eftersom de låter någon, även de utan kodens gåva, bygga en vacker webbplats eller målsida med en enkel dra och släpp, WYSIWYG editor., När du undersöker vilken webbplatsbyggare eller WordPress-plugin som är bäst för dig, tittar du på ett antal viktiga faktorer: användarvänlighet, prissättning, sidlayoutmallar etc. I det här inlägget fokuserar vi på att jämföra dessa sidbyggare på en faktor: hastighet.
är de färdiga produkterna som sidbyggare lägger ut på samma sätt när det gäller prestanda? Eller, är dessa byggare skapar ineffektiv kod svälla som saktar ner din WordPress webbplats prestanda och skadar din UX? En vacker, pixel perfekt sida är inte värt mycket om dina användare studsa eftersom din webbplats tar 5 sekunder att ladda.,
hur snabbt din webbplats Laddas är knuten till dess framgång. Statistiken visar att varje 100 millisekunder av laddningstid skapar en ungefär 7% ökning av avvisningsfrekvensen.
men om du inte vill ta dig tid att bygga identiska målsidor med olika sidbyggare och testa deras prestanda, är det svårt att veta säkert hur varje sidbyggare staplar upp.
Tja… vi tog oss tid.,
Jag byggde nästan identiska målsidor med fem populära WordPress sida byggare och sedan sprang dem genom en uppsjö av hastighetstester för att hitta den bästa WordPress sida byggare när det gäller prestanda. Jag ska dela all data med dig.
så här ska jag testa dessa 5 sidbyggare
för att testa varje sidbyggare prestanda ska jag bygga en målsida med var och en av de fem sidbyggarna. Jag baserar det här ungefär på sidans målsida, med några element som läggs till och tas bort.,
dessa målsidor kommer att vara så mycket som möjligt helt identiska, även om detta inte alltid är möjligt på grund av de element som finns tillgängliga i varje sidbyggare.
förvänta dig inte heller att de ska se lika bra ut som den ursprungliga Pagely hemsidan eftersom jag är… Tja, inte en professionell designer (eller till och med en amatördesigner).,
När jag bygger målsidan med varje sidbyggare samlar jag in data med tre olika verktyg:
- WebPagetest – ger en detaljerad prestandaanalys, inklusive laddningstid och ett ”hastighetsindex”
- Pingdom Tools – ger sidbelastningstid, sidstorlek, antal förfrågningar
- Query Monitor plugin – visar hur många databasfrågor plugin gör och hur lång tid dessa frågor tar
jag tar också tid hur lång tid det tar för att bygga demo målsidan, men jag rekommenderar att du tar dessa siffror som grova uppskattningar, snarare än absolutes., Här är varför: gå in i dessa tester, jag har använt några av dessa sida byggare mer än de andra, så det är inte vetenskapligt för mig att förklara en ”lättare att använda” än de andra.
här är de tekniska detaljerna för min testinställning
för att dessa tester ska hålla något värde måste de vara konsekventa. Och du måste lita på att de är konsekventa.
så innan jag hoppar in i någon faktisk testning, låt oss gå igenom hur min testwebbplats är inställd:
- värd på Pagely
- kör WordPress 4.9.,2
- med Astra-temat, ett populärt alternativ för utvecklare att para ihop med sidbyggare
- inget sidofält. Full bredd sträckt Behållare (det här är Astra-temaalternativ)
- Query Monitor plugin installerat
- inga andra plugins installerade
- inga sidhastighetsoptimeringar utöver de som automatiskt implementeras av Pagely hosting
och här är sidbyggaren plugins som jag ska använda:
- Elementor-version 1.9.2*
- Beaver Builder Pro-version 2.0.3.1
- Divi Builder plugin (dvs. inte temat version) – Version 2.0.,31
- WPBakery Sidan Builder – version 5.4.2 (tidigare känd som Visual Kompositör)
- SiteOrigin Sidan Builder – version 2.6.1 plus SiteOrigin Widgets Bunt version 1.11.3
*Eftersom Elementor Pro är en add-on, snarare än en fristående plugin som andra versioner premium, jag tycker det är rättvist att testa att använda den gratis versionen av Elementor.
kör testerna för varje enskild WordPress-sidbyggare
Nu när du vet vad dessa tester är byggda på, låt oss hoppa in och titta på data!,
för varje sidbyggare ska jag inkludera:
- en skärmdump av vad den testade målsidan ser ut
- Pingdom performance data
- WebPagetest performance data
- hur lång tid det tog mig att skapa sidan (kom ihåg – det här är bara en grov riktlinje – ta det inte som en hård jämförelse)
- en skärmdump av vad som händer efter att ha inaktiverat sidbyggaren, för att ge dig en uppfattning om hur mycket ”lås-i” there is
sedan, i slutet, jag ska sätta ihop allt i en, lätt att jämföra tabell och göra några slutsatser!, Om du hellre hoppar över play-by-play kan du klicka här för att hoppa direkt till sammanfattningstabellen.
Elementor Performance Test
liksom alla sidkonstruktör plugins som presenteras här, Elementor gör det enkelt att skapa snygg webbsida snabbt utan att behöva veta någon HTML, CSS, eller Javascript.
Elementor erbjuder en unik funktion som heter ”Elementor Canvas” som låter dig bygga en webbsida helt från början — helt skild från WordPress-temat. Det finns ingen sidfot infogad, inga menyer, inga sidofält., Det är den ultimata flexibiliteten i WordPress design och mycket praktiskt för att skapa dra och släpp målsidor i synnerhet (som ofta använder icke-standardiserade layouter och kräver minimala distraktioner från uppmaning till handling).,
hur målsidan såg ut:
dags att bygga Sida: 22:09
Pingdom testdata:
WebPagetest testdata:
query monitor data:
vad händer efter att inaktivera plugin:
Beaver Builder performance test
Beaver Builder är en populär webbplats byggnad plugin som används av över 175k webbplatser. Det är känt för sin användarvänlighet och intuitivt användargränssnitt.,
det erbjuder också några avancerade funktioner som kortkommandon och möjligheten att spara rader och kolumner så att de lätt kan återanvändas. Beaver Builder är byggd på Bootstrap ramverk och påstår sig vara snabb och lätt., Låt oss se hur det fungerar i den verkliga världen…
hur målsidan såg ut:
dags att bygga Sida: 20:37
Pingdom testdata:
WebPagetest testdata:
Webpagetest testdata:
query monitor data:
vad händer efter avaktivering av plugin:
Divi Builder performance test
Divi, av eleganta teman, är både ett WordPress-tema och en fristående sidbyggare plugin., Här granskar vi resultatet av webbplatsen builder plugin inte WordPress tema.
Du kan skapa sidor och inlägg i WordPress backend eller ens designa din webbplats med hjälp av WordPress frontend med en WYSWIG editor. Divi erbjuder hundratals barn teman och färdigbyggda sidmallar. Trogen företagets namn, Divi erbjuder en verkligt elegant sida byggnad erfarenhet med massor av polska, ögongodis och intuitiva funktioner.,
hur målsidan såg ut:
dags att bygga Sida: 21:02
Pingdom testdata:
WebPagetest testdata:
query monitor data:
vad händer efter avaktivering av plugin:
WPBakery Page Builder performance test
som Elementor är WPBakery ofta buntas in med många populära WordPress teman., WPBakery sticker ut från många av de andra sidan byggare på grund av hur många tillägg och förbättringar finns tillgängliga. Du kan välja mellan över 200 tillägg som gör allt från slick CSS animationer för att förbättra dina WooCommerce produktsidor.,
hur målsidan såg ut:
dags att bygga sida: 27:18
Pingdom testdata:
WebPagetest testdata:
query monitor data:
vad händer efter avaktivering av plugin:
SiteOrigin Page Builder Performance Test
SiteOrigin är helt gratis. Medan många sidbyggare installerar sina egna widgets är Site Origin unikt genom att det spelar trevligt med standard WordPress widgets.,
hur målsidan såg ut: *SiteOrigin Page Builder har inget räkneelement, så jag använde statisk HTML istället vilket ger den en liten fördel i prestandatesterna.,
dags att bygga Sida: 19:51
Pingdom testdata:
WebPagetest testdata:
Query Monitor Data:
testdata för Webpagetest:
/p>
vad händer efter avaktivering av plugin:
wordpress page builder speed comparison
Efter alla tester kördes och data knastrade, här är hur saker skakade ut.
låt oss titta på det goda först., Här är den totala vinnaren från varje kategori:
- Snabbaste Pingdom Sidans laddningstid: SiteOrigin Sidan Builder på 390 ms
- Minst Pingdom Förfrågningar: SiteOrigin Sidan Byggare med 13
- Lägsta Pingdom Sidan Storlek: SiteOrigin Sidan Byggare med 245.0 kB
- Snabbaste WebPagetest fullastad Tid: SiteOrigin Sidan Builder med 578 ms
- Lägsta WebPagetest Speed Index: SiteOrigin Sidan Builder på 500
- Minst antal Frågor till Databasen: Divi-Builder med 8
- Lägsta databasfrågan Tid: Divi-Builder i 0.,0039 s
och nu ska vi titta på den värsta utövande i varje kategori i våra tester:
- långsammaste Pingdom Page Load Time: Beaver Builder på 665 ms
- de flesta Pingdom Requests: Elementor med 28
- högsta Pingdom Page Size: Divi Builder på 532,7 kB
- långsammaste WebPagetest fullastad tid: Divi Builder på 1.294 s
- högsta webpagetest hastighet index: Divi Builder på 901
- de flesta databasfrågor: Elementor med 30
- högsta databas Frågetid: Elementor på 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?,
data finns där för dig att tolka dig själv. Men här är några slutsatser som jag tycker är värda att överväga:
sidbyggare är i viss mån en balansakt mellan prestanda och funktioner
inte överraskande SiteOrigin Page Builder hade den bästa prestandan i nästan alla tester.
men här är saken:
SiteOrigin Page Builder är inte bara lätt när det gäller prestanda – det är också lätt när det gäller funktioner.,
du får bättre prestanda än de andra sidbyggarna genom att delvis offra funktionalitet.
för den prestationsfokuserade kan det vara väl värt att byta ut.
men andra människor kan vara villiga att handla lite prestanda för en mer kraftfull sida byggnad erfarenhet, och jag tror inte att det är nödvändigtvis något fel med det.
den genomsnittliga användaren kommer att kunna bygga en mer komplex sida med en av de andra fyra sidbyggarna.,
av den anledningen tycker jag att det är bäst att leta efter en sidbyggare som har de funktioner du behöver och sedan jämföra prestanda för sidbyggare som uppfyller dessa kriterier.
det finns inga större skillnader mellan de kraftfulla WordPress-Sidbyggarna
om du utesluter SiteOrigin Page Builder och bara fokuserar på de mer funktionsrika sidbyggarna märker du att det inte finns någon ton av skillnad mellan dem.,
du kan säkert upptäcka vissa skillnader – Elementor är lite tung på databasfrågor och förfrågningar, medan Beaver Builder erbjöd den minsta sidstorleken.
men totalt sett har alla dessa plugins tydligt arbetat för att optimera prestanda, vilket förmodligen är anledningen till att de är marknadsledande i utrymmet.
shortcode Lock-in är ett verkligt övervägande
om du väljer en sidbyggare för livet behöver du inte oroa dig för detta.,
men om du tror att det finns en chans att du kan byta (eller sluta använda) sidbyggare längs vägen, är det viktigt att påpeka att endast två av dessa sidbyggare lämnar efter sig helt ren kod.
de två plugins som lämnar efter sig 100% ren kod är:
- Elementor
- Beaver Builder
SiteOrigin Page Builder lämnar bakom mestadels ren kod, men det lämnar några kortkoder, särskilt visar upp var jag använde knappar.,
slutligen lämnar både Divi Builder och WPBakery Page Builder bakom en massa kortkoder som du måste hitta ett sätt att ta bort.
Vad är dina erfarenheter med WordPress Page Builders prestanda?
självklart är hastigheten på din WordPress-webbplats bara en faktor att tänka på när det gäller att hitta den bästa sidbyggaren för din webbplats. Saker som användarvänlighet, kvaliteten på sidmallar de innehåller, hur lätt styling av sidorna är, prissättning, stödnivå och många andra faktorer kommer in i bilden.,
men vad du i slutändan försöker producera är en vacker webbplats som laddar snabbt så att prestandan hos dessa olika sidbyggare är en kritisk faktor.
vilka är dina egna erfarenheter med dessa WordPress – sidbyggare plugins och prestanda? Och ännu viktigare, Var tror du att balansen ska ligga mellan funktioner och prestanda? För en annan djupgående yttrande bit från Pippin Williamson på sidkonstruktör plugins, kolla in detta.,
författare
Colin Newcomer
Colin Newcomer är en frilansande författare för uthyrning med bakgrund i SEO och affiliate marknadsföring. Han hjälper kunderna att öka sin webbsynlighet genom att skriva främst om digital marknadsföring, WordPress och B2B-ämnen.
