WordPress Gutenberg a amélioré les performances du site

L’éditeur du plugin de mise en cache WordPress WP Rocket a repensé son site avec Gutenberg et amélioré les performances du site. Ils ont découvert que Gutenberg écrivait un code étonnamment léger, mais partageaient qu’il y avait quelques points à surveiller.

Capture d’écran du score PageSpeed ​​Insights

Le montage dans Gutenberg est plus facile

L’objectif de Gutenberg a toujours été de créer une interface d’édition qui facilitera la publication de sites Web pour les éditeurs de tous niveaux de compétence.

La création d’une interface intuitive réduit la barrière à l’entrée, permet à presque tout le monde de créer facilement une présence sur le Web et, mieux encore, elle aide les créateurs de contenu à rester concentrés sur la création de contenu au lieu de gérer et de se soucier du code.

Selon le page officielle WordPress Gutenberg:

“Sans être un développeur expert, vous pouvez créer vos propres publications et pages personnalisées.”

Example of the Title

Example description. Lorem Ipsum is simply dummy text of the printing and type..

La page des développeurs WordPress expose la vision de Gutenberg comme ça:

«Gutenberg transforme l’éditeur en un outil qui permet aux utilisateurs d’écrire des articles riches et de créer de belles mises en page en quelques clics – aucune connaissance technique n’est nécessaire. WordPress deviendra un outil de contenu puissant et flexible accessible à tous. »

L’éditeur utilise un concept appelé «blocs» qui peut être organisé pour former une mise en page personnalisée.

Cette volonté de permettre à quiconque de se concentrer facilement sur le contenu explique pourquoi l’équipe marketing de WP Rocket a immédiatement apprécié la nouvelle interface.

Selon WP Rocket:

«Le passage de l’éditeur classique à Gutenberg s’est déroulé sans effort pour l’équipe marketing. De plus, nous avons commencé à profiter de certaines fonctionnalités qui facilitent et accélèrent notre travail. »

Capture d’écran Score Insight de la page d’accueil

Construire avec Gutenberg Amélioration des performances

WP Rocket rapporte que la création d’un site avec Gutenberg a abouti à un site Web plus rapide et plus performant.

Il y avait deux raisons pour lesquelles les pages WP Rocket construites avec Gutenberg fonctionnaient exceptionnellement:

1. HTML plus léger (intégré à Gutenberg)
2. CSS et JavaScript à la demande (pas une fonctionnalité de Gutenberg)

Un code HTML plus léger est une fonctionnalité prête à l’emploi pour Gutenberg.

En revanche, le chargement de CSS inutiles est également une fonctionnalité intégrée de Gutenberg. Pour cette raison, WP Rocket a créé une solution de contournement afin d’automatiser le CSS à la demande.

Gutenberg est conçu pour charger tous les CSS nécessaires pour chaque bloc de style. Le premier défi a donc été de créer un moyen de charger automatiquement JavaScript et CSS et uniquement en cas de besoin.

Gutenberg est étonnamment robuste

Franchement, j’ai été un peu étonné que WP Rocket soit all-in sur Gutenberg. La raison de mon étonnement était que Gutenberg n’est pas entièrement terminé.

L’expérience d’édition complète du site ne devrait pas être déployée avant juin 2021. Pourtant, WP Rocket a constaté que la refonte de l’ensemble de son site Web avec Gutenberg était le bon choix.

J’ai demandé à l’équipe WP Rocket de partager leur expérience.

Entretien avec WP Rocket

L’équipe de développement a-t-elle fait face à des défis et a-t-elle dû trouver des solutions de contournement pour y faire face?

“Oui!

Tout d’abord, nous n’avions aucune expérience de développement avec les blocs personnalisés Gutenberg, et tout ce que nous avons lu sur le sujet était très décourageant au début.

Inutile de dire que la courbe d’apprentissage était assez raide.

Pour plus de détails: en tant que plugin de mise en cache, l’une de nos principales préoccupations en matière de développement était le besoin de performances. À cet égard, un inconvénient existe avec Gutenberg: la feuille de style par défaut contient tous les CSS des blocs natifs.

C’était un problème car le CSS inutilisé est chargé sur toutes les pages (et cela ne suit pas la recommandation «Suppression des ressources CSS inutilisées» PageSpeed ​​Insights).

Dans notre cas, nous avons déprécié plusieurs blocs qui n’étaient pas utilisés. Nous avons créé un système de mise en file d’attente personnalisé pour que le bloc CSS et JS ne soit chargé qu’en cas de besoin. Il ne nous a fallu que quelques minutes pour développer ce système.

Nous avons également décidé de ne pas utiliser le fichier CSS Gutenberg. Au lieu de cela, nous avons «migré» le CSS dont nous avions réellement besoin dans notre propre feuille de style, dans un fichier CSS dédié. Cela a fait l’affaire.

Gutenberg a-t-il l’impression d’être complet et prêt pour les sites de production?

«Eh bien, nous avons réussi à construire notre site avec Gutenberg (sauf l’en-tête et le pied de page). Je pense que cela en dit long sur la façon dont Gutenberg a évolué et sur son état de préparation.

