Pour commencer, on vous expliquera tout sur le pourquoi du comment derri\u00e8re ce choix. En prime, quelques \u00e9l\u00e9ments de r\u00e9flexion pour savoir si Gutenberg peut \u00eatre la bonne solution pour vous aussi. <\/p>
Ensuite, petit aper\u00e7u des avantages que nous appr\u00e9cions le plus. Nous vous expliquerons aussi pourquoi ils pourraient bien vous \u00eatre utiles.<\/p>
Enfin, on vous montre comment nous avons am\u00e9lior\u00e9 la performance du site gr\u00e2ce \u00e0 Gutenberg. H\u00e2te de tout savoir ? C\u2019est parti !<\/p>
Pourquoi avoir choisi Gutenberg et comment tout s\u2019est pass\u00e9<\/h2>
En janvier, notre site a fait peau neuve<\/a>, un changement destin\u00e9 \u00e0 mieux informer nos lecteurs sur les sujets de performance web et am\u00e9liorer l’exp\u00e9rience utilisateur et client. Il \u00e9tait \u00e9galement temps de proc\u00e9der \u00e0 un autre changement de taille : notre \u00e9diteur.<\/p> Jusqu’\u00e0 pr\u00e9sent, notre site web avait \u00e9t\u00e9 con\u00e7u par des d\u00e9veloppeurs pour des d\u00e9veloppeurs et nous utilisions un \u00e9diteur classique. Cela voulait notamment dire qu\u2019\u00e0 chaque fois que l’\u00e9quipe marketing avait besoin de cr\u00e9er une nouvelle page ou mettre \u00e0 jour du contenu, c’\u00e9tait un vrai calvaire.<\/p> C\u2019est sans compter que les choses peuvent rapidement devenir d\u00e9pass\u00e9es au sein d\u2019environnements en \u00e9volution permanente comme celui de l\u2019\u00e9cosyst\u00e8me WordPress. Nous avions donc besoin d\u2019\u00eatre plus r\u00e9actifs.<\/p> On a commenc\u00e9 par r\u00e9fl\u00e9chir \u00e0 nos besoins en termes de marketing, de design et de d\u00e9veloppement.<\/p> D\u2019abord, nous voulions une solution simple et facile qui nous assure \u00e9galement fiabilit\u00e9 et r\u00e9sultats.<\/p> L’autre exigence \u00e9tait que l’\u00e9quipe marketing puisse g\u00e9rer la mise \u00e0 jour du contenu ou la cr\u00e9ation de nouvelles pages de mani\u00e8re ind\u00e9pendante. Nous voulions leur faciliter la t\u00e2che autant que possible, sans avoir besoin de connaissances en d\u00e9veloppement.<\/p> Il nous fallait donc un back-end qui nous permette de g\u00e9rer chaque type de page, avec des r\u00e8gles de design bien pr\u00e9cises. En d\u2019autres termes, le design se devait d\u2019\u00eatre clair et coh\u00e9rent d\u2019une page \u00e0 l\u2019autre pour permettre \u00e0 notre \u00e9quipe de reproduire ces m\u00eames r\u00e8gles au moment de cr\u00e9er des nouvelles pages. <\/p> En termes de d\u00e9veloppement, nous avons aussi essay\u00e9 de penser au travail de d\u00e9veloppement du site au moment de valider les maquettes. Nous voulions minimiser le nombre de blocs personnalis\u00e9s \u00e0 cr\u00e9er.<\/p> Par exemple, si nous cr\u00e9ons une section sp\u00e9cifique avec un fond, une image et une description, nous essayons de r\u00e9utiliser ce m\u00eame design sur d’autres pages o\u00f9 le contenu peut \u00eatre affich\u00e9 de la m\u00eame mani\u00e8re.<\/p> \u00c0 ce stade, nous n’avions pas encore pris de d\u00e9cision concernant l’\u00e9diteur.<\/p> Une fois nous \u00eatre mis d\u2019accord sur le design et le d\u00e9veloppement, nous avons regard\u00e9 d\u2019un peu plus pr\u00e8s notre envie d\u2019avoir une \u00e9quipe marketing ind\u00e9pendante. Deux options se sont alors offertes \u00e0 nous : Gutenberg ou le plugin Advanced Custom Fields.<\/p> Nous avions pas mal d\u2019inqui\u00e9tudes \u00e0 propos de Gutenberg : aucune exp\u00e9rience pr\u00e9alable du d\u00e9veloppement de blocs personnalis\u00e9s Gutenberg, et certains articles que nous lisions \u00e9taient plut\u00f4t d\u00e9courageants. L\u2019\u00e9diteur semblait assez difficile \u00e0 utiliser, et il nous fallait trouver un \u00e9quilibre entre potentiel de performance et efficacit\u00e9 au quotidien.<\/p> Nous avons surmont\u00e9 nos inqui\u00e9tudes en parlant \u00e0 des experts, en posant des questions et en faisant nos propres recherches de notre c\u00f4t\u00e9. <\/p> Le tournant a v\u00e9ritablement eu lieu lorsque nous avons discut\u00e9 avec notre agence web, Whodunit<\/a>. Ils nous ont expliqu\u00e9 \u00e0 quel point Gutenberg \u00e9tait visuel et c\u2019est vrai que c\u2019est un atout majeur. Depuis le back-end, il \u00e9tait possible de voir exactement \u00e0 quoi ressemblerait une page ! Comme vous le savez, c’\u00e9tait tout \u00e0 fait le genre de solution simple que nous recherchions. <\/p> Nous avons aussi appr\u00e9ci\u00e9 l’id\u00e9e que Gutenberg soit un peu comme une pile de Lego que nous pouvions assembler comme nous le souhaitions – lisez le paragraphe suivant pour savoir exactement ce que nous entendons par l\u00e0. <\/p> En plus de tout cela, l’utilisation de Gutenberg pr\u00e9sentait un avantage en termes de performance – une autre exigence essentielle pour nous.<\/p> Gutenberg s\u2019est rapidement impos\u00e9 comme une \u00e9vidence. <\/p> Vous vous demandez peut-\u00eatre si certaines de nos inqui\u00e9tudes concernant Gutenberg se sont r\u00e9v\u00e9l\u00e9es vraies.<\/p> On ne vous mentira pas : il y a eu beaucoup de travail pour mettre sur pied le design. Et l’\u00e9quipe de d\u00e9veloppement a \u00e9galement \u00e9t\u00e9 tr\u00e8s impliqu\u00e9e.<\/p> La premi\u00e8re chose qui fait de notre site un projet unique en son genre est le nombre (\u00e9lev\u00e9 !) de blocs personnalis\u00e9s.<\/p> Le design en lui-m\u00eame n\u2019a pas \u00e9t\u00e9 con\u00e7u sp\u00e9cifiquement pour Gutenberg. Souvenez-vous : quand nous avons commenc\u00e9 \u00e0 travailler sur notre nouveau site web, nous ne savions m\u00eame pas que nous allions utiliser cet \u00e9diteur. Par cons\u00e9quent, nous avons utilis\u00e9 plein de templates diff\u00e9rents et de nombreuses fa\u00e7ons d’organiser notre contenu. Au total, nous avons donc d\u00fb cr\u00e9er 24 blocs, ce qui est loin d\u2019\u00eatre la moyenne. <\/p> Le nombre de blocs varie d\u2019un projet \u00e0 un autre. Il se peut que vous n’en ayez besoin que de quelques-uns.<\/p> En plus de cela, notre exigence en mati\u00e8re de performance a \u00e9t\u00e9 un peu casse-t\u00eate pour les d\u00e9veloppeurs ! Par rapport au client moyen, nos attentes \u00e9taient assez \u00e9lev\u00e9es. Nous voulions le site web le plus performant possible. Apr\u00e8s tout, c\u2019est bien un plugin d\u2019optimisation de la performance que nous vendons, pas vrai ?<\/p> Voici donc quelques conseils qu\u2019on partage avec vous apr\u00e8s cette exp\u00e9rience :<\/p> Comme vous pouvez le constater, le passage \u00e0 Gutenberg n\u2019a pas \u00e9t\u00e9 une mince affaire. Vous vous posez peut-\u00eatre la question suivante : Gutenberg serait-il aussi la meilleure option pour mon site ?<\/p> Pour vous r\u00e9pondre, nous avons directement demand\u00e9 \u00e0 notre agence web pourquoi il serait judicieux de passer \u00e0 Gutenberg. Voici les trois raisons principales : <\/p> Alors, c\u2019est parti pour Gutenberg ? Pas si vite.<\/p> Si un th\u00e8me gratuit vous convient tel quel, alors cette solution est parfaite. Vous pourrez mettre tous les blocs que vous voulez, profiter de Gutenberg et rejoindre le futur de WordPress !<\/p> Maintenant, si vous envisagez un design sp\u00e9cifique et des blocs personnalis\u00e9s, vous aurez besoin d’un d\u00e9veloppeur pour vous aider avec la mise en page. Cela ne vous prendra probablement pas autant de temps qu’il nous en a fallu mais cela rendra le d\u00e9veloppement de votre nouveau site plus long et plus co\u00fbteux. Soyez \u00e9galement conscient de l\u2019apprentissage qui vous attend !<\/p> Derni\u00e8re question : qui donc devrait se lancer avec Gutenberg ?<\/p> Si vous \u00eates freelance, ind\u00e9pendant ou \u00e0 la t\u00eate d\u2019une petite entreprise, vous pouvez toujours vous contenter d’un Constructeur de Page (Page Builder) qui ne n\u00e9cessite ni d\u00e9veloppement ni frais suppl\u00e9mentaires. Gardez tout de m\u00eame \u00e0 l’esprit que Gutenberg pourrait \u00eatre la bonne option pour vous. Relisez les principales raisons cit\u00e9es ci-dessus et faites votre propre choix.<\/p> Si vous dirigez une plus grande entreprise et avez besoin d’un d\u00e9veloppement sp\u00e9cifique, alors oui, Gutenberg est la solution pour vous, sans h\u00e9sitation.<\/p> Toujours pas d\u00e9cid\u00e9 ? Continuez \u00e0 lire.<\/p> Passer d\u2019un \u00e9diteur classique \u00e0 Gutenberg s’est fait sans effort pour l’\u00e9quipe marketing. Certaines fonctionnalit\u00e9s ont d\u2019ailleurs rendu notre travail plus facile et plus rapide. En d’autres termes, nous avons atteint l’objectif que nous avions en t\u00eate depuis le tout d\u00e9but de l’aventure ! <\/p> Voyons ensemble les fonctionnalit\u00e9s que nous appr\u00e9cions le plus.<\/p> La premi\u00e8re chose \u00e0 savoir est que le back-end est presque le m\u00eame que le front-end. Une fois connect\u00e9, vous pourrez naviguer sur le site et apporter des modifications \u00e0 la page en cliquant simplement sur \u00ab\u00a0Modifier la page\u00a0\u00bb.<\/p> Vous pouvez facilement mettre \u00e0 jour une page ou une section sp\u00e9cifique et voir rapidement \u00e0 quoi ressemble le changement depuis le back-end. <\/p> Cela rend les choses tr\u00e8s faciles pour tout le monde.<\/p> <\/p> Gutenberg fournit une biblioth\u00e8que de blocs qui sont des \u00e9l\u00e9ments pr\u00e9-construits. Chaque bloc peut \u00eatre personnalis\u00e9 et \u00e9dit\u00e9, puis ajout\u00e9 \u00e0 n’importe quelle page.<\/p> Comme vous l’avez lu dans la section pr\u00e9c\u00e9dente, c’est vraiment la partie design qui demande le plus d’efforts. Une fois termin\u00e9e, vous pourrez profiter des blocs personnalis\u00e9s \u00e0 votre guise. <\/p> Gr\u00e2ce aux blocs, la cr\u00e9ation de nouvelles pages ou la modification d’\u00e9l\u00e9ments dans des pages existantes devient simple comme bonjour. Plus besoin de passer par un nouveau design : vous n’aurez besoin que de vos blocs personnalis\u00e9s. <\/p> <\/p> Parlons bien, parlons pratique : disons que vous avez un bloc personnalis\u00e9 pour vos CTA. Il est fort probable que vous souhaitiez l’utiliser sur plusieurs pages. Gr\u00e2ce \u00e0 ces blocs, vous pouvez facilement inclure les CTA o\u00f9 vous le souhaitez. Vous conserverez le m\u00eame design et pourrez modifier le contenu tr\u00e8s facilement.<\/p> <\/p> Vous vous rendez compte maintenant du temps que vous allez gagner ?<\/p> Il est tout \u00e0 fait possible de cr\u00e9er des blocs r\u00e9utilisables : sauvegardez un bloc personnalis\u00e9 avec du contenu ou une image sp\u00e9cifique que vous utiliserez \u00e0 nouveau. <\/p> Prenons l’exemple pr\u00e9c\u00e9dent du CTA. Si vous souhaitez modifier un CTA, vous pouvez facilement le mettre \u00e0 jour une fois, et le changement sera appliqu\u00e9 \u00e0 l’ensemble du site. Il en va de m\u00eame si vous avez un site web multilingue. Vous modifiez le CTA une fois pour chaque langue, et vous avez fini. <\/p> De plus, vous pouvez \u00e9galement cr\u00e9er des mod\u00e8les, c\u2019est-\u00e0-dire une combinaison particuli\u00e8re de blocs.<\/p> Vous vous souvenez quand nous avons mentionn\u00e9 les Lego ? De la m\u00eame mani\u00e8re, vous pouvez jouer avec les blocs que vous cr\u00e9ez : des formes, des ic\u00f4nes, du contenu, et plus encore. Gr\u00e2ce \u00e0 cela, vous pouvez cr\u00e9er de nouvelles pages en utilisant les blocs personnalis\u00e9s que vous avez cr\u00e9\u00e9s pr\u00e9c\u00e9demment.<\/p> Voici tous nos blocs r\u00e9utilisables :<\/p> <\/p> Gutenberg est \u00e9galement tr\u00e8s bien ficel\u00e9 lorsqu\u2019il s\u2019agit de cr\u00e9er de nouvelles landing pages (pages d’atterrissage en fran\u00e7ais). Les landing pages sont indispensables pour le r\u00e9f\u00e9rencement et toutes les campagnes marketing. Pourtant, toute \u00e9quipe marketing vous dira combien il est fastidieux et parfois p\u00e9nible d\u2019en cr\u00e9er de nouvelles. <\/p> Aujourd\u2019hui, cr\u00e9er rapidement de nouvelles pages, avec le contenu qu\u2019il nous faut, le design que nous voulons, et le tout sans effort est tout simplement incroyable.<\/p> Et une fois de plus, la mise \u00e0 jour du contenu est plus facile que jamais – quelles que soient les modifications \u00e0 apporter. <\/p> Vous comprenez maintenant pourquoi nous sommes ravis de notre passage \u00e0 Gutenberg ? <\/p> Et ce n\u2019est pas fini, il nous faut encore aborder la question de la performance !<\/p> En tant que plugin de mise en cache qui s’efforce d’am\u00e9liorer le temps de chargement des sites WordPress, vous vous doutez que la probl\u00e9matique de la performance est au c\u0153ur de notre propre site. <\/p> \u00c0 nos yeux, Gutenberg est l’outil qui r\u00e9pond le mieux \u00e0 la probl\u00e9matique de performance. Nous allons d\u00e9tailler en deux points cl\u00e9s comment Gutenberg peut aider \u00e0 obtenir un site web plus performant.<\/p> Afin d\u2019\u00e9viter toute ambigu\u00eft\u00e9, nous n\u2019\u00e9mettons aucun avis n\u00e9gatif sur les solutions alternatives \u00e0 Gutenberg telles que les Page Builders. Nous avons simplement trouv\u00e9 Gutenberg plus facile \u00e0 ma\u00eetriser pour les performances de notre site.<\/p> La structure HTML g\u00e9n\u00e9r\u00e9e par Gutenberg est r\u00e9duite au minimum. C\u2019est-\u00e0-dire que Gutenberg produit peu de <div>. C\u2019est un point important qui permet de contr\u00f4ler le \u00ab Travail du Thread Principal<\/a> \u00bb, et donc d\u2019am\u00e9liorer le temps de processus de rendu du navigateur.<\/p> Le fait que Gutenberg g\u00e9n\u00e8re peu de code permet de s\u2019assurer que la recommandation \u00ab \u00c9vitez une taille excessive de DOM<\/a> \u00bb de PageSpeed Insight soit ma\u00eetris\u00e9e.<\/p>Commen\u00e7ons par le commencement : nos besoins <\/h2>
La suite : il est venu le temps de choisir <\/h3>
Une d\u00e9cision un peu particuli\u00e8re<\/h3>
Gutenberg et vous : une bonne id\u00e9e ?<\/h3>
Quels sont les avantages de Gutenberg ?<\/h2>
Mise \u00e0 jour du contenu : front-end ou back-end ?<\/h3>
Blocs personnalis\u00e9s<\/h3>
Blocs et mod\u00e8les r\u00e9utilisables<\/h3>
Landing pages<\/h3>
![](\"https:\/\/lh6.googleusercontent.com\/yGVaBt-39nRkyt0SXiA1GsYQL9by33aeibwmPBnFgCVUK3xzbyG3PDwX8jl7RDBtLjGMPmUlBCn5TMzCBW3GhVQhW1ndJfQ8Rk0FX1IKW2azJ9zoPullTF2ArZQWCbljE8k-Zt0A\")
Comment nous avons am\u00e9lior\u00e9 notre performance
<\/h2>Un code HTML l\u00e9ger<\/h3>
![\"\"\/](\"https:\/\/lh3.googleusercontent.com\/B7QwoQIxy67W6hculq3f1459nMBpr-Njjaen8ap2trI_i2u6Ui1p3D7revOe8EJi_L7B2pwHgXv2z_ZUr04uwVmhue5gaYiKKxfH0johUXQoaOfNRc9yw43o-iIdMN-AUML08oSP\")
![\"\"\/](\"https:\/\/lh5.googleusercontent.com\/LX5tXII726XhbTLCjGdMWe3LDUAY7adgf2QZ8tqqHfLwmn4dAVsC1L8j_vi0ni_F9FvEr6p7GiY8_FXHJV3eLsFUyWGGoH7oXzxBVSgCzUD4-WzG0izcLUUfWXnS4CAvHgJAi_mn\")
![\"\"\/](\"https:\/\/lh4.googleusercontent.com\/D0vjdeW56nxo83Ui-pW5VHQPeADEMo9UeH1__Y8dRxp4eM6cdDDt5awncBzMjhSt33UNXWfwCakcXi1McrJU0xqqoFdtp8prgSvpUBHHc7pTPxZKg8qDIsQWvAdzF-MaESGqDkKZ\")
![\"\"\/](\"https:\/\/lh3.googleusercontent.com\/FlGv63Zg7lhyMiKCudzWIpR05lbGOKKZhx-m1jF-w2Asut5CRfFYzxbp6MJf_OE_s8hUdeC1F_DKAmRoVbIjGU98eDVzf-msWUZcS-GBLBCXw0risxC5R-rAHcoX3yHzsb2LT7Zx\")
![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/WdvPHIcN7ChS2IXt_k38Gn87MIryDiP5wLWcIPlgYKuS0-_NMYugKNkBtmWmYr16N-3DysWrMHfhwGdIXOVgFA3WDdTBSmJiMiQBi4IVg-4YG6qY391oj70pYQrKHjuPFAv9UtGF\")
![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/03\/gutenberg-js-enqueue.png\")
<\/figure>