Be API au WordCamp Europe 2022 à Porto

Porto décollage imminent!

Après deux reports successifs, Porto a finalement bien accueilli le WordCamp Europe ! L’évènement s’est déroulé sur trois jours du 2 au 4 juin et a rassemblé plus de 2300 personnes venues du monde entier (sans compter les personnes qui ont suivi l’événement en direct via la diffusion sur Youtube).

C’était une édition un peu spéciale puisqu’il s’agissait des 10 ans des WordCamp Europe !

Cette année encore le premier jour était dédié à la contribution au projet WordPress, avec 800 personnes qui ont répondu à l’appel, un record par rapport aux précédentes éditions.
Les deux jours suivants ont été rythmés par des conférences et les ateliers, préparés par 60 orateurs.

Conférences et ateliers marquants

Comme à chaque WordCamp, la qualité des conférenciers et les sujets abordés ont été au rendez-vous.
Nous avons pu en sortir quelques éléments forts relatés ci-après.

Block patterns et Full Site Editing

Parmi les sujets abordés, les Blocks patterns et le Full Site Editing étaient clairement à l’honneur cette année. Si la conférence sur les blocs patterns avait pour but de jouer sur l’aspect enthousiasmant de cette fonctionnalité, l’atelier sur la construction d’un thème FSE-ready nous a permis de mettre les mains dans le code et de mieux appréhender cette évolution de la création de thème WordPress ainsi les opportunités offertes par cette nouvelle approche.

The block pattern revolution (conférence)

Speaker : Sean Blakeley
Description : https://europe.wordcamp.org/2022/session/the-block-pattern-revolution/
Replay : https://youtu.be/91anxAgQGJw?t=8713 

Il n’y a rien de nouveau dans les blocks patterns (ou compositions) en 2022. Ils sont en effet présents depuis déjà 2 ans dans le cœur de WordPress, et le repository de patterns, qui permet de piocher dans une bibliothèque très fournie, est disponible depuis l’an dernier. 

Ce qui change, en réalité, c’est plutôt la vision que l’on peut avoir de cette fonctionnalité, il est vrai, un peu sous-estimée lors de sa sortie. Il faut dire que le FSE, et notamment la version 6.0 de WordPress, les a remis un peu sur le dessus de la pile.

1. Sean Blakeley rappelle que la création d’un pattern est très simple, très rapide, qu’elle peut désormais être faite par n’importe quel acteur du web, quel que soit son métier, et qu’il est très facile de les partager. Les blocs sont des Legos, les patterns sont des constructions : on prend et on fait ce qu’on veut.
2. Autre argument fort qui incite à l’utilisation des patterns : le webdesigner et le développeur ont désormais un langage commun. Le webdesigner n’est plus seul maître de la création de composants graphiques. Les patterns favorisent la collaboration des deux métiers et l’efficacité de celle-ci. En effet, grâce à la co-construction de patterns avec le webdesigner, le développeur peut facilement s’approprier les intentions graphiques du webdesigner et construire blocs et patterns en ce sens.
3. Enfin, les patterns donnent plus de sens à la montée en compétences du client, et à l’appropriation de son site. Dans le rapport avec le client, on passe alors de l’effet  « impressionnez-nous » (prestataire) à « collaborons ensemble ». Le client est ainsi plus naturellement embarqué dans le projet et impliqué dans la gestion de ses contenus.

Le sentiment au sortir de cette conférence : on a envie d’entamer un nouveau projet, de travailler avec tout le monde, tout de suite.

Build your first block theme (atelier)

Speaker : Daisy Olsen
Description : https://europe.wordcamp.org/2022/session/build-your-first-block-theme/ 
Replay : non disponible pour les ateliers

Le Full Site Editing (FSE) est très récent (fin 2021), il s’agit de la phase 2 du projet Gutenberg. Cette nouvelle évolution a une portée très importante sur notre façon de travailler avec WordPress puisqu’elle va modifier en profondeur la façon de créer, modifier, maintenir les thèmes.

A travers son atelier de 2h, Daisy Olsen nous a fait rentrer en douceur dans la création d’un thème FSE-ready en répondant simplement et par la pratique aux questions suivantes : 