Avec le Montage complet du site prévu en juin 2021, Je pense que l’on aura la possibilité de modifier tous les éléments d’un site à l’aide de blocs Gutenberg. »

Y a-t-il eu une courbe d’apprentissage pour l’utiliser?

“Absolument. Et je pense que ce sera le cas en particulier pour ceux qui ont l’habitude de créer des pages visuelles.

Cela dit, nous avons été agréablement surpris par le rendu visuel de Gutenberg. Le back-end donne un excellent aperçu du front-end, ce qui signifie que même pour les non-techniciens, comme moi, il est facile d’apporter des modifications à une page ou de créer de nouvelles pages à partir de zéro. »

Avec les connaissances acquises grâce à votre expérience, quels conseils donneriez-vous à ceux qui envisagent de passer à Gutenberg?

“Fonce!

Nos deux principaux points à retenir étaient les suivants:

1. Commencez à travailler sur votre nouvelle conception Web en pensant à Gutenberg. Cela vous fera gagner beaucoup de temps et vous finirez par être plus efficace. (Ce n’est pas quelque chose que nous avons fait parce que nous avons commencé le design sans nous être décidés à propos de l’éditeur…)
2. Considérez attentivement le nombre de blocs dont vous avez besoin en fonction de votre entreprise. Réfléchissez à la question de savoir si elles doivent toutes être personnalisées ou non. Les blocs font une réelle différence lors de l’utilisation de Gutenberg. (Nous avons créé plus de 20 blocs personnalisés, ce qui est loin de la moyenne. Vous pourriez avoir besoin de quelques blocs).

Quelles sont les principales considérations à prendre en compte avant de passer à Gutenberg?

«Gutenberg n’est pas nécessairement pour tout le monde.

Si vous êtes d’accord avec un thème gratuit tel quel, alors c’est génial. Vous pouvez créer tous les blocs que vous voulez et profiter de Gutenberg.

Cependant, si vous souhaitez une conception spécifique et des blocs spécifiques, vous aurez besoin d’un développeur pour vous aider avec la mise en page. Cela ne vous prendra probablement pas autant de temps qu’il nous en a fallu.

Néanmoins, cela rendra le développement de votre nouveau site Web plus long et plus coûteux que d’habitude, car vous aurez besoin d’aide. Vous devez également être conscient de la courbe d’apprentissage abrupte qui vous attend.

Cela dit, Gutenberg est vraiment au cœur de WordPress et, chaque jour, les contributeurs travaillent à l’améliorer.

Lorsque vous choisissez une autre option, vous courez le risque qu’elle ne soit pas mise à jour lorsque WordPress effectue un changement. De plus, il sera toujours plus facile de trouver quelqu’un pour vous aider avec un site WordPress construit avec Gutenberg.

Nous pensons que Gutenberg est l’avenir de WordPress, en plus d’être gratuit et open source. »

Quel type d’éditeur devrait réfléchir à deux fois avant de passer à Gutenberg?

«C’est quelque chose que nous mentionnons dans notre article de blog:

Si vous êtes un pigiste ou que vous dirigez une petite entreprise, vous pourriez toujours être d’accord avec un constructeur de pages qui ne nécessite aucune aide du développeur ni aucun coût supplémentaire.

Si vous dirigez une plus grande entreprise et avez besoin d’un développement spécifique, alors oui, Gutenberg est la bonne solution pour vous, sans plus d’hésitation. »

Trois inconvénients possibles

Si je comprends bien, il y a au moins trois inconvénients.

1. Courbe d’apprentissage
   Mais cela fait partie d’apprendre quelque chose de nouveau. Néanmoins, étant donné que Gutenberg est probablement l’avenir de WP, créer une instance de bureau avec laquelle jouer n’est peut-être pas une mauvaise chose.
2. Gutenberg est incomplet jusqu’en juin 2021
   Je pense que le menu de navigation et les zones de widgets sont toujours en construction pour Gutenberg. La publication complète du site n’est pas prévue avant juin 2021.
3. Charge tous les fichiers CSS et JS
   Apparemment, Gutenberg charge tout le style et le code JS sur chaque page, y compris le code pour les blocs qui ne sont pas utilisés. Cela peut donc provoquer des ballonnements inutiles.

WordPress Gutenberg est l’avenir

WP Rocket fait valoir un argument valable lorsqu’ils déclarent que Gutenberg est l’avenir. L’objectif est de permettre aux éditeurs de se concentrer moins sur le code et plus sur le contenu. L’édition complète du site de Gutenberg est actuellement prévue pour juin 2021.

Grâce à WP Rocket en prenant un pour l’équipe, nous savons maintenant que Gutenberg a vraiment une interface utilisateur d’édition prometteuse et peut aider à améliorer les performances du site.

Il peut être utile de créer une instance de bureau virtuel et de se familiariser avec la création et la publication d’un site à l’aide de Gutenberg d’ici juin 2021 afin d’être au moins prêt à y sauter le premier jour en cas de besoin.

Citation

Lisez l’article WP Rocket sur la refonte de leur site Web à l’aide de Gutenberg:

Pourquoi WP Rocket a choisi Gutenberg et comment ses performances ont été améliorées