Test der Backend-Ladezeit von Oxygen Builder
Veröffentlicht: 2022-04-10Dieser Artikel wirft einen Blick auf die Backend -Ladezeit von Oxygen Builder. Viele Leute sagen, dass dies ein großer Nachteil dieses WordPress PageBuilders ist, also haben wir uns entschieden, es auf mehreren verschiedenen Geräten zu testen. Mal sehen, was entdeckt wurde.
Zuerst werden wir verschiedene Browser auf demselben Gerät vergleichen. Dann werden wir verschiedene Geräte mit demselben Browser vergleichen. Dies sollte es uns ermöglichen, nicht nur zu identifizieren, welche Geräte Oxygen Builder am schnellsten laden, sondern auch, welche Browser für diese Aufgabe am besten geeignet sind.
Wir werden das Testen verschiedener Hosting-Setups ausschließen, da dies diesen Vergleich erheblich komplexer macht. Außerdem: Es ist eine bekannte Tatsache, dass Sie bei Verwendung von billigem Hosting langsame Ladezeiten sowohl im Frontend als auch im Backend jeder WordPress-Website haben. Es liegt ganz bei Ihnen, wenn dies der Fall ist. (Wir können dies jedoch in Zukunft erneut prüfen).
Das Testsubjekt
Unser Testobjekt ist eine von uns für unser Publikum erstellte relativ standardmäßige Sauerstoff-Builder-Website. Werfen wir einen Blick auf die anfängliche Leistung der Seite, die Größe und weitere Aspekte.
Diese Test-Website wird auf einem dedizierten DO Premium-Server mit 2 GB RAM und Standardeinstellungen gehostet. Es wird von Cloudways verwaltet, unserem empfohlenen Host für Geschwindigkeit, Kosten und Support. Zum Zeitpunkt des Tests hatten wir keine zusätzliche Geschwindigkeitsoptimierung auf der Seite durchgeführt. Die Servereinstellungen blieben unverändert, seit die Instanz hochgefahren wurde.
Lesen Sie: Aufschlüsselung der fünf Serveroptionen von Cloudway für WordPress-Hosting
Nebenbemerkung: Dies ist eine großartige Serveroption für Entwicklungs- und Low-Traffic-Sites, die Sie beim Start einfach skalieren können. Verwenden Sie bei der Anmeldung den Code ISOTROPIC für einen Rabatt auf Cloudways und erhalten Sie eine kostenlose 3-Tage-Testversion (kein CC).
Die getestete Seite ist die Startseite der Website. Zum Testzeitpunkt sah es so aus:
Die Hauptelemente der Seite, die geladen wurden, waren ein Oxygen Builder-Menüelement, eine benutzerdefinierte Suchleiste und ein einfaches Beitragsraster mit Demo-Beiträgen (der erste Abschnitt), ein WSForm-Oxygen-Element und ein OxyExtras-Karussell mit einem Repeater darin. Dieser Repeater hatte über neun Beiträge und Dutzende von Bedingungen, die auf MetaBox-Feldern basierten.
Die Seite war öffentlich, da das DNS der Subdomain „deals.istropic.co“ über Cloudflare geproxyt wurde.
Die Gesamtseitengröße betrug 5,05 MB. Dies lag vor allem daran, dass zum Testzeitpunkt optimierte Bilder verwendet wurden. Bitte denken Sie daran, dass dies eine Website für die Entwicklung im Frühstadium ist (ich verspreche, dass wir es schnell machen werden, bevor wir live gehen). Ich glaube, dass diese Art von Website der beste Weg ist, um die Back- und Ladegeschwindigkeit des Oxygen Builder zu testen, da er eine normale Entwicklungsumgebung simuliert.
Folgende Plugins wurden verwendet:
| Name | Beschreibung | Entwickler | Status | Verwendete Version | Überprüfung |
|---|---|---|---|---|---|
| Bessere Links | Ultimatives Plugin zum Erstellen, Kürzen, Verfolgen und Verwalten beliebiger URLs. Sammeln Sie Analyseberichte und führen Sie erfolgreiche Marketingkampagnen einfach durch. | WP-Entwickler | Aktiv | 1.2.7 | |
| BetterLinks Pro | Erhalten Sie Zugriff auf individuelle Analysen, Rollenverwaltung, Google Analytics-Integration und viele weitere erstaunliche Funktionen, um erfolgreiche Marketingkampagnen zu verfolgen und durchzuführen. | WP-Entwickler | Aktiv | 1.1.0 | |
| Bessere Suche Ersetzen | Ein kleines Plugin zum Ausführen einer Suche/Ersetzung in Ihrer WordPress-Datenbank. | Köstliche Gehirne | Aktiv | 1.3.4 | |
| Admin-Benachrichtigungen einzeln deaktivieren | Das Plugin „Admin-Benachrichtigungen deaktivieren“ bietet Ihnen die Möglichkeit, Aktualisierungswarnungen und Inline-Benachrichtigungen im Admin-Bereich auszublenden. | Kreative Bewegung | Aktiv | 1.2.6 | |
| Gutenberg deaktivieren | Deaktiviert den Gutenberg-Blockeditor und stellt den klassischen Editor und den ursprünglichen Bildschirm „Beitrag bearbeiten“ wieder her. Bietet Optionen zum Aktivieren für bestimmte Beitragstypen, Benutzerrollen und mehr. | Jeff Starr | Aktiv | 2.5.1 | |
| dPlugins DevKit | Plugin für die Installation und das Debuggen von dPlugins | devusrmk | Aktiv | 1.1.2 | |
| Elastischer E-Mail-Absender | Dieses Plugin konfiguriert die Funktion wp_mail() neu, um E-Mails über die API (über Elastic Email) anstelle von SMTP zu senden, und erstellt eine Optionsseite, auf der Sie verschiedene Optionen angeben können. | Elastic Email Inc. | Aktiv | 1.2.3 | |
| Favoriten | Einfache und flexible Favoriten-Buttons für jeden Beitragstyp. | Kyle Phillips | Aktiv | 2.3.2 | |
| Wasserstoff-Paket | Ein Paket mit zeitsparenden Oxygen Builder-Verbesserungen | Plugins reinigen | Aktiv | 1.3.5 | Unsere Bewertung |
| MalCare Security – Kostenloser Malware-Scanner, Schutz und Sicherheit für WordPress | MalCare Security – Kostenloser Malware-Scanner, Schutz und Sicherheit für WordPress | MalCare-Sicherheit | Aktiv | 4.63 | |
| Meta-Box | Erstellen Sie benutzerdefinierte Metaboxen und benutzerdefinierte Felder in WordPress. | MetaBox.io | Aktiv | 5.4.8 | Unsere Bewertung |
| MetaBox AIO | Alle Meta Box Erweiterungen in einem Paket. | MetaBox.io | Aktiv | 1.15.1 | |
| Nextend Social Login | Nextend Social Login zeigt Social-Login-Buttons für Facebook, Google und Twitter an. | Nextendweb | Aktiv | 3.1.2 | |
| OxyExtras | Komponentenbibliothek für Sauerstoff. | OxyExtras | Aktiv | 1.3.8 | |
| Sauerstoff 3,9 Beta 2 | BETA. BENUTZUNG AUF EIGENE GEFAHR. | Soflyy | Aktiv | 3.9 Beta2 | |
| Sauerstoffelemente für WooCommerce | Erstellen Sie schöne WooCommerce-Websites. | Soflyy | Aktiv | 1.4 | |
| OxyMade | Tailwind CSS-basiertes CSS-Framework und -Tools für Oxygen Builder, das von der Utility-Klasse unterstützt wird. | Anvesh | Aktiv | 1.5.2 | Unsere Bewertung |
| Wirklich einfaches SSL | Leichtes Plugin ohne Einrichtung, um Ihre Website SSL-sicher zu machen | Wirklich einfache Plugins | Aktiv | 5.1.2 | |
| Umleitung | Verwalten Sie alle Ihre 301-Weiterleitungen und überwachen Sie 404-Fehler | John Godley | Aktiv | 5.1.3 | |
| Bildgröße nach dem Hochladen ändern | Passen Sie die Größe hochgeladener Bilder automatisch innerhalb der angegebenen maximalen Breite und Höhe an. Hat auch die Option, die Neukomprimierung von JPEGs zu erzwingen. Konfigurationsoptionen finden Sie unter Einstellungen > Bildgröße ändern beim Hochladen | ShortPixel | Aktiv | 1.8.6 | |
| Skript-Organizer | Erweiterter Code-Editor für Wordpress | dPlugins | Aktiv | 3.0.0 Beta2 | Unsere Bewertung |
| SucheWP | Die beste WordPress-Suche, die Sie finden können | SucheWP | Aktiv | 4.1.22 | |
| SearchWP Live-Ajax-Suche | Verbessern Sie Ihre Suchformulare mit Live-Suche, powered by SearchWP (falls installiert) | SearchWP, LLC | Aktiv | 1.6.1 | Unsere Bewertung |
| SearchWP-Metriken | Erweiterte Suchmetriken von SearchWP | SucheWP | Aktiv | 1.4.0 | |
| SearchWP-Shortcodes | Stellt Shortcodes bereit, die sowohl Suchformulare als auch Ergebnisseiten für SearchWP-Suchmaschinen generieren | SucheWP | Aktiv | 1.8.2 | |
| Shareaholic - Erweitern und binden Sie Ihr Publikum | Mit dem offiziellen WordPress-Plugin von Shareaholic können Sie Ihrer Website preisgekrönte Schaltflächen zum Teilen in sozialen Netzwerken, verwandte Beiträge, Inhaltsanalysen, Anzeigenmonetarisierung und mehr hinzufügen. | Shareaholic | Aktiv | 9.7.1 | |
| Schweizer Messer | Das erste Plugin, das Sie installieren sollten, wenn die Standardeinstellung von Oxygen nicht ausreicht. | dPlugins | Aktiv | 1.3.7 | Unsere Bewertung |
| WP-Dateimanager | Verwalten Sie Ihre WP-Dateien. | mndpsingh287 | Aktiv | 7.1.2 | |
| WP-Grid-Builder | Erstellen Sie erweiterte Grid-Layouts mit facettierter Suche in Echtzeit für Ihren E-Commerce, Blog, Ihr Portfolio und mehr ... | Loïc Blascos | Aktiv | 1.5.9 | Unsere Bewertung |
| WP Grid Builder - Meta-Box | Integrieren Sie WP Grid Builder mit dem Meta Box-Plugin. | Loïc Blascos | Aktiv | 1.0.0 | |
| WP Grid Builder - Sauerstoff | Integrieren Sie WP Grid Builder mit dem Oxygen-Plugin. | Loïc Blascos | Aktiv | 1.0.2 | |
| WS-Formular PRO | Erstellen Sie bessere WordPress-Formulare | WS-Formular | Aktiv | 1.8.125 | Unsere Bewertung |
| WS Form PRO - Benutzerverwaltung | Benutzerverwaltungs-Add-on für WS Form PRO | WS-Formular | Aktiv | 1.4.1 |
*Wir überprüfen Plugins, die wir tatsächlich verwenden, wie hier gezeigt :).
Es ist wichtig zu beachten, dass wir Oxygen Builder 3.9 Beta 2 verwendet haben. Wir hatten auch die WooCommerce-Elemente installiert, aber WooCommerce selbst war zu diesem Zeitpunkt noch nicht da.
Laut den Berichten der Entwickler war diese Version von Oxygen fast doppelt so schnell im Backend zu laden wie die vorherige.
Außerdem möchte ich darauf hinweisen, dass OxyExtras, WPGridbuilder, OxyMade und WSForm allesamt Elemente zum Backend des Builders hinzugefügt haben. Swiss Knife, ein Skin-/Workflow-Tool und Hydrogen Pack werden ebenfalls in das Backend geladen.
Im Wesentlichen handelt es sich bei diesem Testobjekt um eine Seite, mit der viele Benutzer von Oxygen Builder Erfahrung beim Laden haben. Es gibt mehrere Add-Ons, Erweiterungen und Skripte, die sowohl vom Builder als auch von Plug-Ins von Drittanbietern auf das Backend geladen werden.
Zum Schluss noch ein kurzer Blick auf mein WLAN:
Wie dieser Test ausgeführt wird
Dieser Test wird durchgeführt, indem der Oxygen Builder direkt geladen wird, indem Sie im Backend der Seite auf „Mit Oxygen bearbeiten“ klicken.
Die Taste wird gedrückt, und der Timer beginnt dort. Sobald das Zahnradsymbol stoppt und der Browser vollständig initialisiert ist, wird der Test beendet.
Bitte beachten Sie, dass dies nicht ganz genau ist, da ich dies mit einer iPhone-Stoppuhr von Hand messe, aber es sollte eine gute Annäherung geben, welche Geräte und Browser dieses Plugin am schnellsten laden. Es ist auch erwähnenswert - die Seite wurde zuvor auf dem Fontend geladen, aber nie auf dem Backend-Builder als Administrator . Ich komme zum Builder, indem ich deal.isotrop.co lade, zur oberen Leiste gehe, auf Seite bearbeiten klicke und dann auf die Schaltfläche Bearbeiten mit Sauerstoff klicke.
Das Ziel dieses Tests ist kein Speedrun. Es geht darum, wirklich reale Daten über die Back- und Ladezeiten dieses Plug-Ins zu erhalten, um zu sehen, ob Bedenken hinsichtlich der Geschwindigkeit und Effizienz gerechtfertigt sind. Anstatt sich die tatsächlichen Zeitzahlen anzusehen, sollten Sie sich die Unterschiede zwischen diesen Zahlen in Bezug auf Gerät und Browser ansehen.
Schließlich habe ich Amazon-Links (Affiliate) eingefügt, falls dies jemanden zu Impulskäufen anregt.
Oxygen Builder Ladezeiten nach Browser
Versuchen wir zunächst, es in allen Browsern zu laden, die auf meinem Mac Mini M1 installiert sind. Die Statistiken werden beim Testen nach Gerät neu dargestellt, aber dies ist ein 2020 M1 Mac Mini mit 8 GB RAM, auf dem Big Sur V11.3.1 ausgeführt wird. Dies ist mein "täglicher Desktop".
Wir beginnen mit einem Browsertest, um festzustellen, welcher Oxygen am schnellsten lädt. Wir werden diesen Browser beim Testen verschiedener Geräte verwenden.
Wir testen Safari V14.1, Chrome V95.0.4638.69 und Firefox V94.
- Firefox kommt bei 05,59 Sekunden rein.
- Chrome kommt auf 17,52 Sekunden.
- Safari kommt bei 6,20 Sekunden herein.
Chrome war hier der offensichtliche Ausreißer. Ich habe es noch einmal laufen lassen, um zu sehen, ob es beim Laden einen Schluckauf gab - es dauerte nur etwa 16,5 Sekunden, um das zweite Mal zu laden, also denke ich, dass der Durchschnitt eine relativ genaue Zahl ist.
Das Fazit hier ist, dass Firefox der schnellste Browser ist. Dies ist seit einiger Zeit ein Thema, das in der offiziellen Facebook-Gruppe diskutiert wird, also beweisen diese empirischen Daten hoffentlich, dass Sie diesen Browser verwenden sollten. Persönlich ist Firefox mein Lieblingsbrowser zum Entwickeln von Websites, da er über eine Menge hochwertiger Frontend-Entwicklertools verfügt. Im Vergleich zu Chrome mangelt es jedoch an Sicherheits- und Leistungsprüfungen.
Wir werden diesen Browser für die Gerätetests verwenden.
Oxygen Builder Ladezeiten nach Browser
Für diesen Test verwenden wir Geräte, die sich alle im selben Wi-Fi-Netzwerk befinden, dieselbe Version von Firefox verwenden und dieselbe Seite wie zuvor laden. Der Unterscheidungsfaktor wird das Gerät und die dahinter stehende Teststatistik sein. Hier ist die Aufstellung.
2020 Mac Mini (bereits getestet)
- Apple M1-Chip
- 16 GB Arbeitsspeicher
Lädt Sauerstoff in 05,59 Sekunden.
2019 XPS 13 9370
- Intel i7-8550U
- 16 GB Arbeitsspeicher
Lädt Sauerstoff in 11,54 Sekunden.
2020 iPad Air 10,9 Zoll MYFT2LL/A
- Apple A14-Chip
- 4 GB Arbeitsspeicher
Lädt Sauerstoff in 11,96 Sekunden.
Lesen Sie: Können Sie Websites auf einem iPad Pro entwickeln?
2019 Dell Latitude 7400
- Intel i7 8655U
- 16 GB Arbeitsspeicher
Lädt Sauerstoff in 16,19 Sekunden.
2020 MacBook Pro 13 Zoll
- Intel-Core i5
- 16 GB Arbeitsspeicher
- Intel Iris Plus-Grafik 645 1536 MB
Lädt Sauerstoff in 9,66 Sekunden.
2021 MacBook Pro 16 Zoll
- Apple-M1-Max-Chip
- 64 GB Arbeitsspeicher
Lädt Sauerstoff in 5,43 Sekunden.
Alle Geräte sind während des Tests an ein Batterieladegerät angeschlossen. Der Firefox-Browser ist die einzige offene App/Programm. Sie fragen sich vielleicht, warum ich Zugriff auf all diese Geräte habe. Ich besitze nicht jede einzelne dieser Elektroniken persönlich, stattdessen habe ich Zugang, sie von einer örtlichen Universität zu mieten.
Die großen Imbissbuden
Erstens ist dies, wie bereits mehrfach erwähnt, ein unvollkommener Test. Es wurde nicht in einer Laborumgebung durchgeführt. Seiten mit weniger dynamischen Daten werden im Backend Builder schneller geladen und Seiten mit dynamischeren Daten werden langsamer geladen. Gleiches gilt für Bilder, DOM-Elemente und Skripte.
Ich schlage vor, diese Nummern willkürlich zu verwenden. Anstatt zu sagen, dass Oxygen für Sie in X,XX Sekunden geladen wird, verwenden Sie die Zahlen, um den Browser und die Geräte zu vergleichen.
Takeaway 1: Browser-Angelegenheiten
Wie Facebook immer wieder feststellt, ist Firefox der schnellste Browser, um Oxygen Builder zu laden. Ich persönlich verwende die Firebox Developer Edition.
Erkenntnis 2: Geräte sind wichtig
Die schnellsten zwei Geräte sind die neuesten Apple-Geräte mit Apple Silicone. Das macht Sinn; diese Prozessoren sind viel schneller als so ziemlich alles andere auf dem Markt; und sie sind nicht so teuer. Der Basis-M1 Mac Mini kostet unter 600 US-Dollar, und das M1 Macbook Air kostet 899 US-Dollar.
Takeaway 2B: Sieht so aus, als ob der Prozessor wichtiger ist als RAM
Es sieht auch so aus, je leistungsfähiger der Prozessor ist, desto besser ist die Ladezeit des Backend-Builders. Beispielsweise lädt ein Laptop mit 64 GB RAM ähnlich wie ein Laptop mit 16 GB RAM. Wenn die Prozessorleistung sinkt, sinkt auch die Ladezeit des Builders.
Ich würde erwarten, dass der Versuch, den Builder auf einem Chromebook oder einem anderen Gerät mit niedrigen Statistiken zu laden, schwierig sein kann.
Abschließende Gedanken
Die durchschnittliche Ladezeit des Oxygen-Backends für diesen Test betrug etwa 10 Sekunden für eine große, nicht optimierte Seite mit einer Menge dynamischer Daten. Darüber hinaus gab es mehrere Add-Ons, die eigene Elemente auf die Seite luden, zusammen mit einer umfangreichen Sammlung von benutzerdefiniertem, globalem CSS. Dies ist in meinem Buch sehr akzeptabel. Noch akzeptabler wird es, wenn Änderungen der CSS-Klassen und globalen Optionen synchronisiert werden können, ohne dass der Builder mit dem Collaboration-Plugin neu geladen werden muss.
Als Webentwickler, der Oxygen für die meisten Projekte verwendet, hat mich die Geschwindigkeit des Builders nie beeinträchtigt, aber ich wollte ernsthaft einen Blick darauf werfen, was das beste Setup dafür ist.
Wenn Sie eigene Vergleichszahlen haben, können Sie diese gerne im Kommentarbereich unten posten.