Optimiser les performances web grâce au rendu par phase dans Adobe Experience Manager Sites
Les lenteurs de chargement, caractéristiques des pages web volumineuses, risquent de déplaire à celles et ceux qui visitent votre site et même de les faire fuir. Adobe Experience Manager Sites avec Edge Delivery Services est conçu pour maintenir des performances exceptionnelles en diffusant rapidement du contenu auprès des internautes.
Dans cet article, nous nous intéresserons à la technique de rendu par phase du système de gestion du contenu, qui charge le contenu web en trois phases et divise la charge utile de la page.
Pourquoi le rendu par phase est-il important ?
En plus d’améliorer l’expérience client, le rendu par phase contribue à optimiser la performance du site, mesurée par les scores Google Lighthouse et les Signaux Web Essentiels.
Avec le chargement de pages web par phase, il est plus facile d’afficher des scores Google Lighthouse et des Signaux Web Essentiels solides, dont les effets sont triples :
- Référencement naturel et trafic : en marge d’autres facteurs tels que la pertinence, les Signaux Web Essentiels ont une incidence sur le classement des sites web. Leur optimisation améliore le classement de votre site dans les résultats de recherche, ce qui lui donne une plus grande visibilité et génère davantage de trafic.
- Taux de rebond : l’amélioration de la performance d’un site et l’accélération du chargement de ses pages procurent une meilleure expérience client, réduisant les taux de rebond.
- Engagement et taux de conversion : grâce au chargement accéléré des pages, celles et ceux qui utilisent votre site ont davantage de chances de s’y attarder, d’interagir avec son contenu et de passer commande.
Comment le rendu par phase fonctionne-t-il dans Experience Manager Sites ?
Experience Manager Sites avec Edge Delivery Services charge le contenu web en trois phases :
- Phase E (Eager, ou chargement anticipé) : au cours de cette phase sont chargés tous les éléments nécessaires pour réaliser l’objectif de score LCP (Largest Contentful Paint), qui mesure le temps de chargement du contenu principal de la page et rend compte de la vitesse de chargement perçue par l’utilisateur ou l’utilisatrice, une composante décisive de l’expérience client.
- Phase L (Lazy, ou chargement progressif) : lors de cette phase sont chargées les ressources non critiques pour le LCP, essentiellement à partir du même serveur d’origine.
- Phase D (Delayed, ou chargement différé) : durant cette phase sont chargés tous les éléments restants, comme les balises tierces ou les assets non essentiels pour l’expérience visible.
Examinons en détail ces trois phases.
Phase E (Eager, ou chargement anticipé)
La phase E est centrée sur l’optimisation du délai d’affichage LCP, qui marque le moment où l’élément le plus volumineux de votre page (image, vidéo ou texte) est chargé. Un LCP rapide garantit aux internautes un affichage instantané et des interactions sans délai avec votre page.
Au cours de cette phase, tous les éléments intervenant dans l’affichage LCP en situation réelle seront chargés, autrement dit le balisage, les styles CSS et les fichiers JavaScript.
Phase L (Lazy, ou chargement progressif)
Au cours de la phase L, seule la partie de la charge utile n’ayant aucune incidence sur le temps de blocage total (TBT, Total Blocking Time) est chargée. Le TBT mesure la somme de tous les petits blocages qui empêchent d’interagir avec votre page web, et nuisent à la performance de votre site et aux Signaux Web Essentiels.
Durant cette phase sont chargés les blocs (JavaScript et CSS), le reste des images non critiques pour le LCP et les autres bibliothèques JavaScript non bloquantes. Les en-tête et pied de page sont aussi chargés de manière asynchrone dans leurs blocs respectifs puisqu’ils ne relèvent pas du chemin critique du LCP.
Phase D (Delayed, ou chargement différé)
La phase D est axée sur le chargement des éléments de la charge utile n’ayant pas d’incidence immédiate sur l’expérience client, à savoir les balises tierces, les outils marketing, la gestion du consentement, l’analytics au sens large et les modules conversationnels. Leur chargement intervient au cours de la troisième phase, car ils génèrent souvent des fichiers JavaScript volumineux préjudiciables aux performances.
Il importe de décaler le lancement de cette phase d’au moins trois secondes après le LCP afin de permettre au reste de l’expérience client de se stabiliser.
Le rendu par phase opère un chargement stratégique des éléments en fonction de leur incidence sur l’expérience client, gage d’un site hautes performances. Grâce à cette technique de rendu par phase, conjuguée à l’architecture edge, au Real-User Monitoring (RUM) et à la mise en cache persistante, Edge Delivery Services dans Experience Manager Sites garantit un chargement accéléré des pages ainsi que des scores Google Lighthouse et des Signaux Web Essentiels solides, instantanément.
Pour en savoir plus sur le rendu par phase, consultez notre documentation technique.
