Adobe Experience Manager est reconnu comme le système de gestion de contenu le plus avancé au monde, mais cela a un coût — de nombreuses opportunités d’optimiser et d’exploiter les performances d’AEM sont souvent manquées en raison de son architecture complexe et d’un manque de sensibilisation.
Compte tenu du coût élevé d’une licence AEM, un tel scénario est susceptible d’être plus que frustrant. Et bien qu’il n’existe pas de solution miracle pour chaque cas, nous pouvons offrir un ensemble de pratiques qui peuvent être utilisées pour obtenir rapidement des résultats mesurables sans des semaines passées à fouiller la documentation.
Aperçu de l’architecture AEM
Sans entrer dans les détails techniques, nous décrirons brièvement l’architecture AEM. Cet aperçu est essentiel, car il met en évidence les principes fondamentaux qui ont un impact direct sur la principale métrique d’évaluation des performances de votre site : le temps de réponse à la requête d’un visiteur.
En bref, l’architecture AEM est organisée en quatre instances principales : Author, Publisher, Dispatcher et Load balancer. Imaginez-les comme une troupe de danse bien coordonnée : l’Author écrit les mouvements, le Publisher les exécute, le Dispatcher dirige, et le Load Balancer s’assure que tout le monde reste en rythme. Ils veillent à ce que le nouveau contenu soit lancé en douceur et se charge rapidement pour les utilisateurs.
L’instance Author est une sorte de bac à sable pour la production et la modification de contenu. C’est là que les pages web sont créées, catégorisées et modifiées, et où sont stockés tous les médias utilisés sur votre site.
L’instance Publisher est une version en direct de votre contenu, disponible pour les utilisateurs. Une fois le contenu approuvé pour publication dans l’environnement Author, il est envoyé au niveau Publisher.
L’instance Dispatcher est responsable de la mise en cache et de l’équilibrage de charge (load balancing), c’est-à-dire de diriger le trafic vers les chemins offrant les temps de chargement les plus courts possibles.
Enfin, l’équilibreur de charge. Oui, la tâche d’équilibrage de charge est déjà effectuée par Dispatcher, mais cet environnement existe pour distribuer le trafic des créateurs de contenu et des utilisateurs entre les environnements auteur, éditeur et dispatcher, s’il y en a plus d’un.Dans des conditions parfaites, c’est une performance parfaitement chorégraphiée où personne ne manque une note. Le concept AEM CCMS met l’accent sur l’évolutivité et l’agilité d’AEM, permettant au système de croître avec votre entreprise. Pourtant, dans les grands projets, à mesure que les volumes de contenu augmentent, le risque de perturbations entre les différents composants augmente également. Comprendre comment surveiller, prévenir et, idéalement, anticiper ces problèmes est crucial. Les pratiques suivantes vous aideront à y parvenir.
Optimisation du contenu
Adobe Experience Manager inclut plusieurs types d’actifs différents classés comme contenu. Pour chaque type, il existe des opportunités d’optimisation continues qui méritent d’être explorées afin de maintenir un niveau élevé de performance d’AEM.
Amélioration du temps de chargement des images
La qualité des images est essentielle à la perception de votre site web. Elle affecte grandement la façon dont les visiteurs le perçoivent. Cependant, les images de haute qualité peuvent ralentir les temps de chargement et les performances du site. En utilisant les méthodes ci-dessous, vous pouvez équilibrer votre travail avec les éléments visuels afin d’obtenir une réponse rapide sans perdre l’attrait visuel du site aux yeux du visiteur.
- Approche de chargement paresseux (lazy load). Oui, c’est un rare exemple du principe “qui va lentement va loin”. La technique de chargement paresseux (lazy loading) signifie que le chargement de certains composants de page, souvent des images, est retardé jusqu’à ce qu’ils deviennent nécessaires, c’est-à-dire jusqu’à ce que l’utilisateur commence à interagir avec eux. Adobe Experience Manager prend en charge le chargement paresseux par défaut. Cela se fait via le composant Image des composants principaux d’AEM (AEM Core Components). Tout ce que vous avez à faire est de sélectionner cette option dans la boîte de dialogue de conception (sous Politiques).
- Optimisation du format. Parmi les nombreux formats d’image disponibles aujourd’hui, certains conviennent mieux à certaines conditions. Par exemple, vous pouvez redimensionner les fichiers SVG sans perte de qualité.
- Techniques adaptatives. Les utilisateurs mobiles n’ont pas besoin d’images de la même qualité que celles que les visiteurs de votre site web voient sur un ordinateur de bureau. AEM prend en charge la méthode Dynamic Media, qui économise plus de ressources par rapport à l’ancienne méthode de rendu.
- Mise en cache des images. Classez les images de votre site en fonction de leur fréquence de rotation. Cela vous aidera à comprendre quels éléments visuels vous pouvez conserver en cache plus longtemps.
Minification du code
Cette méthode consiste à éliminer les données inutiles ou obsolètes sans affecter le traitement du site web par le navigateur. Pendant le processus de minification, les commentaires de code et de formatage sont éliminés, le code inutilisé est supprimé, des noms de variables et de fonctions plus courts sont utilisés, et ainsi de suite.
Cela réduit la taille des ressources (JavaScript) et, l’avantage qui nous intéresse le plus, améliore le temps de chargement des pages. AEM prend en charge la minification des fichiers JavaScript en générant du code minifié pour les changements sémantiques.
Fragments d’expérience et de contenu
Par conception, les fonctionnalités Fragments de contenu et Fragments d’expérience (CF et XF) ont été introduites pour simplifier la gestion et la réutilisation du contenu, mais elles peuvent être utilisées pour développer des stratégies de mise en cache utiles.
Mise en cache et Rendu
Nous avons abordé le sujet de la mise en cache dans l’optimisation des performances d’AEM. Nous allons maintenant l’explorer plus en détail. La bonne stratégie de mise en cache et de rendu vous aidera à tirer le meilleur parti de votre implémentation AEM. Elle devrait tenir compte de vos ressources et du niveau de performance requis.
Optimisation du rendu AEM
Tout d’abord, abordons les concepts de rendu côté client (CSR) et de rendu côté serveur (SSR). La principale différence entre le CSR et le SSR réside dans l’emplacement du rendu. En CSR, le client effectue le rendu. Le serveur ne fournit qu’un fichier HTML vierge. À partir de là, le navigateur gère le reste du processus de rendu. En rendu côté serveur (SSR), le serveur rend la page avant de l’envoyer au client.
Dans le cas d’applications monopages riches en contenu, vous pourriez envisager le rendu côté serveur pour une partie du contenu afin d’accélérer le chargement initial de la page. Bien qu’AEM prenne entièrement en charge la fonction SSR dans de tels cas, il est recommandé d’évaluer attentivement si l’effort en vaut la peine, surtout en considérant la maintenance à long terme.
Le SSR devient particulièrement utile si votre site a besoin d’un coup de pouce dans l’un de ces domaines :
- SEO : Le SSR est-il nécessaire pour garantir que votre site soit correctement indexé par les moteurs de recherche ? Malgré les avancées, les moteurs de recherche peuvent être délicats avec JavaScript. Ainsi, le SSR pourrait toujours être le meilleur ami de votre site (et n’oubliez pas de suivre les meilleures pratiques de SEO AEM).
- Vitesse de la page : Comment le SSR impacte-t-il la vitesse dans des environnements réels et l’expérience utilisateur ? Si vos utilisateurs sont impatients et exigeants (et qui ne l’est pas de nos jours ?), c’est un point valable à considérer.
Optimisation de la mise en cache AEM
Le rôle du Dispatcher Cache est central ici. L’une des meilleures pratiques de performance d’AEM est de mettre en cache les pages ou fragments AEM dans le dispatcher AEM. Dans ce cas, le Dispatcher Cache sert de cache proxy inverse qui se situe entre l’AEM et le navigateur de l’utilisateur final. Le cache stocke des copies ultérieures du contenu qui peuvent être demandées directement à partir du cache plutôt qu’à partir de l’AEM elle-même.
Ce qui rend cette fonctionnalité encore plus attrayante, c’est le fait que les utilisateurs peuvent configurer le Dispatcher Cache pour mettre en cache des types de contenu spécifiques, tels que des images ou des fichiers JavaScript, ou pour mettre en cache par niveaux, des pages aux sections du site.
Tests et Optimisation
Vous avez presque terminé. Il ne reste qu’une petite pièce du puzzle — vérifions que toutes les méthodes que vous avez implémentées fonctionnent comme elles le devraient. Diverses méthodes et outils existent pour les tests de performance et l’optimisation d’AEM, disponibles indépendamment ou commercialement.
Tests de Performance AEM
Les tests peuvent être effectués sur des instances Publisher, des instances Author, ou les deux, selon vos exigences. De nombreuses stratégies et méthodologies existent, mais utilisez celles qui reproduisent les conditions réelles le plus fidèlement possible.
- Simulation de la réalité. C’est une condition évidente pour des tests réussis, mais elle n’est pas toujours facile à respecter. Utilisez des quantités de contenu similaires à celles de la production. Testez le code, le matériel et la configuration réseau préparés pour la production.
- Objectifs des tests. Avant les tests, nous devons définir les charges et les temps de réponse acceptables. S’il y a une migration, le temps de réponse doit correspondre au maximum à celui de l’environnement de production actuel. Quant au niveau de charge, il est recommandé de le fixer au double de la charge de pointe réelle.
- Outils. De nombreux outils de test commerciaux sont disponibles. Par exemple, Tough Day d’Adobe peut effectuer des tests de charge sur différentes instances AEM et collecter des données de performance. Pour tester des sites mobiles ou responsives, utilisez des outils qui simulent des connexions lentes, comme la 3G ou l’Edge.
Optimisation des performances AEM
Un bon point de départ pour l’optimisation de votre site web est de le comparer aux standards de l’industrie et aux principaux concurrents. Cela vous assure de rester aligné sur les normes actuelles de l’industrie et vous donne une vision claire des technologies que vous devrez adopter dans un proche avenir pour devancer la concurrence.
Certains services payants vous permettent de comparer les performances et le classement de votre site à ceux de vos concurrents. SimilarWeb, Ahrefs et Semrush sont de bons exemples de tels services. Alternativement, vous pourriez analyser manuellement les performances des sites concurrents en comparant leurs métriques aux standards de l’industrie et aux performances de votre propre site.
Parmi les ressources et outils internes utiles pour l’optimisation finale des performances figurent Monitoring Performance et Developer Mode. Monitoring Performance est un ensemble de documentation qui aide au diagnostic des problèmes et identifie les opportunités d’optimisation. Le passage en Developer Mode dans l’interface utilisateur d’auteur vous permettra de vérifier les temps de rendu pour chaque composant de page et les traces de pile d’erreurs.
Réflexions finales
L’optimisation des performances AEM est une question complexe. Elle nécessite une approche multifacette et de nombreuses ressources, comme démontré ci-dessus. Les informations structurées de cet article devraient vous préparer à aborder cette tâche étape par étape.
Cependant, si vous avez le désir légitime de déléguer cette tâche à des professionnels, cette option est également disponible. Des consultants AEM expérimentés possèdent l’expertise et les ressources nécessaires pour tirer le meilleur parti de votre implémentation AEM et vous fournir des méthodes d’optimisation adaptées à vos objectifs commerciaux.
