En 2023, puis-je me passer d’Elementor grâce à Gutenberg ?

Parmi les constructeurs de page, Elementor est l’une des extensions les plus connues. Apparu avec la version 5.0 de WordPress, Gutenberg est désormais l’éditeur par défaut de WordPress. Est-il encore nécessaire en 2023 d’avoir recours à Elementor ? Puis-je m’en passer et Gutenberg peut-il rivaliser ? Autant de questions auxquelles je vais essayer de répondre dans cet article.

 

ELEMENTOR en 2023

Elementor est une extension de création de pages/articles pour WordPress, permettant aux créateurs de créer des sites Web professionnels et parfaits au pixel près avec un constructeur visuel et intuitif. Elementor permet de créer rapidement des sites Web incroyables pour vos clients ou votre entreprise avec un contrôle total sur chaque élément, sans écrire une seule ligne de code.

• Elementor dispose d’une version freemium
• Lancement le 30 mai 2016
• Coût version Pro : 49 USD/an/site
• Noté 4,2/5 sur WordPress.org
• +5 millions d’installations actives
• Téléchargements : 219 325 667

Elementor est vraisemblablement le Page Builder Freemium le plus puissant du marché. C’est justement parce qu’il est “freemium” qu’il a connu ce grand succès. Mais ce n’est pas la seule raison. En effet, il a bousculé les “codes” de construction d’un site web avec WordPress, faisant même oublier la notion de “thème” et la place qu’ils prenaient en termes de design jusqu’alors ! À présent, ce n’est plus primordial de bien choisir son thème au vu des fonctionnalités qu’Elementor propose (dans sa version pro)…

Les avantages d’ELEMENTOR

Elementor est un freemium, c’est-à-dire que certaines fonctionnalités sont réservées aux utilisateurs qui paient une licence annuelle. Toutefois, Elementor a de nombreux avantages.

Dans sa version Gratuite :

1. L’un des meilleurs constructeurs de page gratuit.
2. Une UX poussée et fluide.
3. Aperçu en temps réel.
4. Le fameux glisser/déposer.

Dans sa version Payante :

