Un widget de preuve sociale ne mérite sa place que s'il ne ralentit pas la page qu'il est censé aider. Le script de Provedly pèse environ 6 Ko compressé en gzip, se charge de manière asynchrone, s'affiche dans un Shadow DOM en dehors de votre mise en page, et attend avant de dessiner quoi que ce soit. Cet article décrit précisément ce qui se passe au chargement, ce que cela implique pour les Core Web Vitals, et les quelques décisions de votre côté qui influent sur les performances.
Ce qui se charge, et quand
<script
src="https://provedly.app/w/widget.js"
data-token="pp_…"
async
defer
></script>
- Le navigateur récupère
widget.jssans bloquer l'analyse du HTML, grâce àasyncetdefer. - Le chargeur demande
GET /api/w/{token}/config, qui renvoie les réglages et jusqu'à 30 enregistrements récents en une seule réponse. - Après votre délai de démarrage (3 secondes par défaut), la première notification s'affiche. Chaque affichage envoie une impression à
/track. - Tant que l'onglet est ouvert, un signal de présence interroge
/presencetoutes les 30 secondes pour le compteur en direct.
C'est l'empreinte réseau complète : un script, une requête de configuration, une petite requête par notification affichée et un signal toutes les 30 secondes. Aucune police n'est chargée, aucune image sauf si vous utilisez des avatars en image, et aucun appel tiers depuis l'intérieur du widget.
Les Core Web Vitals, un par un
Largest Contentful Paint. Le script ne bloque ni l'analyse ni le rendu, et rien de ce qu'il dessine n'est candidat au LCP ; une notification apparaît après votre contenu principal et elle est petite. En pratique, un widget correctement installé n'a pas d'effet mesurable sur le LCP. Si vous placez la balise dans <head> sans async defer, ce n'est plus vrai : ne le faites donc pas.
Cumulative Layout Shift. La notification, le compteur et la barre sont en position: fixed à l'intérieur d'un shadow root. Les éléments fixes n'occupent pas de place dans le flux du document : leur apparition ne déplace donc rien. Leur contribution au CLS est nulle par construction. L'exception est une barre en position « inline », que vous placez délibérément dans le flux ; réservez sa hauteur si vous l'utilisez.
Interaction to Next Paint. Le travail du widget sur le thread principal est minime : analyser un script de 6 Ko, afficher quelques nœuds DOM et un minuteur. Il n'attache aucun écouteur de défilement ou de pointeur à votre document. L'INP n'est pas affecté, sauf si votre page est déjà à la limite.
| Mesure | Effet d'un widget correctement installé |
|---|---|
| LCP | Aucun ; asynchrone, après le contenu principal |
| CLS | Aucun ; position fixe, hors du flux |
| INP | Négligeable ; aucun écouteur à l'échelle du document |
| Transfert total | Environ 6 Ko compressé en gzip, plus le JSON de configuration |
À quoi sert le délai de 3 secondes
Le délai de démarrage par défaut existe pour le visiteur, pas pour les performances, mais il aide les deux. Au moment où la première notification apparaît, la page a généralement fini de se charger, les images sont arrivées et le visiteur s'est repéré. Une notification qui surgit avant que l'image principale ne s'affiche est à la fois agaçante et, sur une connexion lente, en concurrence pour la bande passante. Gardez un délai de 3 secondes ou plus ; le raccourcir n'apporte rien.
Les décisions de votre côté qui comptent
L'emplacement de la balise. À la fin du <body> avec async defer, ou next/script avec strategy="afterInteractive". Pas dans le <head> de façon synchrone.
Balise directe ou Tag Manager. GTM ajoute le chargement du conteneur et l'évaluation des déclencheurs avant même que le script du widget ne soit demandé. Sur une page lente, cela retarde la première notification plus que prévu. Voir installer via Google Tag Manager, et quand s'en abstenir.
Les avatars en image. Si vous envoyez avatar_url avec les enregistrements, chaque notification peut charger une image. Gardez-les légères ou utilisez un style d'avatar sans image ; les enregistrements issus des webhooks Stripe et Shopify ne contiennent de toute façon pas de photos.
Le nombre de widgets. Un widget par page couvre les notifications et le compteur en direct. Une barre est un second chargeur. N'installez pas deux fois le même token ; le chargeur est idempotent, mais les balises en double coûtent quand même une requête.
Les GIF de compte à rebours pour e-mail. C'est un autre produit : un GIF animé généré côté serveur pour les e-mails, d'une durée maximale de 3 minutes et de moins de 100 Ko. Ils n'ont aucun effet sur les performances de votre site, mais gardez à l'esprit que les clients de messagerie les chargent à l'ouverture.
Le mesurer vous-même
Lancez Lighthouse ou WebPageTest deux fois sur une page, avec et sans la balise, et comparez. Attendez-vous à une différence comprise dans le bruit d'une mesure à l'autre. Si vous constatez une vraie régression, vérifiez la présence d'une balise synchrone, d'une balise en double ou d'une CSP qui provoque des nouvelles tentatives. Le tableau de bord ne rapporte pas de mesures de performance ; vos propres outils font foi ici, et le widget est conçu pour y passer inaperçu.
Pourquoi la taille compte plus qu'il n'y paraît
Plusieurs outils de preuve sociale, en octobre 2026 et d'après leurs fiches, regroupent dans un seul script client des moteurs de test A/B, des éditeurs visuels, des couches d'analyse et plusieurs types de notifications. Chaque fonctionnalité est une raison de plus pour que le paquet grossisse. Le widget de Provedly fait une seule chose sur la page : récupérer la configuration, afficher de vrais enregistrements avec leurs étiquettes, compter honnêtement la présence. Tout le reste, y compris la page de vérification et le rapprochement d'attribution des commandes assistées par la preuve, se passe sur le serveur. Garder le client léger est une décision produit autant qu'une décision technique.
Questions fréquentes
Le signal envoyé toutes les 30 secondes vide-t-il la batterie ou le forfait mobile ?
Un signal est une toute petite requête toutes les 30 secondes tant que l'onglet est ouvert. C'est bien moins que ce que fait n'importe quel script d'analyse ou widget de chat, et cela s'arrête à la fermeture de l'onglet.
Puis-je différer le widget jusqu'à ce que le visiteur fasse défiler la page ?
Le délai de démarrage couvre déjà le cas courant. Si vous avez besoin d'un chargement déclenché par le défilement, injectez la balise depuis votre propre gestionnaire de défilement avec les mêmes src et data-token ; le chargeur fonctionne de la même manière.
L'intégration d'application Shopify est-elle plus lourde que la balise de script ?
Non. L'intégration d'application charge le même moteur de rendu avec la même isolation, et elle a l'avantage que les commandes arrivent vérifiées sans aucun code client supplémentaire.
Installez-le, lancez votre test de vitesse et gardez le résultat, quel qu'il soit : commencez gratuitement.