WordPress Gutenberg a amélioré les performances du site

L’éditeur de plugins 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 permettra aux éditeurs de tous niveaux de publier facilement des sites Web permet à presque tout le monde de créer facilement une présence sur le Web et de tous, cela 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 la page officielle de WordPress Gutenberg: « Sans être un développeur expert, vous pouvez créer vos propres articles et pages personnalisés. » La page des développeurs WordPress décrit la vision de Gutenberg comme suit: « Gutenberg remodèle 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 arrangé pour former une mise en page personnalisée. Cette volonté de permettre à quiconque de se concentrer facilement sur le contenu explique pourquoi le marketing L’équipe 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, mais 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 tout le CSS nécessaire 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 ait fait tapis 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 trouvé que la refonte de l’ensemble de son site Web avec Gutenberg était le bon choix.J’ai demandé à l’équipe WP Rocket pour 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 les détails: en tant que plugin de mise en cache., l’une de nos préoccupations majeures de développement était le besoin de performance. À cet égard, il existe un inconvénient 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. Le développement de ce système ne nous a pris que quelques minutes et 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 l’évolution de Gutenberg et son état de préparation. Avec l’édition complète du site prévue 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 sont habitués aux constructeurs de 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:Continuer la lecture ci-dessous

  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 avoir pris une décision sur l’éditeur…)
  2. Considérez attentivement le nombre de blocs dont vous avez besoin en fonction de votre entreprise. Demandez-vous 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 proposé 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 voulez un design 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 a fallu, mais 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 fait 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 il est 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 de développeur ou de frais supplémentaires. Si vous dirigez une plus grande entreprise. et ont besoin d’un développement spécifique – alors oui, Gutenberg est la bonne solution pour vous, sans plus d’hésitation.

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 qui en a pris une 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.

Citation

Pourquoi WP Rocket a choisi Gutenberg et comment les performances ont-elles été améliorées ?