Test del tempo di caricamento del backend di Oxygen Builder
Pubblicato: 2022-04-10Questo articolo darà un'occhiata al tempo di caricamento del back -end di Oxygen Builder. Molte persone lo dicono come uno dei principali svantaggi di questo WordPress PageBuilder, quindi abbiamo deciso di testarlo su diversi dispositivi. Vediamo cosa è stato scoperto.
Innanzitutto, confronteremo diversi browser sullo stesso dispositivo. Quindi, confronteremo diversi dispositivi utilizzando lo stesso browser. Questo dovrebbe permetterci di identificare non solo quali dispositivi caricano Oxygen Builder più velocemente, ma anche quali browser sono i migliori per questa attività.
Escluderemo il test di diverse configurazioni di hosting in quanto ciò aggiunge un sacco di complessità a questo confronto. Inoltre: è risaputo che se utilizzi un hosting economico, avrai tempi di caricamento lenti sia sul front-end che sul back-end di qualsiasi sito Web WordPress. Dipende completamente da te se questo è il caso. (Tuttavia, potremmo rivisitarlo in futuro).
Il soggetto di prova
Il nostro soggetto di prova è un sito Web per la creazione di ossigeno relativamente standard creato da noi, per il nostro pubblico. Diamo un'occhiata alle prestazioni iniziali della pagina, alle dimensioni e agli aspetti aggiuntivi.
Questo sito Web di prova è ospitato su un server DO Premium dedicato, con 2 GB di RAM e impostazioni standard. È gestito da Cloudways, che è il nostro host consigliato per velocità, costi e supporto. Al momento del test, non avevamo completato alcuna ottimizzazione della velocità aggiuntiva sul sito. Le impostazioni del server non sono state modificate da quando è stata avviata l'istanza.
Leggi: Analizzare le cinque scelte di server di Cloudway per l'hosting WordPress
Nota a margine: questa è un'ottima opzione server per siti di sviluppo e a basso traffico, che puoi facilmente scalare all'avvio. Usa il codice ISOTROPIC per uno sconto su Cloudways al momento della registrazione e ottieni una prova gratuita di 3 giorni (senza CC).
La pagina testata è la homepage del sito. Al momento del test, sembrava così:
Gli elementi principali della pagina che stavano caricando erano un elemento del menu di Oxygen Builder, una barra di ricerca personalizzata e una griglia di post facili di post demo (la prima sezione), un elemento WSForm Oxygen e un carosello OxyExtras con un ripetitore all'interno. Questo ripetitore aveva oltre nove post e dozzine di condizioni basate sui campi MetaBox.
La pagina era pubblica poiché un DNS del sottodominio Deals.isotropic.co è stato proxy tramite Cloudflare.
La dimensione totale della pagina era di 5,05 MB. Ciò era dovuto principalmente all'utilizzo di immagini ottimizzate al momento del test. Ricorda che questo è un sito Web in fase iniziale di sviluppo (prometto che lo faremo velocemente prima di andare online). Credo che questo tipo di sito Web sia il modo migliore per testare la velocità di caricamento e di ritorno di Oxygen Builder poiché simula un normale ambiente di sviluppo.
I plugin in uso erano i seguenti:
| Nome | Descrizione | Dev | Stato | Versione usata | Revisione |
|---|---|---|---|---|---|
| BetterLinks | Plugin definitivo per creare, abbreviare, tracciare e gestire qualsiasi URL. Raccogli rapporti di analisi ed esegui facilmente campagne di marketing di successo. | Sviluppatore WP | Attivo | 1.2.7 | |
| BetterLinks Pro | Ottieni l'accesso a analisi individuali, gestione dei ruoli, integrazione con Google Analytics e molte altre straordinarie funzionalità per monitorare ed eseguire campagne di marketing di successo. | Sviluppatore WP | Attivo | 1.1.0 | |
| Migliore ricerca Sostituisci | Un piccolo plugin per eseguire una ricerca/sostituzione nel database di WordPress. | Deliziosi cervelli | Attivo | 1.3.4 | |
| Disattiva gli avvisi dell'amministratore singolarmente | Il plug-in Disabilita avvisi amministratore ti dà la possibilità di nascondere gli avvisi di aggiornamento e gli avvisi in linea nel pannello di amministrazione. | Movimento Creativo | Attivo | 1.2.6 | |
| Disabilita Gutenberg | Disabilita l'editor blocchi Gutenberg e ripristina l'editor classico e la schermata Modifica post originale. Fornisce opzioni per abilitare su specifici tipi di post, ruoli utente e altro. | Jeff Starr | Attivo | 2.5.1 | |
| dPlugins DevKit | Plugin creato per le installazioni e il debug di dPlugins | devusrmk | Attivo | 1.1.2 | |
| Mittente email elastico | Questo plugin riconfigura la funzione wp_mail() per inviare e-mail utilizzando l'API (tramite Elastic Email) anziché SMTP e crea una pagina di opzioni che consente di specificare varie opzioni. | Elastic Email Inc. | Attivo | 1.2.3 | |
| Preferiti | Pulsanti preferiti semplici e flessibili per qualsiasi tipo di post. | Kyle Phillips | Attivo | 2.3.2 | |
| Pacchetto di idrogeno | Un pacchetto di miglioramenti di Oxygen Builder per risparmiare tempo | Plugin puliti | Attivo | 1.3.5 | La nostra recensione |
| MalCare Security - Scanner di malware gratuito, protezione e sicurezza per WordPress | MalCare Security - Scanner di malware gratuito, protezione e sicurezza per WordPress | Sicurezza MalCare | Attivo | 4.63 | |
| Meta-scatola | Crea meta box personalizzati e campi personalizzati in WordPress. | MetaBox.io | Attivo | 5.4.8 | La nostra recensione |
| Meta Box AIO | Tutte le estensioni Meta Box in un unico pacchetto. | MetaBox.io | Attivo | 1.15.1 | |
| Accesso social di Nextend | Nextend Social Login mostra i pulsanti di accesso social per Facebook, Google e Twitter. | Nextendweb | Attivo | 3.1.2 | |
| Oxy Extra | Libreria dei componenti per l'ossigeno. | Oxy Extra | Attivo | 1.3.8 | |
| Ossigeno 3.9 Beta 2 | BETA. UTILIZZARE A PROPRIO RISCHIO. | Soflyy | Attivo | 3.9 Beta 2 | |
| Elementi di ossigeno per WooCommerce | Costruisci bellissimi siti Web WooCommerce. | Soflyy | Attivo | 1.4 | |
| Oxy Made | Framework CSS e strumenti basati su Tailwind basati su classe di utilità per Oxygen Builder. | Anvesh | Attivo | 1.5.2 | La nostra recensione |
| SSL davvero semplice | Plugin leggero senza alcuna configurazione per rendere il tuo sito a prova di SSL | Plugin davvero semplici | Attivo | 5.1.2 | |
| Reindirizzamento | Gestisci tutti i tuoi reindirizzamenti 301 e monitora gli errori 404 | John Godley | Attivo | 5.1.3 | |
| Ridimensiona immagine dopo il caricamento | Ridimensiona automaticamente le immagini caricate entro la larghezza e l'altezza massime specificate. Ha anche l'opzione per forzare la ricompressione dei JPEG. Opzioni di configurazione disponibili in Impostazioni > Ridimensiona caricamento immagine | ShortPixel | Attivo | 1.8.6 | |
| Organizzatore di script | Editor di codice avanzato per Wordpress | dPlugin | Attivo | 3.0.0 Beta 2 | La nostra recensione |
| CercaWP | La migliore ricerca WordPress che puoi trovare | CercaWP | Attivo | 4.1.22 | |
| CercaWP Live Ajax Cerca | Migliora i tuoi moduli di ricerca con la ricerca in tempo reale, basata su SearchWP (se installato) | CercaWP, LLC | Attivo | 1.6.1 | La nostra recensione |
| Metriche WP di ricerca | Metriche di ricerca avanzate da SearchWP | CercaWP | Attivo | 1.4.0 | |
| Cerca codici brevi WP | Fornisce codici brevi che generano sia moduli di ricerca che pagine di risultati per i motori di ricerca di SearchWP | CercaWP | Attivo | 1.8.2 | |
| Shareaholic - Fai crescere e coinvolgi il tuo pubblico | Il plug-in WordPress ufficiale di Shareaholic ti consente di aggiungere pulsanti di condivisione social pluripremiati, post correlati, analisi dei contenuti, monetizzazione degli annunci e altro ancora al tuo sito web. | Shareaholic | Attivo | 9.7.1 | |
| Coltello svizzero | Il primo plugin che dovresti installare quando l'impostazione predefinita di Oxygen non è sufficiente. | dPlugin | Attivo | 1.3.7 | La nostra recensione |
| WP File Manager | Gestisci i tuoi file WP. | mndpsingh287 | Attivo | 7.1.2 | |
| Costruttore di griglia WP | Crea layout di griglia avanzati con ricerca sfaccettata in tempo reale per il tuo eCommerce, blog, portfolio e altro... | Loic Blascos | Attivo | 1.5.9 | La nostra recensione |
| Generatore di griglia WP - Meta Box | Integra WP Grid Builder con il plug-in Meta Box. | Loic Blascos | Attivo | 1.0.0 | |
| Generatore di griglia WP - Ossigeno | Integra WP Grid Builder con il plug-in Oxygen. | Loic Blascos | Attivo | 1.0.2 | |
| Modulo WS PRO | Costruisci moduli WordPress migliori | Modulo WS | Attivo | 1.8.125 | La nostra recensione |
| WS Form PRO - Gestione utenti | Componente aggiuntivo per la gestione degli utenti per WS Form PRO | Modulo WS | Attivo | 1.4.1 |
* Esaminiamo i plugin che utilizziamo effettivamente, come evidenziato qui :).
È importante notare che stavamo utilizzando Oxygen Builder 3.9 Beta 2. Avevamo anche installato gli elementi WooCommerce, ma WooCommerce stesso non lo era a questo punto.
Secondo i rapporti degli sviluppatori, questa versione di Oxygen era quasi due volte più veloce da caricare sul back-end rispetto alla precedente.
Inoltre, voglio notare che OxyExtras, WPGridbuilder, OxyMade e WSForm hanno tutti aggiunto elementi al back-end del builder. Anche Swiss Knife, uno strumento skin/workflow e Hydrogen Pack vengono caricati nel back-end.
In sostanza, questo soggetto di prova è una pagina che molti che usano Oxygen Builder hanno esperienza di caricamento. Esistono diversi componenti aggiuntivi, estensioni e script che verranno caricati sul back-end sia dal builder che dai plug-in di terze parti.
Infine, ecco una rapida occhiata al mio WiFi:
Come viene eseguito questo test
Questo test viene somministrato caricando direttamente Oxygen Builder facendo clic su "modifica con Oxygen" nel backend della pagina.
Il pulsante viene premuto e il timer parte da lì. Una volta che l'icona a forma di ingranaggio si interrompe e il browser è completamente inizializzato, il test si interrompe.
Tieni presente che questo non è completamente accurato poiché sto cronometrando manualmente questo utilizzando un cronometro per iPhone, ma dovrebbe fornire una buona approssimazione di quali dispositivi e browser caricano questo plug-in più velocemente. Vale anche la pena notare - la pagina è stata caricata in precedenza su fontend, ma mai sul builder di backend come admin n. Vado al builder caricando Deals.isotropic.co, andando nella barra in alto, facendo clic su Modifica pagina, quindi facendo clic sul pulsante Modifica con ossigeno.
L'obiettivo di questo test non è una corsa veloce. Serve per ottenere dati reali sul retro e sui tempi di caricamento di questo plug-in per vedere se sono giustificati problemi con la velocità e l'efficienza. Invece di guardare le cifre del tempo effettivo, considera di esaminare le differenze tra questi numeri quando si tratta di dispositivo e browser.
Infine, ho incluso i link Amazon (affiliato) nel caso in cui questo ispiri qualcuno a comprare d'impulso.
Tempi di caricamento di Oxygen Builder tramite browser
Per prima cosa, proviamo a caricarlo su tutti i browser installati sul mio Mac Mini M1. Le statistiche verranno riformulate durante il test per dispositivo, ma questo è un Mac Mini M1 del 2020 con 8 GB di RAM, con Big Sur V11.3.1. Questo è il mio "desktop quotidiano".
Iniziamo con un test del browser per determinare quale è il più veloce per caricare Oxygen. Utilizzeremo questo browser per testare diversi dispositivi.
Testiamo Safari V14.1, Chrome V95.0.4638.69 e Firefox V94.
- Firefox arriva a 05,59 secondi.
- Chrome arriva a 17,52 secondi.
- Safari arriva a 6,20 secondi.
Chrome era l'ovvio valore anomalo qui. L'ho eseguito di nuovo per vedere se c'era un singhiozzo nel caricamento: ci sono voluti solo circa 16,5 secondi per caricare la seconda volta, quindi penso che la media sia un numero relativamente accurato.
Il punto è che Firefox è il browser più veloce. Questo è un argomento discusso nel gruppo ufficiale di Facebook da un po' di tempo, quindi si spera che questi dati empirici dimostrino che dovresti usare questo browser. Personalmente, Firefox è il mio browser preferito per lo sviluppo di siti Web in quanto ha un sacco di strumenti di sviluppo front-end di alta qualità. Tuttavia, rispetto a Chrome, manca di controlli di sicurezza e prestazioni.
Useremo quel browser per il test del dispositivo.
Tempi di caricamento di Oxygen Builder tramite browser
Per questo test utilizzeremo dispositivi tutti sulla stessa rete Wi-Fi, utilizzando la stessa versione di Firefox, caricando la stessa pagina di prima. Il fattore di differenziazione sarà il dispositivo e le statistiche di test dietro di esso. Ecco la scaletta.
Mac Mini 2020 (già testato)
- Chip Apple M1
- 16 GB di RAM
Carica ossigeno in 05,59 secondi.
2019 XPS 13 9370
- Intel i7-8550U
- 16 GB di RAM
Carica ossigeno in 11,54 secondi.
2020 iPad Air 10,9 pollici MYFT2LL/A
- Chip Apple A14
- 4 GB di RAM
Carica ossigeno in 11,96 secondi.
Leggi: Puoi sviluppare siti Web su un iPad Pro?
Dell Latitude 7400 del 2019
- Intel i7 8655U
- 16 GB di RAM
Carica ossigeno in 16,19 secondi.
2020 MacBook Pro 13 pollici
- Intel Core i5
- 16 GB di RAM
- Grafica Intel Iris Plus 645 1536 MB
Carica ossigeno in 9,66 secondi.
2021 MacBook Pro 16 pollici
- Chip Apple M1 Max
- 64 GB di RAM
Carica ossigeno in 5,43 secondi.
Tutti i dispositivi sono collegati a un caricabatteria durante il test. Il browser Firefox è l'unica app/programma aperta. Ti starai chiedendo perché ho accesso a tutti questi dispositivi. Non possiedo personalmente ogni singola di queste apparecchiature elettroniche, invece ho la possibilità di noleggiarle da un'università locale.
I grandi asporto
Innanzitutto, come accennato più volte, questo è un test imperfetto. Non è stato eseguito in un ambiente di laboratorio. Le pagine con dati meno dinamici verranno caricate più rapidamente nel generatore di back-end e le pagine con dati più dinamici verranno caricate più lentamente. Lo stesso per immagini, elementi DOM e script.
Suggerisco di usare questi numeri in modo arbitrario. Invece di dire che Oxygen si caricherà in X.XX secondi, usa i numeri per confrontare il browser e i dispositivi.
Takeaway 1: questioni relative al browser
Come afferma costantemente Facebook, Firefox è il browser più veloce per caricare Oxygen Builder. Personalmente uso l'edizione per sviluppatori Firebox.
Takeaway 2: il dispositivo è importante
I due dispositivi più veloci sono i più recenti dispositivi Apple che utilizzano Apple Silicone. Questo ha senso; questi processori sono molto più veloci di qualsiasi altra cosa sul mercato; e non sono così costosi. L'M1 Mac Mini di base arriva a meno di $ 600 rinnovato e l'M1 Macbook Air costa $ 899.
Takeaway 2B: sembra che il processore sia più importante della RAM
Sembra anche che più potente è il processore, migliore è il tempo di caricamento del back-end Builder. Ad esempio, un laptop con 64 GB di RAM si carica in modo simile a uno con 16 GB di RAM. Quando la potenza del processore diminuisce, diminuisce anche il tempo di caricamento del builder.
Mi aspetto che provare a caricare il builder su un Chromebook o un altro dispositivo con statistiche basse possa essere difficile.
Pensieri finali
Il tempo medio di caricamento di Oxygen Backend per questo test è stato di circa 10 secondi per una pagina grande e non ottimizzata, con un sacco di dati dinamici. Inoltre, c'erano diversi componenti aggiuntivi che caricavano elementi propri sulla pagina, insieme a una ricca raccolta di CSS globali personalizzati. Questo è molto accettabile nel mio libro. Diventa ancora più accettabile quando le modifiche alle classi CSS e alle opzioni globali possono essere sincronizzate senza dover ricaricare il builder con il plugin Collaboration.
Come webdev che utilizza Oxygen per la maggior parte dei progetti, la velocità del builder non ha mai avuto alcun impatto su di me, ma volevo dare un'occhiata seriamente a quale fosse la configurazione migliore per questo.
Se hai dei numeri di confronto, sentiti libero di pubblicarli nella sezione commenti qui sotto.