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

Capture d’écran du score PageSpeed ​​Insights

Capture d'écran du score de performance de la vitesse de la page de 97 sur 100

L’édition dans Gutenberg est plus facile

L’objectif de Gutenberg était constamment de créer une interface d’édition qui permettrait aux éditeurs de tous niveaux de difficulté de publier plus facilement des sites Web.

La publicité

Lisez ci-dessous

En créant une interface utilisateur intuitive, la barrière à l’entrée est abaissée, presque tout le monde peut facilement créer une présence sur le Web et, mieux encore, les créateurs de contenu peuvent toujours se concentrer sur la création de contenu au lieu de se soucier du code.

Selon le site WordPress officiel de Gutenberg::

« Sans être un développeur expérimenté, vous pouvez créer vos propres publications et pages personnalisées. »

Le site des développeurs WordPress expose la vision de Gutenberg comme ça:

«Gutenberg transforme l’éditeur en un outil qui permet aux utilisateurs d’écrire de nombreux articles et de créer de superbes mises en page en quelques clics, sans avoir besoin de connaissances techniques. WordPress devient un outil de contenu puissant et flexible accessible à tous. « 

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

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

Selon WP Rocket:

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

La publicité

Lisez ci-dessous

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

Capture d'écran du score de performance de la vitesse de la page de 98 sur 100

Construire avec Gutenberg Amélioration des performances

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

Il y avait deux raisons pour lesquelles les pages créées avec Gutenberg se comportaient exceptionnellement bien dans WP Rocket:

  1. HTML plus léger (installé à Gutenberg)
  2. CSS et JavaScript à la demande (pas de fonction Gutenberg)

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

D’autre part, 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 pour automatiser le CSS à la demande.

Gutenberg est conçu pour charger tout le CSS requis 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

Pour être honnête, j’étais un peu étonné que WP Rocket ait fait tapis sur Gutenberg. La raison de mon étonnement est que Gutenberg n’est pas encore tout à fait terminé.

La révision complète du site Web ne sera introduite qu’en juin 2021. Pourtant, WP Rocket a constaté que la refonte de l’ensemble du site Web avec Gutenberg était le bon choix.

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

Entretien avec WP Rocket

Fusée Gutenberg WP

L’équipe de développement a-t-elle fait face à des défis et avait-elle besoin de trouver des solutions de contournement pour les résoudre?

La publicité

Lisez ci-dessous

« Oui!

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

La courbe d’apprentissage était bien sûr assez raide.

Pour les détails: en tant que plugin de mise en cache, l’un de nos principaux problèmes de développement était le besoin de performances. À cet égard, Gutenberg a un inconvénient: la feuille de style standard contient le CSS de tous les blocs natifs.

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

Dans notre cas, nous avons jeté plusieurs blocs qui n’étaient pas utilisés. Nous avons créé un système de mise en file d’attente personnalisé qui ne bloque CSS et JS 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 réellement requis dans notre propre feuille de style, dans un fichier CSS dédié. Ça a marché. »

La publicité

Lisez ci-dessous

Gutenberg se sent-il complet et prêt pour les installations de production?

«Eh bien, nous avons réussi à construire notre site avec Gutenberg (mis à part l’en-tête et le pied de page). Je pense que cela dit quelque chose sur la façon dont Gutenberg s’est avéré et à quel point il est prêt.

Avec le Edition complète du site prévue pour juin 2021Je crois que tous les éléments d’un site peuvent être manipulés avec des blocs Gutenberg. « 

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

« Absolument. Et je pense que ce sera particulièrement le cas pour ceux qui sont habitués aux constructeurs de pages visuelles.

Même ainsi, nous avons été agréablement surpris de voir à quel point Gutenberg est visuel. Le back-end offre un excellent aperçu du front-end, ce qui signifie qu’il est facile, même pour un non-technicien comme moi, d’apporter des modifications à une page ou de créer de nouvelles pages à partir de zéro. « 

Compte tenu des connaissances que vous avez désormais tirées de votre expérience, quels conseils donneriez-vous à ceux qui envisagent de rejoindre Gutenberg?

« Fais le!

Nos deux principaux points à retenir étaient les suivants:

La publicité

Lisez ci-dessous

  1. Travaillez sur votre nouvelle conception Web en pensant à Gutenberg. Vous gagnez beaucoup de temps et êtes finalement plus efficace. (Nous ne l’avons pas fait car nous avons commencé à concevoir sans choisir l’éditeur …)
  2. Réfléchissez bien au nombre de blocs dont vous aurez besoin pour 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 développé plus de 20 blocs personnalisés, ce qui est loin de la moyenne. Vous n’en aurez peut-être besoin que de quelques-uns).

Quelles sont les principales considérations à prendre en compte avant de déménager à Gutenberg?

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

Si vous êtes d’accord avec un thème gratuit tel qu’il est, 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 et des blocs spécifiques, vous avez besoin d’un développeur pour vous aider avec la mise en page. Vous n’aurez probablement pas besoin d’autant de temps que nous.

Même dans ce cas, le développement de votre nouveau site Web prendra plus de temps et plus cher que d’habitude, car vous avez 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 des contributeurs travaillent pour l’améliorer.

Si vous choisissez une autre option, il y a un 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 et qu’il est gratuit et open source. « 

La publicité

Lisez ci-dessous

Quel type d’éditeur devrait réfléchir à deux fois avant de déménager à 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, un créateur de page qui ne nécessite pas l’aide d’un développeur ou des coûts supplémentaires peut convenir.

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

Trois inconvénients possibles

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

  1. Courbe d’apprentissage
    Mais cela fait partie de l’apprentissage de quelque chose de nouveau. Étant donné que Gutenberg est susceptible d’être 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 pour Gutenberg sont encore en construction. L’édition 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 des blocs qui ne sont pas utilisés. Cela peut entraîner des ballonnements inutiles.

WordPress Gutenberg est l’avenir

WP Rocket fait valoir un argument valable quand ils disent que Gutenberg est l’avenir. L’objectif est de permettre aux éditeurs de se concentrer moins sur le code que sur le contenu. La révision complète du site Web de Gutenberg est actuellement prévue pour juin 2021.

La publicité

Lisez ci-dessous

Avec l’ajout de WP Rocket à l’équipe, nous savons maintenant que Gutenberg a vraiment une interface utilisateur prometteuse pour l’édition et potentiellement aider à améliorer les performances du site Web.

Il peut être utile de créer une instance de bureau virtuel et de s’habituer à créer et publier un site avec Gutenberg d’ici juin 2021, afin d’être prêt à y accéder en cas de besoin, au moins le premier jour.

Citation

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

Pourquoi WP Rocket a choisi Gutenberg et comment les performances se sont améliorées





Source link

Recent Posts