Construire une page avec Gutenberg, c'est possible. Recette, résultats, gains… tout est dans l'article.

Cet article prend 4 minutes à lire et comporte 911 mots.

Pour créer un site WordPress qui en jette, il faut… un mini­mum d’ima­gi­na­tion. Je vous entends déjà : « Et un construc­teur de page ! » Oui. C’est vrai. Mais pour­quoi pas Gutenberg, l’édi­teur par défaut de WordPress ? Non, non. Ne souriez pas. Ne vous moquez pas. Surtout pas avant d’avoir tenté.

La page d’ac­cueil de ce site, par exemple, avez-vous remar­qué qu’elle vient de chan­ger ? Non ? Je ne suis pas surpris, elle ressemble à s’y méprendre à la précé­dente.

Mais la précé­dente était construite via Elementor, et celle-ci, je vous le donne en mille, avec… avec Gutenberg.

Gutenberg qui est main­te­nant l’édi­teur par défaut de WordPress depuis plus de deux ans. Qui a mûri, qui n’a plus rien à voir avec les premières moutures, qui bien que promet­teuses, ne lais­saient pas forcé­ment un arrière-goût prononcé de progrès.

Le défi

Lors d’échanges avec un irré­duc­tible Diviiste, j’ai affirmé qu’il était possible de construire un site unique et qui en jette en n’uti­li­sant que les fonda­men­taux : WordPress et son nouvel acolyte, Gutenberg.

Sans Divi Builder (beurk), sans Elementor, sans Beaver Builder ou Brizy.

J’ai affirmé, en prenant pour exemple les star­ter templates d’Astra, mais je n’avais pas person­nel­le­ment tenté. Alors j’ai voulu me rendre compte par moi-même. Et j’ai réussi.

Je ne dis pas que ma page d’ac­cueil est extra­or­di­naire, sublime ou… enfin vous m’avez compris – je voulais un rendu bien parti­cu­lier, et j’ai obtenu mon rendu, sans trop batailler et sans mettre les mains dans le cambouis code.

Le rendu

Il n’y a pas grande diffé­rence au niveau visuel, on retrouve les mêmes blocs, le même place­ment, avec quelques petits détails qui diffèrent – histoire de ne pas avoir exac­te­ment le même rendu.

L'ancienne page construite avec Elementor
L’ancienne page construite avec Elementor
La nouvelle page construite avec Gutenberg
La nouvelle page construite avec Gutenberg

Les outils : Gutenberg et…

Bien évidem­ment, je ne vous ferai pas l’af­front de prétendre que je n’ai pas utilisé quelques blocs Gutenberg non natifs (mais tirés du dépôt WordPress). Vous ne me croi­riez pas, et vous auriez raison.

Sans pour autant tout vous dire, je vais vous dévoi­ler quelques secrets de fabri­ca­tion…

J’ai tout d’abord utilisé Kadence Blocks, un add-on qui permet de struc­tu­rer ses blocs, de créer des accor­déons, des onglets, et acces­soi­re­ment d’ob­te­nir des effets visuels inté­res­sants, comme une image de fond avec paral­laxe pour une section.

Je n’ai pas utilisé l’en­semble des blocs dispo­nibles via cette exten­sion sur ma page, parce que c’est ma page d’ac­cueil et pas une démo style « sapin de Noël » de tous les effets que l’on peut obte­nir avec Gutenberg et quelques exten­sions complé­men­taires 😉

Kadence blocks, ok. Mais j’ai unique­ment utilisé le bloc Row Layout qui permet d’ob­te­nir des « colonnes » fluides et respon­sives, et le bloc Testimonials dédié aux témoi­gnages.

Mais alors, quelle est l’ex­ten­sion magique qui donne à cette page un aspect si proche de ce que j’avais – non sans mal – obtenu en utili­sant Elementor, et bien sûr, quelques blocs supplé­men­taires ? Tout simple­ment Gutenberg Post Blocks.

Et honnê­te­ment, je me suis régalé à utili­ser cette exten­sion. Intuitive et puis­sante, elle a tout d’une grande – enten­dez d’une exten­sion premium, payante. Tout en restant déses­pé­ré­ment gratuite 😉

Ok, j’ai compris, je vous la présen­te­rai. Laissez-moi le temps de rédi­ger un tuto­riel.

