Si vous recevez régulièrement des avis positifs, vous avez sans doute déjà intégré une ou plusieurs de nos TrustBoxs (les widgets de Trustpilot) sur votre site web.
Les TrustBoxs sont l’une de nos fonctionnalités les plus populaires, mais elles suscitent aussi quelques interrogations chez les consommateurs. Nous en avons bien pris note et souhaitons prendre le temps d’y répondre directement ici.
Les TrustBoxs ralentissent-elles mon site web ?
Soyez rassuré(e) : si votre site web a un coup de mou ces derniers temps, les TrustBoxs n’y sont pour rien. Les problèmes rencontrés ne viennent sûrement pas des widgets.
Cet article a pour objectif de répondre aux questions qui reviennent le plus souvent sur le fonctionnement de nos TrustBoxs.
Quel est leur poids réel ? Comment leur intégration influence-t-elle votre site web ? Quel est leur impact sur les performances globales de votre site ?
Découvrez comment les TrustBoxs se chargent réellement et leur véritable impact sur la vitesse de chargement de vos pages. Vous pourrez enfin dormir tranquille !
Pourquoi la taille ne compte pas
Lorsque vous intégrez un widget Trustpilot pour la première fois, il ajoute un maximum de 120 KB à votre site web, en fonction de la TrustBox que vous utilisez et du poids des données affichées. Cela correspond environ à la taille d’une image de 200 x 200 pixels. Plus vous chargerez une TrustBox, plus son poids diminuera. Certaines TrustBoxs ne pèsent même pas plus d’1 KB, grâce au cache du navigateur.
N’oubliez pas que les pages web pèsent 2 Mb en moyenne (données 2016). Ajouter une TrustBox à votre site n’aura donc que peu d’impact sur la vitesse de chargement – voire aucun impact du tout grâce à sa taille réduite.
Et maintenant, place aux choses sérieuses !
Petite introduction
Avant d’expliquer le fonctionnement des TrustBoxs, il est indispensable de bien saisir les bases d’Internet. Voici un récapitulatif simplifié de ce qu’il se produit quand vous ouvrez votre navigateur web et allez sur votre page web :
Étape n° 1 : votre navigateur prend contact avec le serveur sur exemple.fr et demande la première page.
Étape n° 2 : le serveur commence à envoyer sa réponse, c’est-à-dire le code source HTML de votre page.
Étape n° 3 : en lisant ce code, le navigateur construit le Modèle Objet de Document (DOM). Il s’agit d’une représentation des données des éléments de la page web. Le navigateur se trouve alors en mode « chargement » (domLoading).
Étape n° 4 : une fois que le navigateur a entièrement analysé la réponse HTML et construit le DOM dans son intégralité, il entre en mode « interactif » (domInteractive). Les scripts commencent alors à explorer le DOM et à le mettre à jour avec du contenu dynamique, en écoutant par exemple l’événement domContentLoaded.
Étape n° 5 : vous y êtes presque ! Les ressources externes comme les feuilles de style, les images et les balises iFrame doivent maintenant être téléchargées et affinées. Cela se produit en parallèle des deux étapes précédentes, mais toujours avec une exécution plus longue.
Étape n° 6 : une fois que l’affichage écran est prêt, le navigateur atteint enfin le mode « terminé » (domComplete) et le signale avec l’événement de chargement loadEvent.
Certains scripts ont attendu l’événement de chargement et peuvent maintenant s’exécuter. Si cette opération allonge la durée de traitement à la fin du cycle, elle réduit aussi le temps de chargement perçu en accélérant l’affichage des données sur l’écran. Vous pouvez dès lors lire la page et interagir avec elle tandis que d’autres tâches se terminent en fond.
Où afficher les TrustBoxs
Imaginons qu’une TrustBox se charge pour la toute première fois. Les chargements ultérieurs se font bien plus rapidement étant donné que le navigateur récupère des données depuis le cache et que le contenu statique de la TrustBox est également stocké en mémoire cache sur notre RDC (réseau de diffusion de contenu, article en anglais) pendant 24 h (contre 30 minutes pour les avis, le TrustScore et les notes en étoile).
Les deux premières étapes sont les mêmes lorsque vous ajoutez une TrustBox à votre site web :
le navigateur demande votre page ;
le serveur envoie le code source HTML ;
le navigateur commence à analyser la réponse et à construire le DOM...
… avant de trouver le script de notre TrustBox !
Attention : comme le script comporte l’attribut « async », il n’est pas exécuté immédiatement. Le navigateur commence alors à télécharger le script en fond tout en continuant son travail.
Quelques fractions de milliseconde plus tard, le navigateur trouve
la TrustBox < div > :
La TrustBox < div > s’ajoute rapidement au DOM étant donné qu’elle contient seulement le lien de son emplacement.
L’étape d’amorçage
Le navigateur exécute la TrustBox une fois le téléchargement du script du widget terminé. Nous vérifions alors l’état du navigateur. S’il est encore en mode « chargement » (domLoading), nous nous abonnons tout simplement à l’événement domContentLoaded pour permettre au navigateur de reprendre son analyse et de nous informer une fois l’opération terminée. Sinon, nous reprenons notre tâche principale qui consiste à trouver la TrustBox < div > sur la page et à y ajouter du contenu.
Si nous trouvons une TrustBox dédiée au SEO, nous prenons immédiatement contact avec notre service back-end pour obtenir les dernières balises de données structurées à jour pour votre entreprise. Et comme tout le reste du chargement des TrustBoxs, il s’agit d’une opération asynchrone. Nous commençons la requête et informons le navigateur qu’une fois l’envoi de sa réponse avec la balise, celle-ci doit être ajoutée à l’élément < head > car c’est bien là que les moteurs de recherche s’attendent à la trouver.
Pendant ce temps-là, nous analysons les attributs des données de la TrustBox < div > et créons une balise iFrame avec l’URL qui lui correspond.
L’iFrame est alors une nouvelle ressource accessible au navigateur, en parallèle des requêtes habituelles pour vos images et vos feuilles de style. Nos requêtes s’effectuent en parallèle à celles sur votre domaine étant donné que nous récupérons du contenu depuis le domaine trustpilot.com. Il est donc possible que les nôtres se terminent en premier !
L’étape de chargement de contenu
Comme l’iFrame est une page web intégrée, le navigateur utilise le même processus que précédemment : il analyse la réponse, construit le DOM, et ainsi de suite. Comme le HTML reçu n’est que le squelette de la TrustBox, nous devons alors exécuter un script JavaScript.
Dans chaque iFrame des TrustBoxs, vous trouvez un script nommé main.js (en plus d’un script tiers que nous utilisons pour le suivi de nos performances, appelé New Relic). Ce script se trouve à un emplacement stratégique, en dessous du tag, pour commencer à s’exécuter dès que le squelette a été analysé par le navigateur.
Dans le script principal main.js, nous prenons de nouveau contact avec notre service back-end pour obtenir les avis, les notes en étoile, le TrustScore et toutes les données nécessaires pour étoffer le contenu de la TrustBox. Plus qu’un circuit asynchrone, et votre TrustBox est enfin prête pour votre page web !
Nous avons tous un rôle à jouer dans l’optimisation
Nous serions ravis d’aller encore plus loin et d’échanger ensemble sur chaque détail technique (on adore ça, vous l’aurez compris !), mais il faut savoir que travailler sur l’amélioration des performances ne fait pas tout. Heureusement, de nombreux acteurs externes jouent eux aussi un rôle important dans l’optimisation web. Les fournisseurs de navigateurs améliorent constamment leurs moteurs de rendu, et le protocole HTTP/2 est aujourd’hui de plus en plus plébiscité. L’infrastructure de Trustpilot le prend d’ailleurs déjà en charge !
Certains des acteurs clés qui nous permettent de consolider nos TrustBoxs et d’améliorer leurs performances sont en réalité les entreprises qui les utilisent. Celles-ci sont nombreuses à s’appuyer sur notre TrustBox Optimizer pour effectuer des tests A/B simples et identifier les TrustBoxs et les emplacements qui convertissent le plus. Nous utilisons ensuite ces données pour optimiser toutes les versions de nos TrustBoxs.