Si cette nouvelle façon de travailler paraît tout d’abord assez déroutante (voire complexe), l’impression négative s’inverse complètement au bout d’1h. On commence alors à y voir plus clair et, en prenant un peu de recul, il devient beaucoup plus facile de se projeter sur la mise en place et l’utilisation concrète du FSE.

Ce que l’on retiendra, c’est qu’avec le FSE, tout est possible en termes d’édition dans le backoffice. C’est une bonne nouvelle mais c’est aussi un enjeu pour les agences. Cet enjeu va se situer très précisément sur le paramétrage (personnalisation, autorisations utilisateur, verrouillage de blocs/patterns) et spécifique de l’éditeur pour permettre aux contributeurs de contenus d’avoir une interface d’édition personnalisée, intuitive et efficace.

Tout comme Gutenberg à sa sortie, il va falloir s’approprier le FSE sur tous les pans d’un projet, mais nul doute qu’on finira par sortir réjoui de toute part, aussi bien techniquement (création de thème), qu’éditorialement (édition de contenus).

La performance

The real impact of having website performance as a mindset (conférence)

Speaker : Leo Postovoit
Description : https://europe.wordcamp.org/2022/session/migrating-wordpress-core-to-github-actions-a-retrospective/
Replay : https://youtu.be/0GiB99rkivI?t=4809

La conférence nous plonge directement dans le sujet : “Qu’est-ce que la performance en tant qu’état d’esprit et comment y accéder”.

La performance peut être vu sous différent angles. Côté technique, nous pouvons avoir la mesure du temps de chargement d’une page. Côté client nous pouvons avoir la mesure du nombre de clics sur une publicité, ou bien le taux d’abandon sur les formulaires/questionnaires.

Cette performance n’est pas figée dans le temps et va varier durant la vie d’un site. Il ne faut donc pas seulement récolter des mesures à un instant T, il faut aussi être capable de les conserver pour pouvoir les comparer. Dans une optique d’amélioration continue, il est nécessaire d’avoir un point de départ pour rendre notre action visible.

Aujourd’hui il est facile de récolter des mesures de performances grâce à plusieurs outils. Il est reconnu que les performances ont un impact direct sur les utilisateurs, par exemple une seconde de temps de chargement en plus a pour répercussion une augmentation du taux d’abandon sur un site de 26%.

Il faut bien noter que l’inverse est aussi valable, nos efforts sont récompensés. L’exemple a été donné avec “Australian Geographic”, leur contenu est de très bonne qualité, cependant la vitesse du site n’étant pas bonne, toutes les autres métriques sont influencées. L’optimisation du site a permis de faire : plus d’achats, plus d’abonnés, plus de vues de publicité etc. C’est un cercle vertueux, en améliorant les performances du site, l’ensemble des autres éléments du site ont été impactés.

Il y a 4 piliers de la performance WEB sur lesquels nous pouvons agir :

1. La vitesse des pages
2. L’expérience utilisateur
3. La conversion
4. La rétention

Le pilier le plus à notre portée et qui a des effets notables pour tout le monde est la vitesse de chargement des pages.
Elle peut être mesurée très facilement à l’aide d’outils comme :

• Pagespeed insights
• New Relic
• CalibreApp
• etc.

Le but est de mesurer souvent et dans des conditions réelles, la vitesse de notre site.
Ces données permettront alors par la suite de faire en sorte d’agir sur les points de difficultés le plus simplement possible.

Par exemple, si lorsque l’on visite son site des bannières, des popups, des encarts apparaissent, le score de CLS (cumulative layout shift) sera très mauvais et personne n’aura envie de continuer de naviguer sur le site. Google a publié un article concernant les effets de la web perf sur le business et on peut dire qu’un site rapide permet de retenir une personne sur son site plus longtemps.

Dans certains domaines, les personnes peuvent venir une dizaine de fois sur le site avant de prendre la décision d’acheter ou non un produit ou un service, si l’expérience est bonne alors le taux de conversion sera bon.

Un autre exemple a été donné avec la refonte pour l’événement du “Téléthon” Australien, où le taux de dons a augmenté de 30% en ayant de bonnes performances et en ayant une expérience utilisateur aux petits oignons.