En aparté, vous devriez vous inscrire à ma lettre d’in­for­ma­tion, je l’en­voie dès que je publie un nouvel article – et c’est promis, je ne reven­drai pas votre adresse email, et je n’en­ver­rai jamais de lettre à des fins publi­ci­taires.

Mais alors, pour­quoi avoir changé ? Pour le plai­sir d’uti­li­ser Gutenberg ? Non ! La raison est toute simple, elle tient en trois mots : de meilleures perfor­mances.

Et pour vous en convaincre, voici quelques tests réali­sés avant le chan­ge­ment de page d’ac­cueil. La nouvelle page a (provi­soi­re­ment) pour URL http://167.86.105.130/plesk-site-preview/pascalcescato.gdn/https/167.86.105.130/accueil/ alors que l’an­cienne est toujours la page d’ac­cueil acces­sible via http://167.86.105.130/plesk-site-preview/pascalcescato.gdn/https/167.86.105.130/ (je sais ce n’est pas très clair, il faut suivre…).

Les tests

Commençons par les tests Pingdom Tools :

Test Pingdom Tools - Page créée avec Elementor
Test Pingdom Tools – Page créée avec Elementor
Test Pingdom Tools - Page créée avec Gutenberg
Test Pingdom Tools – Page créée avec Gutenberg

La diffé­rence, vous ne l’avez pas remar­quée visuel­le­ment, mais je suis certain que Google, lui, l’a immé­dia­te­ment perçue, avec un poids réduit de moitié, et un temps de char­ge­ment réduit d’un tiers. Et mon serveur appré­cie lui aussi de n’avoir « que » 79 requêtes à lancer contre 120 aupa­ra­vant.

Passons aux tests GTMetrix :

Test GTMetrix - Page créée avec Elementor
Test GTMetrix – Page créée avec Elementor
Test GTMetrix - Page créée avec Gutenberg
Test GTMetrix – Page créée avec Gutenberg

On retrouve les mêmes ratios à défaut d’avoir des mesures aussi élogieuses. Entre ces deux outils de test, je n’ai jamais le même score, jamais les mêmes temps de char­ge­ment, jamais le même poids, jamais le même nombre de requêtes.

Mais la compa­rai­son va dans le même sens, et c’est l’es­sen­tiel.

Alors, quel construc­teur de page choi­sir ?

Gutenberg vs Elementor – la synthèse

En fait, il n’y a pas de réponse toute faite et univer­selle. Tout dépend. De votre besoin, de vos habi­tudes, de votre budget…

Mais Gutenberg gagne à être essayé. Il ne peut pas tout faire, d’ailleurs à mon grand dam il ne fera proba­ble­ment jamais le café – mais ce n’est pas ce qu’on lui demande.

Posez-vous la ques­tion : de quoi ai-je besoin ? Y a‑t-il un bloc Gutenberg qui me permette d’at­teindre mon but ?

La biblio­thèque de blocs ne cesse de s’en­ri­chir, alors peut-être que oui, le bloc dont vous avez besoin est déjà dans le dépôt WordPress. Et c’est l’oc­ca­sion de tester Gutenberg en tant que construc­teur de page…

Et vous, utilisez-vous Gutenberg pour construire vos pages ? Si vous voulez parta­ger votre propre expé­rience, ou votre point de vue, la discus­sion conti­nue dans les commen­taires !

Si vous avez trouvé une faute d’orthographe, veuillez nous en infor­mer en sélec­tion­nant le texte en ques­tion et en appuyant sur Ctrl + Entrée .

À quel point cet article était-il inté­res­sant ?

Cliquez sur une étoile pour évaluer !

Note moyenne / 5. Nombre de notes :

Pas encore de note… Soyez le premier à évaluer cet article !

Vous avez trouvé cet article inté­res­sant…

Suivez-moi sur les réseaux sociaux !

Cet article ne vous a pas inté­ressé, J’en suis désolé.

Dites-moi comment amélio­rer cet article

Aidez-moi à amélio­rer cet article !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Abonnez-vous à la
newsletter

Pour être informé à chaque fois qu'un nouvel article est publié.

Merci !

Quelque chose s'est mal passé…

Retour haut de page
Enable Notifications    Ok No thanks

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :