Il y a de la nouveauté côté Hyvä avec les versions 1.3.6 et 1.3.7 du thème ! Ces dernières, en plus d’apporter des corrections de bugs et des améliorations générales, incluent des fonctionnalités clés pour améliorer la performance et apporter des réponses concrètes aux nouveaux enjeux posés par l’introduction courant mars de la nouvelle métrique Interaction to Next Paint (INP) par Google.
Des montées en version sont à prévoir pour les sites existants afin de bénéficier de ces nouvelles versions.
Voyons ensemble en détail les principales nouveautés de ces mises à jour !
Gestion de dépendances JS (1.3.6)
Sur Hyvä, chaque script est directement déclaré dans le template du composant correspondant. Cette approche peut générer des problèmes de duplication de scripts dès lors que le template est rendu plusieurs fois dans la même page (un item produit d’une page listing par exemple).
Pour pallier ce problème, il est désormais possible de déclarer une dépendance JS dans un block grâce à un nouveau ViewModel : PageJsDependencyRegistry
Ce dernier va permettre de rendre une dépendance JS une seule fois au niveau du before.body.end à l’aide d’un nom associé via les layouts .xml
Hyvä fournit également une nouvelle propriété hyva_js_template_dependencies permettant d’effectuer cette même tâche en passant uniquement par les layouts via un nœud <argument>.
hyva.activateScripts (1.3.6)
Cette nouvelle méthode de l’objet hyva se révèle particulièrement intéressante dès lors qu’il s’agit de mettre une partie de la page à jour à l’aide d’un call asynchrone retournant du flux HTML.
Dans le cas où cette portion de code comprend des balises <script>, activateScripts() se chargera de parser l’ensemble du markup, de récupérer toutes les balises de ce type et de les injecter dans la balise <head> du document afin que ces dernières soient initialisées par le navigateur.
Optimisations Javascripts (1.3.6)
Un grand nombre de scripts superflus a été supprimé, c’est le cas par exemple de la méthode initPriceBox() qui était dupliquée autant de fois qu’il y avait d’items produits dans une page listing (catégorie) ou encore des scripts associés aux composants Page Builder qui ne sont désormais chargés que lorsque le contenu correspondant est présent dans la page.
Certains calls AJAX inutiles ont également été retirés afin de réduire la charge serveur et améliorer l’expérience utilisateur. Citons, par exemple, les données utilisateur (customer data) qui ne sont désormais plus chargées par défaut lors d’une nouvelle visite.
Le plugin x-defer pour Alpine.js (1.3.7)
Cette nouvelle directive Alpine.js permet de soulager le thread principal du navigateur en différant l’initialisation des composants Alpine et ainsi améliorer le temps de chargement de la page. Elle vient principalement répondre aux enjeux posés par la nouvelle métrique Interaction to Next Paint (INP), déployée par Google courant mars, qui vise à remplacer la vieillissante First Input Delay (FID).
Pour utiliser x-defer, il suffit de l’ajouter au même niveau que le x-data du composant, quand c’est nécessaire, et lui assigner une des valeurs disponibles, à savoir :
- intersect : le composant Alpine est initialisé au scroll dès lors qu’il entre dans le viewport
- interact : le composant Alpine est initialisé dès lors que l’utilisateur interagit avec la page (au premier mouvement de la souris, au premier scroll, etc.)
- idle : le composant Alpine est initialisé après une durée spécifique déterminée via la configuration :
Hyvä Themes>General>Deffered Alpine.js Components>Defer until idle timeout - event : le composant Alpine est initialisé dès lors qu’un événement spécifique est lancé
Pour bénéficier de cette mise à jour sur des thèmes déjà existants, Hyvä a implémenté un mécanisme permettant d’appliquer cette nouvelle directive automatiquement à une série de composants sans intervention du développeur.
Pour ce faire, il suffit de mettre le module hyva-themes/magento2-theme-module à jour (1.3.7) et de le configurer via le back-office.
Pré-rendu de page avec les Speculation rules (1.3.7)
Cette nouvelle API implémentée par les navigateurs basés sur Chromium (Chrome et Edge) permet de précharger des pages de façon proactive sur certains événements utilisateur tels que le survol ou le click sur un lien.
L’avantage par rapport à son célèbre homologue <link rel="prerender"...> réside dans les règles de spéculations qu’il est possible de définir pour paramétrer les conditions de préchargement des pages de façon extrêmement fine. Il est ainsi possible de ne précharger que certaines pages, en partie ou en totalité et avec des niveaux de priorités spécifiques (immédiat, modéré, etc.).
Cette fonctionnalité améliore significativement la navigation utilisateur en offrant des temps de chargements de page quasi-instantanés. Elle aura également un impact positif non-négligeable sur les Core Web Vitals (CWV) de votre thème Hyvä.
Cette fonctionnalité encore expérimentale est désactivée par défaut, mais peut être activée via la configuration suivante : Hyvä Themes > Experimental > Experimental Features > Enable Preloading Speculation Rules.
Mais aussi…
- Compatibilité avec Magento 2.4.7
- Tailwind CSS 3.4.1 : cette nouvelle version apporte des améliorations, des corrections de bugs et des optimisations permettant de réduire le poids de la feuille de style.
- Node 16 : la montée en version de Tailwind CSS nécessitera l’utilisation de la version 16 de Node.js
- Prise en charge des paramètres vidéo : mise à jour du paramètre de l’option de galerie
loopVideo - Correctif de sécurité : pour plus de sécurité, une clé de formulaire est désormais requise pour le login d’un utilisateur via une requête AJAX.
- Corrections de bugs
- Nouvelles clés de traductions
Pour voir toutes les mises à jour des versions 1.3.6 et 1.3.7 de Hyvä, c’est ici 👇
L’Agence Dn’D, premier partenaire Gold de Hyvä en France, vous accompagne !
Les équipes Dn’D suivent de près les dernières actualités de Hyvä. Depuis 2021, nous avons formé nos développeurs en interne, développés de beaux projets basés sur Hyvä et contribué au code des modules communautaires. Parmi les clients que nous avons accompagnés sur la solution Hyvä, découvrez L’Atelier d’Amaya et La Cave du Château.
Retrouvez également nos articles de blog consacrés à Hyvä Themes, au gain de performance, à l’accessibilité ou encore à Hyvä Checkout.
Découvrez notre vidéo Back to the future of eCommerce, tournée avec Thien-Lan Weber
👇
Vous avez des questions sur le fonctionnement de Hyvä ? Un projet avec cette solution vous intéresse ?
Discutons-en ensemble ! 👇