1. Nombreux designs et templates prêts à l’emploi.
2. Personnalisation poussée du thème (header, footer, sidebar.
3. Modules supplémentaires (Forms, liste prix, Woo).
4. Modifier l’accès aux rôles.
5. Assistance.

 

GUTENBERG en 2023

Avant, l’éditeur classique de WordPress ressemblait fortement à un traitement de texte type Word ou Open Office, aujourd’hui avec l’avènement de Gutenberg, c’est bien différent ! On se rapproche plus d’un constructeur de page.

• Éditeur de blocs WordPress en remplacement de TinyMCE
• Lancement le 06 décembre 2018
• Directement intégré au cœur WordPress depuis la v5
• Tendance 2023 : de Content Builder à Page Builder

Gutenberg relève nos défis et nos opportunités de front tout en profitant simultanément à tous ceux qui gagnent leur vie en travaillant dans l’écosystème WP. Il s’agit de bien plus que de simples blocs. — MATT MULLENWEG, IN MA.TT

Les avantages de GUTENBERG

Gutenberg est désormais une fonctionnalité du cœur de WordPress, ce qui signifie que vous n’avez plus à vous soucier des problèmes de compatibilité. Comme il s’agit d’une fonctionnalité du cœur, les développeurs peuvent intégrer la prise en charge de Gutenberg dans leurs extensions.

Gutenberg produit un code plus propre et plus léger. Un design construit avec Gutenberg se chargera généralement plus vite que le même design réalisé avec un constructeur de pages.

Mais ce n’est pas tout !

• Des blocs de plus en plus nombreux.
• Des add-ons qui enrichissent ses fonctionnalités de base.
• Des templates et designs prêts à l’emploi gratuitement.
• Le FSE en approche.

Ah j’allais oublier, c’est juste GRATUIT et sans problème de compatibilité !

GUTENBERG : pour VOUS ou pour vos CLIENTS !

Nous sommes en 2023, cela fait déjà un moment que Gutenberg a essuyé ses plâtres et ses erreurs de jeunesse :

• Simplifiez-vous la vie et le support
• Soignez votre dette technique avec un code moins lourd (Gutenberg stocke du HTML pur en base de données)
• Boostez votre SEO : le code HTML généré par Gutenberg est propre, accessible et respectueux des standards
• Un rendu en front qui respecte les styles de votre thème WordPress
• Une ergonomie qui progresse et s’améliore
• Gutenberg uniformise les concepts d’édition d’un site web en un seul moyen : le bloc

Le catalogue de blocs GUTENBERG

Ce catalogue de blocs s’enrichie de jour en jour, nombreuses sont les extensions qui permettent de se faciliter la vie et les blocs ! Je vous en ai sélectionné 4 parmi les principales :

Spectra – WordPress Gutenberg Blocks
Par Brainstorm Force

Gutenberg Blocks by Kadence Blocks
By Kadence WP

Stackable – Page Builder Gutenberg Blocks
By Gambit Technologies, Inc

Ultimate Blocks – Gutenberg Blocks Plugin
Par Ultimate Blocks

Démo de Spectra blocs (auparavant Ultimate Addons for Gutenberg)

Si je ne devais en choisir qu’une, je choisirais Spectra. C’est celle qui à ma préférence, fluide, variée et performante, cette extension devrait vous combler.

Dans cette vidéo de 3mn 27s, vous verrez un aperçu du catalogue de site et design prêts à l’emploi proposé par Spectra Blocs. Vous en voyez un qui vous plait ? Un clic et c’est importé ! Pages, Patterns ou Wireframe, importez ce que vous voulez au moment où vous en avez besoin !

Vous verrez également quelques-uns des blocs proposés par Spectra. Pas moins de 33 blocs complémentaires, à ceux natifs de Gutenberg, vous seront proposés.

Démo de l’import d’un template proposé par Spectra

Ici, j’ai testé l’import d’un template Spectra, j’ai juste changé le texte et je l’ai testé en vitesse et en performance.

 

Voici les résultats obtenus sans aucune optimisation :

• Site testé sans cache, images non optimisées
• Google Pagespeed : 99/100
• GTMetrix : A – Performance 95% – Structure 98%
• Pingdom Tools : A 97 – Poids 1,2MB – Load 925ms – Requêtes 21

 

GUTENBERG est bien plus RAPIDE !

Dans un post intitulé « Merde. Gutenberg fume Elementor », Kyle Van Deusen a publié des benchmarks de son expérience de construction d’une page de destination simple en utilisant Elementor puis Gutenberg.

« Comme tout utilisateur d’Elementor, je suis devenu de plus en plus inquiet quant à son avenir et à quel point il est devenu lourd », a déclaré Van Deusen. « Je pense que Google PageSpeed Insights est d’accord avec ce constat. »

Après avoir recréé le même design avec Gutenberg et Elementor, Van Deusen a vu une vraie différence dans les scores GTMetrix.

Il a trouvé une différence plus marquée lors des tests avec PageSpeed Insights de Google, où Elementor a obtenu 46% sur mobile et 83% sur ordinateur.

« Parce que j’ai eu tellement de chance d’obtenir des scores décents avec les sites Elementor (en particulier sur mobile), j’ai renoncé à utiliser cet outil », a déclaré Van Deusen. « Non pas parce que ce n’est pas une mesure valable (en fait, c’est peut-être la plus précieuse puisque c’est ainsi que Google voit les choses), mais parce qu’il n’y avait pas grand-chose que je pouvais faire à ce sujet. »

En revanche, la page construite avec Gutenberg lui a donné un score de 94% sur mobile et un score de 99% sur ordinateur.

 

« En termes de performance, dès la sortie de boîte ; Gutenberg fume absolument Elementor », a déclaré Van Deusen. « Dès que j’ai l’impression de m’y habituer, les roues finissent par se détacher et je recommence à installer Elementor. Mais lorsque vos scores PageSpeed Insights passent de 46 % à 94 %, il est temps de s’y intéresser et de faire attention. »

Dans une autre expérience, le développeur WordPress Munir Kamal a reconstruit la page d’accueil d’Elementor dans Gutenberg pour comparer le balisage HTML généré par les deux constructeurs de pages. La page construite avec Elementor inclut 356 DIVs dans le balisage contre 77 pour Gutenberg. Kamal a constaté qu’Elementor générait 796 lignes de code contre 206 lignes pour Gutenberg, ce qui donnait une différence de 99kb vs 28kb, encore une fois à l’avantage de ce dernier.

 

Pour conclure, puis-je me passer d’Elementor grâce à Gutenberg ?

En 2023, il est désormais temps de bien prendre en compte que Gutenberg est l’avenir de WordPress, intégré au cœur et en développement constant, il sera l’éditeur de contenu qui vous assurera une rétrocompatibilité optimale et de meilleures performances. Son ergonomie, son UX s’améliore de jour en jour, le catalogue de blocs s’étoffe et permet de réaliser tout ce que fait Elementor sans débourser le moindre centime. L’avènement du FSE est en marche et il n’y aura pas de retour en arrière.

Si j’ai réussi à vous convaincre, je vous invite à lire nos tutoriels sur Gutenberg pour bien démarrer ;)

Retrouvez ci-dessous la vidéo de ma conférence sur le sujet au WordCamp Lyon 2022 :
Source: Puis-je me passer d’Elementor grâce à Gutenberg ? – WordPress.tv