Êtes-vous prêt pour l’API View Transition ?
Lors de l’article précédent nous parlions de l’amélioration progressive, or l’ API Une API (Application Programming Interface) est un ensemble de règles permettant à différents logiciels de communiquer entre eux. Elle simplifie l'intégration et l'échange de données entre systèmes. View Transition en est un exemple très concret et applicable dès aujourd’hui. La promesse faite ici est que les transitions fluides entre les pages ou les vues de composants améliorent non seulement l’esthétique, mais aussi la perception de rapidité et de réactivité. C’est dans ce contexte que l’API View Transition a été introduite. Cette nouvelle API vise à faciliter la gestion des transitions d’état et des animations lors de la navigation entre différentes pages web, en particulier pour les applications multi-pages (MPAs).
L’API View Transition, à quoi ça sert ?
Les transitions de vue permettent d’effectuer une transition entre différentes vues au sein d’une application web. L’API View Transition se décompose de deux fonctions principales :
- Transitions de vue au sein d’un même document : Ces animations sont appliquées lorsqu’un utilisateur interagit avec la même page, par exemple dans une application à page unique ( SPA Une Single Page Application (SPA) est une application web qui charge une seule page HTML et met à jour dynamiquement son contenu en réponse aux interactions utilisateur, sans recharger entièrement la page. ).
- Transitions de vue entre documents distincts : Ces animations se déclenchent lors de la navigation entre deux pages distinctes, comme lorsqu’un utilisateur clique sur un lien pour charger une nouvelle page au sein du même site web (MPA), bref quand il change d’ url Une URL (Uniform Resource Locator) est l'adresse unique d'une ressource sur Internet, comme une page web, une image ou un fichier, permettant de la localiser et d'y accéder via un navigateur. .
Pourquoi c’est bien ?
Les transitions de vue offrent plusieurs bénéfices concrets pour l’ expérience utilisateur L'expérience utilisateur (UX) désigne la qualité de l'interaction d'un utilisateur avec un produit ou service, en termes de satisfaction, facilité d'utilisation et efficacité. et les performances perçues.
- Amélioration des performances perçues :
les applications multi-pages (MPAs) dont les sites web souffraient jusqu’à présent d’un manque de fluidité dans leurs transitions, chaque navigation entraînant un rechargement complet. Dès lors, une animation bien pensée peut masquer cette latence La latence est le délai entre l'envoi d'une requête et la réception d'une réponse. Elle est souvent utilisée pour mesurer le temps que met un réseau ou un système à réagir. et améliorer cette sensation de fluidité. - Expérience utilisateur améliorée :
les animations permettent de maintenir une continuité entre les pages et d’aider les utilisateurs à mieux comprendre la relation entre les contenus. - Offre une bonne alternative aux SPAs :
les transitions entre documents permettent d’obtenir une fluidité similaire aux SPAs, sans nécessiter un framework Un framework est un ensemble d'outils et de bibliothèques qui fournit une structure et des fonctionnalités préétablies pour développer des applications, simplifiant ainsi le travail des développeurs en offrant des solutions prêtes à l'emploi. JavaScript complexe. Une solution idéale pour des sites plus légers. - Navigateur optimisé :
il utilise l’accélération GPU et la synchronisation des images pour garantir des transitions fluides.
Comment l’API View Transition fonctionne ?
L’API View Transition repose sur le concept de vue persistante permettant de gérer le passage d’une page à une autre en conservant une continuité visuelle. Elle fonctionne en interceptant la navigation et en appliquant des animations personnalisées. Les différentes étapes d’une telle transition sont :
- Le navigateur capture un instantané de la page Html Le HTML (HyperText Markup Language) est le langage standard utilisé pour structurer et afficher le contenu sur le web. Il définit des éléments comme les titres, paragraphes, liens, images, et autres composants d'une page web. actuelle (ancienne), de manière similaire à une capture d’écran.
- La nouvelle page web est récupérée et rendue hors écran.
- Le navigateur capture un instantané de la nouvelle page.
- Le navigateur utilise des animations CSS Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en page des documents HTML, en définissant des styles comme les couleurs, polices, marges, et positionnements des éléments sur une page web. pour effectuer la transition entre les deux instantanés tout en reprenant le rendu.
Une simple règle CSS et c’est parti !
Les transitions de vue entre documents sont limitées aux pages de même origine, du même site. Pour les activer, il suffit d’ajouter la règle @view-transition dans le fichier CSS de votre site :
@view-transition {
navigation: auto;
}
Si votre site dispose d’un fichier style.css global, il est recommandé d’y inclure cette règle afin d’uniformiser les transitions sur toutes les pages (comme sur ce site).
Par défaut, un effet de fondu enchaîné est appliqué, permettant une transition douce et naturelle entre toutes les vues.
L’API View Transition : une corde de plus à l’arc CSS
Au-delà de cet effet de base, vous pouvez spécifier une transition pour un ou plusieurs éléments de la page actuelle vers un ou plusieurs éléments de la nouvelle page en utilisant le pseudo sélecteur ::view-transition-name.
Démonstration sur la bordure d’une navigation : voir sur https://moritzglantz.de/
Une fois nommé, vous disposez de toutes les options existantes en CSS : position, transformation, couleur de fond… Vous pouvez travailler à 2 niveaux
- directement sur les pseudo-selector notamment pour faire varier la durée de l’animation
- ou sur une animation @keyframes disposant d’une séquence rythmée selon votre créativité.
@view-transition {
navigation: auto;
}
.navigation {
view-transition-name: mynav;
}
::view-transition-old(mynav) {
animation: 500ms ease-out both slide-out;
}
::view-transition-new(mynav) {
animation: 500ms ease-out both slide-out;
}
@keyframes slide-out {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes slide-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
Cette solution a le mérite de reposer entièrement sur l’HTML et le CSS. Cette technologie web permet d’avoir un code propre qui profite de l’évolution des standards web.
Une API JavaScript complète
Bien que l’API View Transition permette d’activer des transitions en code CSS, elle propose également des méthodes JavaScript pour un contrôle plus précis.
- Dans le cas de transitions entre documents (MPAs), l’API met à disposition :
- Dans la page sortante : via la propriété pageswap de l’événement PageSwapEvent.viewTransition. L’événement pageswap est déclenché lorsque vous naviguez entre les documents et que le document précédent est sur le point d’être déchargé.
- Dans la page entrante : via la propriété pagereveal de l’événement PageRevealEvent.viewTransition. L’événement pagereveal est déclenché lorsqu’un document est rendu pour la première fois, soit lors du chargement d’un nouveau document à partir du réseau, soit lors de l’activation d’un document en cache Le cache est un espace de stockage temporaire qui conserve des données fréquemment utilisées pour accélérer leur accès ultérieur, réduisant ainsi les temps de chargement et la consommation de ressources. .
- Dans le cas de transitions entre vues (SPAs), l’API est utilisée via la méthode document.startViewTransition( callback Un callback est une fonction qui est passée en paramètre à une autre fonction et qui est appelée lorsque cette dernière a terminé son exécution, souvent pour gérer des opérations asynchrones. )
Elle fournit aussi les événements suivants :
- viewtransitionstart : déclenché au début d’une transition de vue.
- viewtransitionend : déclenché à la fin d’une transition de vue.
- viewtransitioncancel : déclenché si la transition est annulée avant son achèvement.
Que cela soit React, Vue. js JavaScript est un langage de programmation dynamique principalement utilisé pour ajouter des fonctionnalités interactives aux pages web. Il permet de manipuler le DOM, de gérer des événements, et d'effectuer des requêtes asynchrones. , Svelte ou autre framework, un changement d’état ou de statut pourra donc être “transitionné” avec cette API dans n’importe quel script.
Dans le cadre d’une MPA, on peut même envisager garder la continuité d’une lecture audio ou vidéo, en utilisant la méthode document.startViewTransition() pour coordonner l’animation avec une conservation d’un timestamp entre chaque navigation.
Compatibilité et disponibilité
La spécification API View Transition est au niveau 1 de la recommandation du W3C Le World Wide Web Consortium (W3C) est une organisation internationale qui développe des standards ouverts pour assurer la croissance à long terme du web, comme HTML, CSS, et XML. , en date du 5 septembre 2023.
Elle est compatible avec la plupart des navigateurs web récents. Mais il est important de vérifier sa disponibilité sur caniuse.com pour s’assurer de la prise en charge sur les navigateurs ciblés.
A ce jour, seul Firefox n’a pas encore implémenté son support, alors qu’iOS la supporte depuis décembre 2024.
Considérations relatives à la Web Performance
Il faut bien comprendre que cette API ne change en rien les performances brutes de chargement de vos pages ou vos composants. Mais je le répète elle permet d’améliorer significativement l’expérience utilisateur et les performances perçues, en améliorant la compréhension de la continuité entre les contenus.
Mais son emploi n’est pas magique. Ce n’est pas cette API qui va améliorer vos temps de chargement et la performance de vos pages web. Il a même été mesuré que son usage pourrait avoir dans certains cas une influence néfaste sur le LCP.
Pour que cette API soit pleinement fonctionnelle, il y a certaines contraintes à respecter. En effet, si la page met trop de temps à se charger ou si la connexion est instable, la transition peut se figer, s’arrêter voir ne pas s’exécuter du tout. Cela ne plante pas votre navigation mais l’effet recherché ne sera pas présent. Donc, il faut bien s’assurer que vos pages soient suffisamment performantes pour profiter de cette nouveauté.
Optimiser d’abord, animer ensuite
Avant d’implémenter l’API View Transition, assurez-vous que vos mesures de performances de votre site internet soient solides :
- Surveillez votre TTFB Le TTFB (Time to First Byte) est une métrique qui mesure le temps écoulé entre l'envoi d'une requête par un navigateur et la réception du premier octet de réponse du serveur, reflétant la réactivité du serveur. et FCP Le First Contentful Paint (FCP) mesure le temps nécessaire pour que le premier élément visible, comme du texte ou une image, apparaisse à l'écran, reflétant ainsi la vitesse de chargement perçue par l'utilisateur.
- Identifier et corriger les lacunes de mise en cache (et pourquoi pas avec MilleCheck.ai ?)
- Vérifiez les améliorations de performances sur tous les types de pages.
Ce n’est qu’alors que vous pourrez optimiser la navigation et améliorer votre site avec l’API View Transition, en créant cet équilibre parfait entre vitesse et retour visuel qui ravit les utilisateurs tout en maintenant des performances optimales. Le cas échéant faites appel à des experts.
Blocking render je t’aime ! Moi, non plus…
Du coup, on comprend mieux que lutter contre les ressources bloquant le rendu avant le FCP¨soit un point essentiel. Mais paradoxalement, pour stabiliser l’état de la page avant d’effectuer la transition, nous pouvons nous appuyer sur le blocage de rendu pour s’assurer que :
- Les styles critiques sont chargés et appliqués.
- Les scripts critiques sont chargés et exécutés.
- Le code HTML visible pour la vue initiale de la page par l’utilisateur a été analysé, de sorte qu’il s’affiche de manière cohérente.
Pour faire cela l’API View Transition a prévu un nouvel usage de l’élément link avec 3 attributs.
<link rel="expect" href="#lead-content" blocking="render" />
- L’attribut
rel="expect"indique que vous attendez un comportement spécifique d’un élément de la page. - L’attribut
href="#element-id"indique l’ID de l’élément que vous souhaitez voir restituer. - L’attribut
blocking="render"pour explicitement bloquer le rendu le temps de restituer l’élément spécifié avec href.
Bref, il faudra veiller à éliminer les ressources bloquant le rendu global de la page, tout en s’assurant que celles indispensables à vos transitions, elles, sont bien chargées… quitte à bloquer le rendu ! Une certaine subtilité qu’il va falloir appréhender avant de vous lancer.
Considérations relatives à l’accessibilité
Dans l’absolu, quel que soit le type d’animation, des transitions trop dynamiques peuvent affectées certaines personnes. C’est le cas des individus souffrant d’épilepsie photosensible ou de troubles vestibulaires.
A ce jour, les lecteurs d’écrans ne prennent pas en charge l’API View Transition.
En termes de bonnes pratiques, nous recommandons de respecter les préférences utilisateurs, notamment de ceux qui ont activé l’option « Réduire les animations » dans leur OS. Voici un exemple de code CSS pour désactiver les transitions dans ce cas.
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}
Mon avis sur l’API View Transition
En résumé, l’API View Transition ne va pas accélérer le chargement des pages de votre site avec un bout de CSS inséré dans le code, mais utilisée avec savoir-faire, elle va rendre l’affichage HTML plus fluide et s’approcher grandement de l’expérience d’une application native. Mais il faudra avoir des performances convenables au préalable.
Alors tout n’est pas parfait. Il existe plusieurs difficultés de rendu notamment sur les éléments fixed. Mais cela reste pour moi, une technologie Front-End Le front-end désigne la partie visible d'un site web ou d'une application avec laquelle l'utilisateur interagit directement. Il englobe l'interface utilisateur, le design, et les éléments interactifs, généralement créés avec HTML, CSS, et JavaScript. sous-évaluée par son côté clinquant dont nous n’avons pas encore exploité 10% du potentiel. Cela remet en cause la manière de gérer la navigation, le chargement des pages mais aussi l’UI, l’interface utilisateur notamment en responsive Le responsive design est une approche de conception web qui permet à un site de s'adapter automatiquement à différentes tailles d'écran (ordinateurs, tablettes, smartphones), offrant ainsi une expérience utilisateur optimale sur tous les appareils. design. En effet, cela créer un environnement où le passage d’une page web à une autre peut être autrement plus riche que celui que nous avons vécu jusqu’à aujourd’hui.
Et encore, je ne vous ai encore parlé de l’API Speculative Rules qui à mon avis avec les web transition view ressemblent en étant utilisé conjointement à un game changer. J’en attend beaucoup dans un avenir proche.
Source : debugbear.com
Visuel généré à partir d’une intelligence artificielle.
