Gutenberg — un constructeur de page en devenir ?

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’i­ma­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 sou­riez pas. Ne vous moquez pas. Surtout pas avant d’a­voir 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 sur­pris, elle res­semble à 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 pre­mières mou­tures, qui bien que pro­met­teuses, ne lais­saient pas for­cé­ment un arrière-goût pro­non­cé de progrès.

Le défi

Lors d’é­changes avec un irré­duc­tible Diviiste, j’ai affir­mé qu’il était pos­sible de construire un site unique et qui en jette en n’u­ti­li­sant que les fon­da­men­taux : WordPress et son nou­vel aco­lyte, Gutenberg.

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

J’ai affir­mé, en pre­nant pour exemple les star­ter tem­plates d’Astra, mais je n’a­vais pas per­son­nel­le­ment ten­té. Alors j’ai vou­lu 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’a­vez com­pris — je vou­lais un ren­du bien par­ti­cu­lier, et j’ai obte­nu mon ren­du, sans trop batailler et sans mettre les mains dans le cam­bouis code.

Le rendu

Il n’y a pas grande dif­fé­rence au niveau visuel, on retrouve les mêmes blocs, le même pla­ce­ment, avec quelques petits détails qui dif­fèrent — his­toire de ne pas avoir exac­te­ment le même rendu.

Les outils : Gutenberg et…

Bien évi­dem­ment, je ne vous ferai pas l’af­front de pré­tendre que je n’ai pas uti­li­sé 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 fabrication…

J’ai tout d’a­bord uti­li­sé Kadence Blocks, un add-on qui per­met 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 uti­li­sé l’en­semble des blocs dis­po­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émentaires 😉

Kadence blocks, ok. Mais j’ai uni­que­ment uti­li­sé le bloc Row Layout qui per­met d’ob­te­nir des « colonnes » fluides et res­pon­sives, et le bloc Testimonials dédié aux témoignages. 

Mais alors, quelle est l’ex­ten­sion magique qui donne à cette page un aspect si proche de ce que j’a­vais — non sans mal — obte­nu en uti­li­sant Elementor, et bien sûr, quelques blocs sup­plé­men­taires ? Tout sim­ple­ment Gutenberg Post Blocks.

Post Grid Gutenberg Blocks and WordPress Blog Plugin – PostX

Auteur(s) : Post Grid Team by WPXPO

Version actuelle : 4.1.11

Dernière mise à jour : 2 sep­tembre 2024

ultimate-post.4.1.11.zip

94%Évaluations 40 000+Installations WP 5.0+Nécessaire

Et hon­nê­te­ment, je me suis réga­lé à uti­li­ser cette exten­sion. Intuitive et puis­sante, elle a tout d’une grande — enten­dez d’une exten­sion pre­mium, payante. Tout en res­tant déses­pé­ré­ment gratuite 😉

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

Mais alors, pour­quoi avoir chan­gé ? Pour le plai­sir d’u­ti­li­ser Gutenberg ? Non ! La rai­son est toute simple, elle tient en trois mots : de meilleures per­for­mances.

Et pour vous en convaincre, voi­ci quelques tests réa­li­sés avant le chan­ge­ment de page d’ac­cueil. La nou­velle page a (pro­vi­soi­re­ment) pour URL https://tsw.ovh/accueil/ alors que l’an­cienne est tou­jours la page d’ac­cueil acces­sible via https://tsw.ovh/ (je sais ce n’est pas très clair, il faut suivre…).

Les tests

Commençons par les tests Pingdom Tools :

La dif­fé­rence, vous ne l’a­vez pas remar­quée visuel­le­ment, mais je suis cer­tain que Google, lui, l’a immé­dia­te­ment per­çue, avec un poids réduit de moi­tié, et un temps de char­ge­ment réduit d’un tiers. Et mon ser­veur appré­cie lui aus­si de n’a­voir « que » 79 requêtes à lan­cer contre 120 auparavant.

Passons aux tests GTMetrix :

On retrouve les mêmes ratios à défaut d’a­voir des mesures aus­si élo­gieuses. 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 com­pa­rai­son va dans le même sens, et c’est l’essentiel.

Alors, quel construc­teur de page choisir ?

Gutenberg vs Elementor — la synthèse

En fait, il n’y a pas de réponse toute faite et uni­ver­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 pro­ba­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 per­mette 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 tes­ter Gutenberg en tant que construc­teur de page…

Et vous, uti­li­sez-vous Gutenberg pour construire vos pages ? Si vous vou­lez par­ta­ger votre propre expé­rience, ou votre point de vue, la dis­cus­sion conti­nue dans les commentaires !