Si vous êtes un adepte de la pureté du code HTML généré par les Page Builders; si vous êtes un vrai puriste ; et que vous souhaitez choisir le Page Builder le plus frais à ce niveau là… vous êtes sur LE bon comparatif ! Apprêtez-vous à découvrir les révélations de Supa Mike, mon bon ami expatrié en Chine ; véritable ambassadeur d’un constructeur de page qui respire (un Page Builder bien particulier ; vous saurez lequel en fin d’article 😉 ). Ça nous changera de mes articles lèche-bottes sur Divi 😀 C’est parti pour le comparatif scientifique!! des constructeurs de pages WordPress. Merci Mike, t’assures !

Mister WP

Au lieu de comparer les fonctionnalités, les options, l’interface, le prix, le support…en gros ce que font la plupart des comparatifs, j’ai décidé plutôt de comparer les pages qui sont générées par ces « page builders ».

Le but est simplement d’en savoir plus sur la façon dont ils gèrent leurs pages. Combien de fichiers ajoutent-ils, leurs tailles, le nombre de requêtes et qu-est-ce ce qui est chargé par défaut.

Les tests que vont subir ces constructeurs de pages

J’ai utilisé le même thème pour chacun d’entre eux. À savoir le thème Hello de Elementor. C’est un thème ultra light, contenant le strict minimum. Seul un fichier CSS de 2.2Ko est ajouté aux pages 😮

TEST 1 : Une page vide avec un Titre (Heading).

Configuration par défaut, aucun style ni quoi que ce soit. Si j’ai ajouté un titre c’est parce que certain builders ne s’activent pas si on n’ajoute pas de contenu.

TEST 2 : Une page contenant quelques éléments basiques.

Un titre, du texte, une image et un bouton. Le titre est stylé (nouvelle taille, nouvelle couleur, nouvelle police) . On se rapproche ici d’une vraie page web, avec du contenu, même si c’est très minimaliste et pas forcement beau.

TEST 3 : Même page que la prétendante mais avec un effet de fondu sur l’image.

Il est intéressant de voir comment ils gèrent les animations. Vous verrez qu’ils ne le font pas tous de la même façon.

TEST 4 : Page vide mais avec le thème du constructeur.

Certains page builders ont leurs propres thèmes, qu’ils vendent comme étant le thème parfait pour leur plugin. C’est le cas pour Divi et Beaver 😉

Les constructeurs de page testés sont :

Beaver Builder v2.1.7

Brizy v1.0.50

Divi Builder v2.17.6

Elementor v2.3.4

Elementor Pro v2.2.5

Oxygen 2.2 Alpha 1 (la version précédente n’ayant pas l’option d’animation).

Thrive Architect v2.1.2

WPBakery Page Builder v5.6

Dans les captures d’écran qui suivent, je retiens seulement la vraie taille des fichiers (Size) et non la taille lors des transferts. D’où le choix d’avoir utilisé le devtools de Firefox. Il est le seul a donner la vraie taille.

Beaver Builder

TEST 1 : Beaver Builder fait plutôt bien les choses. Par défaut, il va charger deux petits fichiers : Un peu de Javascript et une dose de CSS.

TEST 2 :  On ajoute quelques éléments supplémentaire pour avoir ce type de page :

Beaver gère ça plutôt bien. L’image, la police (police Google « Montserrat ») ont été ajouté, et les fichiers CSS et JS sont légèrement plus gros.

TEST 3 : On ajoute l’effet de fondu à l’image.

Beaver a donc ajouté la bibliothèque waypoints, qui est une des lib javascript les plus populaires (Elementor, Divi Builder et WPBakery Page Builder l’utilisent aussi).

Tout marche comme prévu. Beaver va charger les libs uniquement quand elles sont nécessaires. Ça parait tout a fait normal et logique mais c’est loin d’être le cas pour tous les builders.

TEST 4 : Beaver, le page builder parfait ? Voilà le même test que la page vide mais avec leur propre thème, a savoir : Beaver Builder Theme

Résultat plutôt décevant. Là ou le builder faisait très fort, le thème fait l’inverse et charge tous les fichiers par défaut, alors qu’aucun n’est réellement nécessaire.
Je rappelle qu’ici, on veut simplement afficher un <h1>title</h1> et rien d’autre ! 😮

Divi Builder

TEST 1 : Chez ElegantThemes, c’est la fête. Ils ont décidé tout simplement de tout charger quelque soit le contenu de la page 😀 Voilà les 2 gros fichiers qui sont ajoutés par défaut, qui contiennent tous les scripts et les styles. C’est-à-dire que pour une page vide, on se prend 886Ko dans la face ! 😀

Alors, il est vrai que personne ne va créer une page vide pour l’afficher en ligne, mais ça donne quand même une idée de la façon dont marche ces constructeurs de page 😉

TEST 2 : La suite logique, les nouveaux éléments sont mis en place, l’image a été ajoutée + une police de caractère et un fichier « font » modules.ttf qui apparemment contient des icônes.

TEST 3 : À peu prêt le même résultat que le TEST 2.

TEST 4 : Petit essai avec leur propre thème : Divi
+1Mo pour un simple titre 😮 Ils ont aussi une option pour désactiver les polices Google, ce qui peut être pratique et permet d’alléger un peu les pages.

Note : J’avais utilisé la version 2.17.6 pour ces tests. Je viens de refaire le premier test avec une version plus récente (2.18.6) : Les fichiers de Divi sont encore plus gros. 😮

Elementor

TEST 1 : Elementor charge plein de chose. Tout comme Divi, il charge tous les scripts et styles par défaut, quelque soit le contenu de la page.
La différence est que Divi a combiné tout sur deux gros fichiers, alors qu’Elementor les charge tous individuellement. D’où les 17 requêtes pour afficher notre pauvre balise <h1>.

TEST 2 : La suite logique

TEST 3 : Comme le TEST 2, rien n’a changé car tout ce qui concernait l’animation est de toute façon chargé par défaut.

Elementor Pro

Ajoutons maintenant Elementor pro juste pour le premier test. On a donc 3 fichiers en plus, pour un total de 750Ko pour une page « vide ».

WPBakery Page Builder

TEST 1 : Un bon gros fichier CSS de 470Ko, alors qu’on affiche un titre sans aucun style… ça parait un peu exagérer 😉

TEST 2 : La suite, on la connait…

TEST 3 : C’est intéressant, ce bon vieux « Visual Composer » a ajouté la fameuse lib « waypoints » et le fichier animate.css parce qu’on a ajouté une animation.
Il gère ça mieux que Divi et Elementor 😀

Brizy

TEST 1 : Brizy charge aussi deux gros fichiers + une police Google.

TEST 2 : pas de surprise non plus ici, les nouveaux éléments sont bien ajoutés comme prévu.

TEST 3 : Résultats similaires au TEST 1.

Thrive Architect

TEST 1 : Ça continue ! Un bon gros fichier CSS des familles + « masonry » + d’autres bricoles…

TEST 2 : l’image et la police en plus !

TEST 3 : On ajoute l’animation. La page est légèrement plus lourde… Au moins ils ajoutent juste le code pour l’animation quand c’est nécessaire.

Oxygen Builder

TEST 1 : Oxygen utilise 2 police Google par défaut (« Source sans pro » et « Open sans ») et il ajoute simplement 2 petits fichiers CSS.

TEST2 : J’ai changé la police pour le titre mais pas les polices globales, du coup on charge 3 polices alors que 2 sont uniquement nécessaire ici.

TEST3 : l’animation de fondu a été ajoutée. Deux fichiers l’ont été aussi (AOS.js et AOS.css).

Oxygen charge donc ses fichiers uniquement quand c’est nécessaires !!!

À part les polices Google, mais comme pour tous les Constructeurs de pages, on peut facilement gérer les fonts pour utiliser uniquement celles dont on a besoin.

Conclusion : quel est le constructeur de pages le plus léger ?

Beaver Builder fait du très bon boulot avec son Page Builder, qui charge le minimum et ajoute uniquement les fichiers nécessaires quand ils sont utilisés. Par contre leur propre thème fait exactement le contraire.

D’où l’importance du choix du thème.

Oxygen fait la même chose et peut être encore plus léger si on gère bien les polices. Ce qui n’est pas un gros soucis mais il faut le savoir. 😉

Pour les autres constructeurs de pages, ils ne se posent pas la question ! L’optimisation c’est le cadet de leur soucis 😀 C’est peut être un détails qui ne dérange pas la plupart des utilisateurs, mais quand on bosse dans le web et qu’on aime le travail bien fait, on attache pas mal d’importance à ce type d’optimisations…

Petit récapitulatif rapide des fichiers chargés par chaque constructeurs de pages dans leur configuration « par défaut ». N.B. : les polices Google ne sont pas incluses car on peut facilement les désactiver dans les options.

CSS JS TOTAL
BEAVER BUILDER v2.1.7 19.81 17.46 37.27
DIVI BUILDER v2.18.6 550.08 203.74 753.82
ELEMENTOR v2.3.4 154.44 184.19 338.63
ELEMENTOR PRO v2.2.5 349.66 233.45 583.11
WPBAKERY v5.6 473.40 19.24 492.64
BRIZY v1.0.50 322.23 212.28 534.51
THRIVE ARCHITECT v2.1.2 409.48 101.5 510.98
OXYGEN BUILDER v2.2 Alpha 1 20.11 20.11

 

Voilà, merci Mike ! N’hésitez pas à laisser un commentaire ci-dessous 😉

Cet article est basé sur la version anglaise publiée ici par Supa Mike : The Best WordPress Page Builders compared.

Pour aller plus loin, découvrez également le comparatif complet de Supa Mike sur Oxygen Builder.

Pensez à suivre SupaMikeZ sur Twitter et à lire son excellente interview en ces lieux. Avec des petits pois dedans, comme dans le riz Cantonnais. Et puis son site : Webdesign in China.

Vous aussi, proposez votre article !

Ne soyez pas timide. Vous aussi vous pouvez être publié sur Mister WP. Cliquez sur ce joli bouton pour savoir comment ça se passe 😉

Vos commentaires sont très appréciés ci-dessous !

Veuillez cependant respecter les bonnes pratiques de commentaires sur les blogs, sinon votre message s'autodétruira après 10 secondes entre mes mains.

  • Vous devez avoir lu l'article, sinon je m'en rendrais compte, et boom !
  • Vous ne pouvez renseigner aucun mot clé SEO dans le champ "nom" (pseudo, nom de société, pas de souci).
  • Vous pouvez renseigner votre "Site Web", vous aurez un lien dofollow, je suis gentil. Par contre, gardez à l'esprit qu'il s'agit d'un lien qui sert à vous identifier en tant qu'individu (site de votre société, votre blog perso, votre chef d'œuvre WordPress...). Je refuse donc : les sites de vos clients, les pages internes que vous peinez à booster, les MFAs sans intérêt, les serruriers, rachats de crédits et autres saloperies.
  • Vous devez avoir un avis sur le sujet abordé (même contradictoire) ou au moins poser une question pertinente. Si vous souhaitez juste me montrer votre gratitude éternelle, faites-le avec un retweet ou un partage Facebook. Donc pas de "merci très bel article" qui n'apporte rien.

À vos plumes !