Les autres piliers sont plus difficiles à mesurer car propres à chaque site. Mais réussir à ce que les visiteurs fassent ce que l’on voulait qu’ils fassent est une victoire. Les faire revenir sur le site, une autre. Avoir une page d’accueil pleine d’informations n’est pas forcément utile, découper l’information permet d’avoir des sites moins lourds et plus performants.

Ce que l’on retiendra c’est que mesurer la performance est un objectif long terme, agir pro-activement pour avoir la meilleure performance possible augmentera la satisfaction de vos visiteurs et votre ROI.

Optimization strategies for the Paint Web Vitals (atelier)

Speaker : Mike Crantea
Description : https://europe.wordcamp.org/2022/session/performance-optimization-strategies-for-improving-the-paint-web-vitals/
Replay : non disponible pour les ateliers

L’atelier était centré sur l’amélioration des performances d’une page web existante. Le conférencier présentait sa méthode pour agir sur les performance des pages directement depuis son navigateur à travers une fonctionnalité de Chrome bien pratique : Le remplacement.

Il est possible depuis Chrome d’activer la modification des pages reçues depuis la console. Le principe consiste à télécharger localement une page internet et nous permettre de modifier progressivement des éléments de celle-ci afin de mesurer les impacts sur la performance sans avoir accès au site web en question.

Durant l’atelier, nous avons pu simuler des conditions défavorables de chargement de page afin de mettre en exergue les problèmes de performance et lancer un test lighthouse en mode mobile :

1. Sur un motorola 4G et le viewport réduit
2. Sur une connexion de type 3G fast

Le résultat du test nous donne les core web vitals d’origine de la page web sans modification :

• FCP : indique le moment où le premier texte ou la première image sont affichés.
• TTI : correspond au temps nécessaire pour que la page devienne entièrement interactive.
• TBT : somme en millisecondes de toutes les périodes entre le First Contentful Paint et le Time to Interactive, lorsque la durée de la tâche a dépassé 50 ms.
• CLS : mesure le mouvement des éléments visibles dans la fenêtre d’affichage.
• LCP : indique le moment où le texte le plus long ou l’image la plus grande sont affichés

Dans notre test, nous avons pu identifier les points suivants :

1. Les styles bloquants
2. Les scripts bloquants
3. Les polices chargées
4. Les chaînes d’exécutions imbriquées
5. Le LCP qui ralentit la page

Une fois ces éléments isolés, nous avons amélioré progressivement les performances en :

• Préchargeant les polices, styles et scripts critiques dans les headers
• Préchargeant l’image principale en LCP du site
• Modifiant le chargement des styles secondaires en non bloquants
• Modifiant le chargement des scripts en defer
• Ajoutant des attributs de décodage des images pour le navigateur

Précharger les contenus permet d’indiquer au navigateur quelles sont les ressources dont il aura besoin avant même de les rencontrer. Le navigateurs peut commencer à télécharger ces ressources en parallèle du chargement de la page.

Ce que l’on peut retenir de cet atelier, c’est que le conférencier nous a proposé une méthode empirique avec Lighthouse. On teste, on détecte un élément bloquant, on essaye de le corriger, on teste à nouveau et on recommence. La web performance n’est pas une science exacte mais on peut rapidement avoir des résultats !

C’est une pratique que nous allons utiliser fortement lors de nos audits de performance à Be API afin de pouvoir présenter les optimisations sans attendre d’arriver en production pour mesurer les impacts.

Des sponsors, des organisateurs et des orateurs

Le WordCamp Europe ne peut avoir lieu sans la participation des sponsors, des organisateurs bénévoles et de l’ensemble des orateurs.

Ils permettent à l’ensemble de la communauté de se retrouver pour échanger sur notre outil commun WordPress.
Nous souhaitons les remercier grandement pour le travail fourni dans l’organisation de ces 3 jours de folie.

… et à l’année prochaine à Athènes

Nous espérons vous retrouver l’année prochaine du 8 au 10 Juin à Athènes pour l’édition 2023 du WordCamp Europe.