Se ti senti un po ‘ limitato dalla flessibilità dei layout forniti dai temi WordPress, potresti essere interessato a costruire le tue pagine web WordPress con un plug-in page builder.
WordPress page builders sono diventati molto popolari perché permettono a chiunque, anche quelli senza il dono del codice, costruire un bel sito web o pagina di destinazione utilizzando un semplice drag and drop, editor WYSIWYG., Mentre cerchi quale costruttore di siti Web o plugin WordPress sarebbe il migliore per te, esaminerai una serie di fattori importanti: facilità d’uso, prezzi, modelli di layout di pagina, ecc. In questo post, ci stiamo concentrando sul confronto di questi costruttori di pagine su un fattore: la velocità.
I prodotti finiti che i page builder mettono fuori lo stesso quando si tratta di prestazioni? Oppure, questi costruttori stanno creando un codice inefficiente che rallenta le prestazioni del tuo sito WordPress e danneggia la tua UX? Una bella pagina pixel perfect non vale molto se i tuoi utenti rimbalzano perché il tuo sito impiega 5 secondi per caricarsi.,
Quanto velocemente il tuo sito web viene caricato è legato al suo successo. Le statistiche indicano che ogni 100 millisecondi di tempo di caricamento crea un aumento di circa il 7% della frequenza di rimbalzo.
Ma a meno che tu non voglia prendere il tempo di costruire pagine di destinazione identiche con diversi page builder e testare le loro prestazioni, è difficile sapere con certezza come si accumula ogni page builder.
Beh we ci siamo presi del tempo.,
Ho costruito pagine di destinazione quasi identiche con cinque popolari costruttori di pagine WordPress e poi li ho sottoposti a uno stuolo di test di velocità per trovare il miglior costruttore di pagine WordPress in termini di prestazioni. Ora, ho intenzione di condividere tutti questi dati con voi.
Ecco come ho intenzione di testare questi 5 Page Builder
Per testare le prestazioni di ogni page builder, ho intenzione di costruire una pagina di destinazione utilizzando ciascuno dei cinque page builder. Baserò questo approssimativamente sulla pagina di destinazione Pagely, con alcuni elementi aggiunti e rimossi.,
Queste pagine di destinazione saranno, per quanto possibile, perfettamente identiche, anche se questo non è sempre realizzabile a causa degli elementi disponibili in ogni generatore di pagine.
Inoltre, non aspettarti che sembrino buoni come la homepage originale di Pagely perché sono well beh, non un designer professionista (o anche un designer dilettante).,
una Volta ho realizzato la pagina di destinazione con ogni pagina costruttore, vado a raccogliere i dati utilizzando tre diversi strumenti:
- WebPagetest – fornisce una dettagliata analisi delle prestazioni, tra cui il tempo di caricamento e un “indice di velocità”
- Pingdom Tools – fornisce il tempo di caricamento della pagina, formato pagina, numero di richieste
- Query Monitor plug – mostra il numero di query di database il plugin fa e per quanto tempo tali query prendere
io anche quanto tempo mi ci vuole per costruire la demo, pagina di destinazione, ma mi consiglia di prendere questi numeri stime approssimative, piuttosto che assoluti., Ecco perché: Andando in questi test, ho usato alcuni di questi costruttori di pagine più degli altri, quindi non è scientifico per me dichiararne uno “più facile da usare” rispetto agli altri.
Ecco i dettagli tecnici della mia configurazione di test
Affinché questi test mantengano qualsiasi valore, devono essere coerenti. E devi fidarti che siano coerenti.
Quindi, prima di saltare in qualsiasi test effettivo, corriamo attraverso come è impostato il mio sito di test:
- Ospitato su Pagely
- Con WordPress 4.9.,2
- Utilizzando il tema Astra, un’opzione popolare per gli sviluppatori di coppia con page builders
- No sidebar. Full-larghezza allungata del contenitore (questi sono Astra opzioni del tema)
- Query Monitor plugin installato
- Nessun altro plugin installato
- Nessuna pagina ottimizzazioni di velocità di là di quelle implementate automaticamente da Pagely hosting
Ed ecco il page builder plugin che sarò con:
- Elementor – versione 1.9.2*
- Beaver Builder Pro – versione 2.0.3.1
- Divi Builder plugin (non la versione del tema) – versione 2.0.,31
- WPBakery Page Builder – versione 5.4.2 (precedentemente noto come Visual Composer)
- SiteOrigin Page Builder – versione 2.6.1 plus SiteOrigin Widget Bundle versione 1.11.3
*Perché Elementor Pro è un add-on, piuttosto che un plugin standalone come le altre versioni premium, penso che sia giusto per verificare utilizzando la versione gratuita di Elementor.
Esecuzione dei test per ogni singolo generatore di pagine WordPress
Ora che sai su cosa sono costruiti questi test, saltiamo dentro e guardiamo i dati!,
Per ogni pagina costruttore, io sono:
- Uno screenshot di ciò che la pagina di destinazione testata sembra
- Pingdom dati delle prestazioni
- WebPagetest dati delle prestazioni
- Quanto tempo mi ci è voluto per creare la pagina (ricorda che questa è solo una guida approssimativa – non te la prendere come un duro confronto)
- Uno screenshot di ciò che accade dopo la disattivazione del page builder, per darvi un’idea di quanto “lock-in” c’è
Poi, alla fine, metto tutto insieme in un unico, facile-a-tabella di comparazione e di apportare alcune conclusioni!, Se si preferisce saltare il play-by-play, è possibile fare clic qui per saltare direttamente alla tabella riassuntiva.
Elementor Performance Test
Come tutti i plugin page builder presenti qui, Elementor rende facile creare una pagina web dall’aspetto eccezionale rapidamente senza dover conoscere HTML, CSS o Javascript.
Elementor offre una caratteristica unica chiamata “Elementor Canvas” che permette di costruire una pagina web completamente da zero — completamente separato dal tema WordPress. Non c’è nessun piè di pagina inserito, nessun menu, nessuna barra laterale., È la massima flessibilità nel design di WordPress e molto utile per la creazione di pagine di destinazione drag and drop in particolare (che spesso utilizzano layout non standard e richiedono distrazioni minime dalla chiamata all’azione).,
Ciò che La Pagina di destinazione che assomiglia a questo:
il Tempo Per Costruire la Pagina: 22:09
Pingdom Dati di Test:
WebPagetest Dati di Test:
Query di Monitorare i Dati:
che Cosa Succede Dopo La Disattivazione del Plugin:
Beaver Generatore di Test delle Prestazioni
Beaver Builder è un popolare sito web edificio plugin utilizzato da oltre 175k siti web. È famoso per la sua facilità d’uso e l’interfaccia utente intuitiva.,
Offre anche alcune funzionalità avanzate come le scorciatoie da tastiera e la possibilità di salvare righe e colonne in modo che possano essere facilmente riutilizzati. Beaver Builder è costruito sul framework Bootstrap e afferma di essere veloce e leggero., Vediamo come si svolge nel mondo reale…
Ciò che La Pagina di destinazione che assomiglia a questo:
il Tempo Per Costruire la Pagina: 20:37
Pingdom Dati di Test:
WebPagetest Dati di Test:
Query di Monitorare i Dati:
che Cosa Succede Dopo La Disattivazione del Plugin:
Divi Generatore di Test delle Prestazioni
Divi, da Elegant Themes, è un tema WordPress e autonomo page builder plugin., Qui stiamo rivedendo le prestazioni del plugin website builder non il tema WordPress.
Puoi creare pagine e post nel backend di WordPress o persino progettare il tuo sito usando il frontend di WordPress con un editor WYSWIG. Divi offre centinaia di temi figlio e modelli di pagina pre-costruiti. Fedele al nome della sua azienda, Divi offre un’esperienza di costruzione di pagine davvero elegante con un sacco di smalto, piacere per gli occhi e funzionalità intuitive.,
Ciò che La Pagina di destinazione che assomiglia a questo:
il Tempo Per Costruire la Pagina: 21:02
Pingdom Dati di Test:
WebPagetest Dati di Test:
Query di Monitorare i Dati:
che Cosa Succede Dopo La Disattivazione del Plugin:
WPBakery Pagina Generatore di Test delle Prestazioni
Come Elementor, WPBakery è spesso in bundle con molti popolari temi di WordPress., WPBakery si distingue da molti degli altri costruttori di pagine a causa di quanti componenti aggiuntivi e miglioramenti sono disponibili. Puoi scegliere tra oltre 200 componenti aggiuntivi che fanno di tutto, dalle animazioni CSS slick al miglioramento delle tue pagine di prodotto WooCommerce.,
Ciò che La Pagina di destinazione che assomiglia a questo:
il Tempo Di Costruire Pagina: 27:18
Pingdom Dati di Test:
WebPagetest Dati di Test:
Query di Monitorare i Dati:
che Cosa Succede Dopo La Disattivazione del Plugin:
SiteOrigin Pagina Generatore di Test delle Prestazioni
SiteOrigin è completamente gratuito. Mentre molti page builder installano i propri widget, Site Origin è unico in quanto gioca bene con i widget WordPress predefiniti.,
Come appariva la pagina di destinazione: *SiteOrigin Page Builder non ha un elemento contatore, quindi ho usato invece HTML statico che gli conferisce un leggero vantaggio nei test delle prestazioni.,
il Tempo Di Costruire Pagina: 19:51
Pingdom Dati di Test:
WebPagetest Dati di Test:
Query di Monitorare i Dati:
che Cosa Succede Dopo La Disattivazione del Plugin:
Pagina di WordPress Generatore di Confronto Velocità
Dopo tutti i test sono stati eseguiti e i dati tritato, ecco come le cose sprimacciò.
Diamo un’occhiata al buono prima., Ecco il vincitore assoluto di ogni categoria:
- più Veloce Pingdom Tempo di Caricamento della Pagina: SiteOrigin Page Builder 390 ms
- Minor numero di Pingdom Richieste: SiteOrigin Page Builder con 13
- più Basso Pingdom Dimensioni della Pagina: SiteOrigin Page Builder con 245.0 kB
- più Veloce WebPagetest Completamente Caricato Tempo: SiteOrigin Page Builder con 578 ms
- più Basso WebPagetest Indice di Velocità: SiteOrigin Page Builder a 500
- Minor numero di Query di Database: Divi Generatore con 8
- più Basso Database Query Time: Divi Generatore a 0.,0039 s
E ora vediamo il peggiore performer in ogni categoria nel nostro test:
- più Lento Pingdom Tempo di Caricamento della Pagina: Beaver Generatore a 665 ms
- la Maggior parte Pingdom Richieste: Elementor con 28
- Massima Pingdom Dimensioni della Pagina: Divi Generatore a 532.7 kB
- più Lento WebPagetest Completamente Caricato Tempo: Divi Generatore a 1.294 s
- Massima WebPagetest Indice di Velocità: Divi Generatore a 901
- la Maggior parte delle Query di Database: Elementor con 30
- Massima Database Query Time: Elementor a 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?,
I dati sono lì per te da interpretare. Ma ecco alcune conclusioni che penso valgano la pena considerare:
I Page Builder sono, in una certa misura, un atto di bilanciamento tra prestazioni e funzionalità
Non sorprende che SiteOrigin Page Builder abbia avuto le migliori prestazioni in quasi tutti i test.
Ma ecco la cosa:
SiteOrigin Page Builder non è solo leggero quando si tratta di prestazioni – è anche leggero quando si tratta di funzionalità.,
Si ottengono prestazioni migliori rispetto agli altri page builder, in parte sacrificando la funzionalità.
Per le prestazioni focalizzate, quel trade-off potrebbe valerne la pena.
Ma altre persone potrebbero essere disposte a scambiare un po ‘ di prestazioni per un’esperienza di creazione di pagine più potente, e non penso che ci sia necessariamente qualcosa di sbagliato in questo.
L’utente medio sarà in grado di creare una pagina più complessa con uno degli altri quattro page builder.,
Per questo motivo, penso che sia meglio cercare un generatore di pagine che abbia le funzionalità necessarie e quindi confrontare le prestazioni dei costruttori di pagine che soddisfano tali criteri.
Non ci sono grandi differenze tra i costruttori di pagine WordPress ad alta potenza
Se escludi SiteOrigin Page Builder e ti concentri solo sui page builder più ricchi di funzionalità, noterai che non c’è molta differenza tra loro.,
Puoi certamente individuare alcune differenze: Elementor è un po ‘ pesante per le query e le richieste del database, mentre Beaver Builder ha offerto la dimensione della pagina più piccola.
Ma nel complesso, tutti questi plugin hanno chiaramente lavorato per ottimizzare le prestazioni, che è probabilmente il motivo per cui sono i leader di mercato nello spazio.
Shortcode Lock-in è una considerazione reale
Se stai scegliendo un generatore di pagine per la vita, non devi preoccuparti di questo.,
Ma se pensi che ci sia una possibilità che tu possa cambiare (o smettere di usare) i page builder lungo la strada, è importante sottolineare che solo due di questi page builder lasciano codice completamente pulito.
I due plugin che lasciano dietro 100% la pulizia del codice sono:
- Elementor
- Beaver Builder
SiteOrigin Page Builder lascia dietro di sé per lo più pulito il codice, ma non lasciare un paio di codici brevi, in particolare mostrando fino dove ho usato pulsanti.,
Infine, sia Divi Builder che Wpbakery Page Builder lasciano dietro di sé un mucchio di codici brevi che dovrai trovare un modo per rimuovere.
Quali sono le tue esperienze con le prestazioni di WordPress Page Builders?
Naturalmente, la velocità del tuo sito web WordPress è solo un fattore da considerare quando si tratta di trovare il miglior generatore di pagine per il tuo sito. Cose come la facilità d’uso, la qualità dei modelli di pagina che includono, quanto sia facile lo stile delle pagine, i prezzi, il livello di supporto e molti altri fattori entrano in gioco.,
Ma quello che stai cercando di produrre è un bellissimo sito Web che si carica rapidamente, quindi le prestazioni di questi diversi costruttori di pagine sono una considerazione critica.
Quali sono le tue esperienze con questi plugin e prestazioni di WordPress page builder? E ancora più importante, dove pensi che l’equilibrio dovrebbe risiedere tra caratteristiche e prestazioni? Per un altro pezzo di opinione approfondita di Pippin Williamson sui plugin di page builder, dai un’occhiata a questo.,
Autore
Colin Newcomer
Colin Newcomer è uno scrittore freelance per il noleggio con un background in SEO e marketing di affiliazione. Aiuta i clienti a crescere la loro visibilità sul web scrivendo principalmente su argomenti di marketing digitale, WordPress e B2B.
