Vérifier quand le snippet se charge
Vérifiez le timing du tagengine.js (précédemment appelé kameleoon.js) après le rechargement de la page, comme illustré dans la capture d’écran ci-dessous. Si la métrique started at est supérieure à 1 seconde, placez le script Kameleoon plus haut dans la balise <head> et définissez fetchpriority="high". Ces modifications garantissent que le script Kameleoon se charge en moins de 1 seconde.
Lorsque la page se charge pour la première fois, le script Kameleoon prend plus de temps, généralement moins de 60 millisecondes, car il est téléchargé directement depuis le CDN. Lors des rechargements ultérieurs, le script est téléchargé depuis le cache.
Vérifier le score de performance via l’extension Chrome de Kameleoon
Selon le Score de performance affiché dans l’extension (voir capture d’écran ci-dessous), effectuez une ou plusieurs de ces actions :- Arrêtez toutes les expériences ou personnalisations qui sont en cours depuis plus de 2 mois et transférez le code dans le code source de votre site en fonction du résultat de l’expérience ou de la personnalisation.
- Archivez toutes les expériences ou personnalisations qui ont été arrêtées.
- Supprimez tous les objectifs inutilisés, y compris leur code s’il s’agit d’objectifs personnalisés.
- Supprimez tous les segments inutilisés.
- Supprimez toutes les données personnalisées inutilisées.
- Optimisez le script personnalisé global pour supprimer tout le code inutilisé/déprécié.
Suivre la performance avec PageSpeed insights
L’onglet Performance dans les outils de développement du navigateur aide à analyser les performances d’une page web en enregistrant et en visualisant des données clés telles que les temps de chargement de page, l’utilisation de la mémoire et la consommation des ressources. Il fournit des informations détaillées sur les processus de rendu, de scripting et de mise en page sous forme de chronologies et de diagrammes en flammes. Cela peut aider à identifier les goulets d’étranglement, les scripts à chargement lent et autres facteurs affectant la vitesse. Google PageSpeed Insights analyse le contenu d’une page web et fournit des informations sur les performances ainsi que des suggestions d’améliorations. Il attribue un score et des suggestions basés sur les Core Web Vitals, tels que le temps de chargement, l’interactivité et la stabilité visuelle. Les résultats sont affichés dans un format de rapport avec des métriques telles que “FCP”, “LCP”, “INP” et “CLS”.
First Contentful Paint
Le First Contentful Paint (FCP) mesure le temps entre le début du chargement de la page et le moment où le contenu de la page est affiché à l’écran.- Impact possible : L’anti-flicker pourrait avoir un impact sur le FCP puisqu’il retarde l’affichage du premier élément sur la page
- Action : Réduisez le timeout de l’anti-flicker de 1000 millisecondes à 500 millisecondes ou supprimez le script anti-flicker si Kameleoon se charge très tôt (started at ≃ 500 millisecondes). L’exemple de snippet de code suivant illustre comment y parvenir :
Largest Contentful Paint
Le Largest Contentful Paint (LCP) mesure la vitesse de chargement perçue. Il marque le moment dans la chronologie de chargement de la page où le contenu principal de la page a probablement été chargé.- Impact possible : L’anti-flicker pourrait avoir un impact sur le LCP puisqu’il retarde l’affichage du plus grand élément sur la page
- Action : Identique au FCP ci-dessus.
Interaction to Next Paint
L’Interaction to Next Paint (INP) mesure la réactivité de la page. Pour offrir une expérience utilisateur positive, visez un INP inférieur à 200 millisecondes.- Impact possible : Si Kameleoon se charge tôt, il ne devrait pas y avoir d’impact négatif. Cependant, les tests qui modifient le comportement d’une interaction peuvent affecter cette métrique.
- Action : Vous pouvez utiliser l’extension Chrome Kameleoon ou le code ci-dessous dans la console pour vérifier quelles sont les expériences / personnalisations actives sur la page concernée afin de trouver la source possible de l’impact. L’exemple de snippet de code suivant illustre comment y parvenir :
Cumulative Layout Shift
Le Cumulative Layout Shift (CLS) mesure le plus grand changement de position d’un élément au cours du cycle de vie de la page. Notez que les décalages de mise en page ne se produisent que lorsque des éléments existants modifient leur position de départ. Si un nouvel élément est ajouté au DOM, ou si un élément existant change de taille, cela ne compte pas comme un changement de mise en page, tant que le changement n’entraîne pas de modification de la position de départ d’autres éléments visibles.- Impact possible : Le tag Kameleoon n’a aucun impact sur cet indice. Les expériences / personnalisations, en revanche, peuvent avoir un impact négatif si elles entraînent un changement dans la position de départ d’un élément.
- Action : Identique à l’INP ci-dessus.
Speed Index (métrique ContentSquare)
Le Speed Index mesure le moment où la majorité des éléments graphiques au-dessus de la ligne de flottaison sont affichés.- Impact possible : L’anti-flicker pourrait avoir un impact sur le Speed Index puisqu’il peut retarder l’affichage des éléments au-dessus de la ligne de flottaison. De plus, si vous exécutez des expériences/personnalisations qui apportent des modifications en haut de la page, le Speed Index sera négativement impacté (il augmentera).
- Actions : Identique au FCP et à l’INP ci-dessus.
Caractéristiques du script Kameleoon en un coup d’œil
- Snippet asynchrone : Kameleoon charge son script de manière asynchrone depuis un CDN fiable (Cloudflare) pour garantir un premier chargement de page non bloquant et utilise la mise en cache du navigateur pour des chargements de page ultérieurs plus rapides. Kameleoon maintient un Service Level Agreement (SLA) supérieur à 99,99 %.
Assurez-vous d’avoir l’attribut async dans le script Kameleoon installé sur votre site. Veuillez vous référer au snippet ci-dessous :
- Petite taille du script : Le fichier d’application de Kameleoon, créé avec TypeScript, a une taille de seulement 29 Ko (compressé avec Brotli), ce qui minimise le temps de chargement à la première page.
- Approche de prétraitement : Le script Kameleoon est généré uniquement à partir des composants nécessaires à votre configuration spécifique, en fonction des fonctionnalités et options que vous utilisez.
- Moteur anti-clignotement unique : Le moteur de Kameleoon capture les événements du DOM en temps réel et modifie l’affichage des composants impliqués dans une variation d’expérience avant qu’ils ne soient entièrement rendus.
- Appels réseau réduits : Kameleoon regroupe plusieurs événements de suivi dans un seul appel beacon, réduisant ainsi considérablement le nombre total d’appels réseau requis.
- Chargement unique du script : Contrairement à d’autres plateformes qui nécessitent plusieurs fichiers, Kameleoon charge un seul script consolidé, ce qui réduit le nombre de requêtes HTTP.
- Chargement différé des expériences : Kameleoon vous permet de sélectionner quelles expériences inclure dans le fichier d’application,
engine.js(précédemment appelékameleoon.js) au moment du premier chargement de page, au cas par cas, et de différer les expériences non essentielles après le premier chargement. - Mise à jour en temps réel : Pour fournir des mises à jour plus fréquentes sans être ralenti par la mise en cache du navigateur, la fonctionnalité Live Update Experiments de Kameleoon rafraîchit toute expérience taguée “LIVE-UPDATE” en moins d’une minute.