Test de temps de chargement du backend Oxygen Builder
Publié: 2022-04-10Cet article va jeter un œil au temps de chargement du backend d'Oxygen Builder. Beaucoup de gens disent que cela est un inconvénient majeur de ce WordPress PageBuilder, nous avons donc décidé de le tester sur plusieurs appareils différents. Voyons ce qui a été découvert.
Dans un premier temps, nous allons comparer différents navigateurs sur le même appareil. Ensuite, nous comparerons différents appareils utilisant le même navigateur. Cela devrait nous permettre d'identifier non seulement quels appareils chargent Oxygen Builder le plus rapidement, mais aussi quels navigateurs sont les meilleurs pour cette tâche.
Nous exclurons les tests de différentes configurations d'hébergement car cela ajoute une tonne de complexité à cette comparaison. Aussi : c'est un fait bien connu que si vous utilisez un hébergement bon marché, vous aurez des temps de chargement lents à la fois sur le front-end et le back-end de n'importe quel site Web WordPress. C'est entièrement sur vous si tel est le cas. (Cependant, nous pourrions y revenir à l'avenir).
Le sujet de test
Notre sujet de test est un site Web de constructeur d'oxygène relativement standard créé par nous, pour notre public. Examinons les performances initiales de la page, sa taille et d'autres aspects.
Ce site Web de test est hébergé sur un serveur DO Premium dédié, avec 2 Go de RAM et des paramètres standard. Il est géré par Cloudways, qui est notre hébergeur recommandé pour la vitesse, le coût et l'assistance. Au moment des tests, nous n'avions effectué aucune optimisation supplémentaire de la vitesse sur le site. Les paramètres du serveur n'ont pas été modifiés depuis la mise en route de l'instance.
Lire : Décomposer les cinq choix de serveurs de Cloudway pour l'hébergement WordPress
Remarque : il s'agit d'une excellente option de serveur pour les sites de développement et à faible trafic, que vous pouvez facilement faire évoluer lors du lancement. Utilisez le code ISOTROPIC pour bénéficier d'une réduction sur Cloudways lors de votre inscription et bénéficiez d'un essai gratuit de 3 jours (sans CC).
La page testée est la page d'accueil du site. Au moment du test, cela ressemblait à ceci:
Les principaux éléments de la page qui se chargeaient étaient un élément de menu Oxygen Builder, une barre de recherche personnalisée et une grille de messages de démonstration faciles (la première section), un élément WSForm Oxygen et un carrousel OxyExtras avec un répéteur à l'intérieur. Ce répéteur avait plus de neuf publications et des dizaines de conditions basées sur les champs MetaBox.
La page était publique car un sous-domaine DNS deals.isotropic.co était proxy via Cloudflare.
La taille totale de la page était de 5,05 Mo. Cela était principalement dû à l'utilisation d'images optimisées au moment des tests. N'oubliez pas qu'il s'agit d'un site Web de développement précoce (je vous promets que nous le ferons rapidement avant de le mettre en ligne). Je pense que ce type de site Web est le meilleur moyen de tester la vitesse de retour et de chargement d'Oxygen Builder, car il simule un environnement de développement normal.
Les plugins utilisés étaient les suivants :
| Nom | La description | Développeur | Statut | Version utilisée | La revue |
|---|---|---|---|---|---|
| Meilleurs liens | Plugin ultime pour créer, raccourcir, suivre et gérer n'importe quelle URL. Rassemblez des rapports d'analyse et exécutez facilement des campagnes marketing réussies. | WPDeveloper | Actif | 1.2.7 | |
| BetterLinks Pro | Accédez à l'analyse individuelle, à la gestion des rôles, à l'intégration de Google Analytics et à de nombreuses autres fonctionnalités étonnantes pour suivre et exécuter des campagnes marketing réussies. | WPDeveloper | Actif | 1.1.0 | |
| Meilleure recherche Remplacer | Un petit plugin pour exécuter une recherche/remplacement sur votre base de données WordPress. | Cerveaux délicieux | Actif | 1.3.4 | |
| Désactiver les avis d'administration individuellement | Désactiver le plug-in des avis d'administration vous donne la possibilité de masquer les avertissements de mise à jour et les avis en ligne dans le panneau d'administration. | Mouvement créatif | Actif | 1.2.6 | |
| Désactiver Gutenberg | Désactive l'éditeur de blocs Gutenberg et restaure l'éditeur classique et l'écran d'édition de publication d'origine. Fournit des options à activer sur des types de publication spécifiques, des rôles d'utilisateur, etc. | Jeff Star | Actif | 2.5.1 | |
| dPlugins DevKit | Plugin conçu pour les installations et le débogage de dPlugins | devusrmk | Actif | 1.1.2 | |
| Expéditeur d'e-mail élastique | Ce plugin reconfigure la fonction wp_mail() pour envoyer des e-mails en utilisant l'API (via Elastic Email) au lieu de SMTP et crée une page d'options qui vous permet de spécifier diverses options. | Courriel élastique Inc. | Actif | 1.2.3 | |
| Favoris | Boutons favoris simples et flexibles pour tout type de publication. | Kyle Phillips | Actif | 2.3.2 | |
| Pack Hydrogène | Un pack d'améliorations Oxygen Builder permettant de gagner du temps | Nettoyer les plugins | Actif | 1.3.5 | Notre avis |
| MalCare Security - Scanner de logiciels malveillants gratuit, protection et sécurité pour WordPress | MalCare Security - Scanner de logiciels malveillants gratuit, protection et sécurité pour WordPress | Sécurité des programmes malveillants | Actif | 4.63 | |
| Méta-boîte | Créez des méta-boîtes personnalisées et des champs personnalisés dans WordPress. | MetaBox.io | Actif | 5.4.8 | Notre avis |
| Meta Box AIO | Toutes les extensions Meta Box dans un seul package. | MetaBox.io | Actif | 1.15.1 | |
| Connexion sociale | Nextend Social Login affiche des boutons de connexion sociale pour Facebook, Google et Twitter. | Nextendweb | Actif | 3.1.2 | |
| OxyExtras | Bibliothèque de composants pour l'oxygène. | OxyExtras | Actif | 1.3.8 | |
| Oxygène 3.9 Bêta 2 | BÊTA. À UTILISER À VOS RISQUES ET PÉRILS. | Soflyy | Actif | 3.9 Bêta 2 | |
| Éléments d'oxygène pour WooCommerce | Créez de magnifiques sites Web WooCommerce. | Soflyy | Actif | 1.4 | |
| OxyMade | Tailwind CSS basé sur la classe utilitaire, cadre et outils CSS pour Oxygen Builder. | Anvesh | Actif | 1.5.2 | Notre avis |
| SSL vraiment simple | Plugin léger sans aucune configuration pour rendre votre site SSL proof | Des plugins vraiment simples | Actif | 5.1.2 | |
| Redirection | Gérez toutes vos redirections 301 et surveillez les erreurs 404 | John Godley | Actif | 5.1.3 | |
| Redimensionner l'image après le téléchargement | Redimensionnez automatiquement les images téléchargées dans les limites de largeur et de hauteur maximales spécifiées. A également l'option de forcer la recompression des JPEG. Options de configuration trouvées sous Paramètres> Redimensionner le téléchargement d'image | CourtPixel | Actif | 1.8.6 | |
| Organisateur de scripts | Éditeur de code avancé pour Wordpress | dPlugins | Actif | 3.0.0 Bêta 2 | Notre avis |
| RechercheWP | La meilleure recherche WordPress que vous puissiez trouver | RechercheWP | Actif | 4.1.22 | |
| RechercheWP Live Ajax Search | Améliorez vos formulaires de recherche avec la recherche en direct, optimisée par SearchWP (si installé) | SearchWP, LLC | Actif | 1.6.1 | Notre avis |
| Métriques SearchWP | Métriques de recherche avancées de SearchWP | RechercheWP | Actif | 1.4.0 | |
| Codes abrégés SearchWP | Fournit des codes abrégés qui génèrent à la fois des formulaires de recherche et des pages de résultats pour les moteurs de recherche SearchWP | RechercheWP | Actif | 1.8.2 | |
| Shareaholic - Développez et engagez votre public | Le plug-in WordPress officiel de Shareaholic vous permet d'ajouter des boutons de partage social primés, des publications connexes, des analyses de contenu, la monétisation des publicités, etc. à votre site Web. | accro du partage | Actif | 9.7.1 | |
| Couteau suisse | Le premier plugin que vous devez installer lorsque la valeur par défaut d'Oxygen ne suffit pas. | dPlugins | Actif | 1.3.7 | Notre avis |
| Gestionnaire de fichiers WP | Gérez vos fichiers WP. | mndpsingh287 | Actif | 7.1.2 | |
| Générateur de grille WP | Créez des mises en page de grille avancées avec une recherche à facettes en temps réel pour votre commerce électronique, votre blog, votre portefeuille, etc. | Loïc Blascos | Actif | 1.5.9 | Notre avis |
| WP Grid Builder - Boîte de méta | Intégrez WP Grid Builder avec le plugin Meta Box. | Loïc Blascos | Actif | 1.0.0 | |
| WP Grid Builder - Oxygène | Intégrez WP Grid Builder avec le plugin Oxygen. | Loïc Blascos | Actif | 1.0.2 | |
| Formulaire WS PRO | Construire de meilleurs formulaires WordPress | Formulaire WS | Actif | 1.8.125 | Notre avis |
| WS Form PRO - Gestion des utilisateurs | Module complémentaire de gestion des utilisateurs pour WS Form PRO | Formulaire WS | Actif | 1.4.1 |
*Nous passons en revue les plugins que nous utilisons réellement, comme en témoigne ici :).
Il est important de noter que nous utilisions Oxygen Builder 3.9 Beta 2. Nous avions également installé les éléments WooCommerce, mais WooCommerce lui-même n'était pas à ce stade.
Selon les rapports des développeurs, cette version d'Oxygen était presque deux fois plus rapide à charger sur le backend que la précédente.
De plus, je tiens à noter qu'OxyExtras, WPGridbuilder, OxyMade et WSForm ont tous ajouté des éléments au backend du constructeur. Swiss Knife, un outil skin/workflow et Hydrogen Pack sont également chargés dans le backend.
Essentiellement, ce sujet de test est une page que beaucoup d'utilisateurs d'Oxygen Builder ont l'habitude de charger. Il existe plusieurs modules complémentaires, extensions et scripts qui se chargeront sur le backend à partir du générateur et des plug-ins tiers.
Enfin, voici un bref aperçu de mon WiFi :
Comment ce test est exécuté
Ce test est administré en chargeant directement Oxygen Builder en cliquant sur "modifier avec Oxygen" sur le backend de la page.
Le bouton est appuyé et le chronomètre démarre là. Une fois que l'icône de la roue dentée s'arrête et que le navigateur est complètement initialisé, le test s'arrête.
Veuillez noter que ce n'est pas tout à fait exact car je chronomètre manuellement à l'aide d'un chronomètre pour iPhone, mais cela devrait donner une bonne approximation des appareils et des navigateurs qui chargent ce plugin le plus rapidement. Il convient également de noter que la page a été chargée précédemment sur la fontend, mais jamais sur le backend builder en tant qu'administrateur . J'arrive au constructeur en chargeant deals.isotropic.co, en allant dans la barre supérieure, en cliquant sur modifier la page, puis en cliquant sur le bouton modifier avec de l'oxygène.
Le but de cette épreuve n'est pas une course de vitesse. Il s'agit d'obtenir des données vraiment réelles sur le retour et les temps de chargement de ce plug-in pour voir si des inquiétudes sont justifiées concernant la vitesse et l'efficacité. Au lieu de regarder les chiffres de temps réels, pensez à regarder les différences entre ces chiffres en ce qui concerne l'appareil et le navigateur.
Enfin, j'ai inclus des liens Amazon (affiliés) au cas où cela inciterait quelqu'un à acheter par impulsion.
Temps de chargement d'Oxygen Builder par navigateur
Essayons d'abord de le charger sur tous les navigateurs installés sur mon Mac Mini M1. Les statistiques seront reformulées lors des tests par appareil, mais il s'agit d'un Mac Mini M1 2020 avec 8 Go de RAM, exécutant Big Sur V11.3.1. Ceci est mon "bureau quotidien".
Nous commençons par un test de navigateur pour déterminer lequel est le plus rapide pour charger Oxygen. Nous utiliserons ce navigateur pour tester différents appareils.
Nous testons Safari V14.1, Chrome V95.0.4638.69 et Firefox V94.
- Firefox arrive à 05,59 secondes.
- Chrome arrive à 17,52 secondes.
- Safari arrive à 6,20 secondes.
Chrome était la valeur aberrante évidente ici. Je l'ai exécuté à nouveau pour voir s'il y avait un problème lors du chargement - il n'a fallu qu'environ 16,5 secondes pour charger la deuxième fois, donc je pense que la moyenne est un nombre relativement précis.
La conclusion ici est que Firefox est le navigateur le plus rapide. C'est un sujet discuté dans le groupe Facebook officiel depuis un certain temps maintenant, alors j'espère que ces données empiriques prouvent que vous devriez utiliser ce navigateur. Personnellement, Firefox est mon navigateur préféré pour développer des sites Web car il dispose d'une tonne d'outils de développement frontaux de haute qualité. Cependant, comparé à Chrome, il manque d'audits de sécurité et de performances.
Nous utiliserons ce navigateur pour les tests de l'appareil.
Temps de chargement d'Oxygen Builder par navigateur
Pour ce test, nous allons utiliser des appareils tous sur le même réseau Wi-Fi, utilisant la même version de Firefox, chargeant la même page qu'auparavant. Le facteur de différenciation sera l'appareil et les statistiques de test qui le sous-tendent. Voici la programmation.
Mac Mini 2020 (déjà testé)
- Puce Apple M1
- 16 Go de RAM
Charge l'oxygène en 05,59 secondes.
2019 XPS 13 9370
- Intel i7-8550U
- 16 Go de RAM
Charge l'oxygène en 11,54 secondes.
iPad Air 2020 10,9 pouces MYFT2LL/A
- Puce Apple A14
- 4 Go de RAM
Charge l'oxygène en 11,96 secondes.
Lire : Pouvez-vous développer des sites Web sur un iPad Pro ?
Dell Latitude 7400 2019
- Intel i7 8655U
- 16 Go de RAM
Charge l'oxygène en 16,19 secondes.
MacBook Pro 13 pouces 2020
- Intel Core i5
- 16 Go de RAM
- Carte graphique Intel Iris Plus 645 1536 Mo
Charge l'oxygène en 9,66 secondes.
Macbook Pro 16 pouces 2021
- Puce Apple M1 Max
- 64 Go de RAM
Charge l'oxygène en 5,43 secondes.
Tous les appareils sont branchés sur un chargeur de batterie pendant les tests. Le navigateur Firefox est la seule application/programme ouvert. Vous vous demandez peut-être pourquoi j'ai accès à tous ces appareils. Je ne possède pas personnellement chacun de ces appareils électroniques, mais j'ai plutôt accès à les louer auprès d'une université locale.
Les gros plats à emporter
Tout d'abord, comme mentionné à plusieurs reprises, il s'agit d'un test imparfait. Il n'a pas été réalisé dans un environnement de laboratoire. Les pages avec moins de données dynamiques se chargeront plus rapidement dans le générateur de backend, et les pages avec plus de données dynamiques se chargeront plus lentement. Idem pour les images, les éléments DOM et les scripts.
Je suggère d'utiliser ces chiffres arbitrairement. Au lieu de dire qu'Oxygen se chargera dans X,XX secondes pour vous, utilisez les chiffres pour comparer le navigateur et les appareils.
À emporter 1 : les navigateurs comptent
Comme l'indique régulièrement Facebook, Firefox est le navigateur le plus rapide pour charger Oxygen Builder. Personnellement, j'utilise Firebox Developer Edition.
Plat à emporter 2 : L'appareil compte
Les deux appareils les plus rapides sont les appareils Apple les plus récents utilisant Apple Silicone. C'est logique; ces processeurs sont beaucoup plus rapides que pratiquement tout ce qui existe sur le marché ; et ils ne sont pas si chers. Le M1 Mac Mini de base coûte moins de 600 $ remis à neuf et le M1 Macbook Air coûte 899 $.
Takeaway 2B : On dirait que le processeur compte plus que la RAM
Il semble également que plus le processeur est puissant, meilleur est le temps de chargement du constructeur backend. Par exemple, un ordinateur portable avec 64 Go de RAM se charge de la même manière qu'un ordinateur avec 16 Go de RAM. À mesure que la puissance du processeur diminue, le temps de chargement du générateur diminue également.
Je m'attendrais à ce qu'il soit difficile d'essayer de charger le constructeur sur un Chromebook ou un autre appareil avec des statistiques faibles.
Dernières pensées
Le temps de chargement moyen d'Oxygen Backend pour ce test était d'environ 10 secondes pour une grande page non optimisée, avec une tonne de données dynamiques. De plus, il y avait plusieurs modules complémentaires qui chargeaient leurs propres éléments sur la page, ainsi qu'une importante collection de CSS globaux personnalisés. C'est très acceptable dans mon livre. Cela devient encore plus acceptable lorsque les modifications des classes CSS et des options globales peuvent être synchronisées sans avoir à recharger le constructeur avec le plugin Collaboration.
En tant que webdev qui utilise Oxygen pour la plupart des projets, la vitesse du constructeur ne m'a jamais affecté, mais je voulais sérieusement examiner quelle était la meilleure configuration pour cela.
Si vous avez vos propres chiffres de comparaison, n'hésitez pas à les publier dans la section des commentaires ci-dessous.