Performances de Bolt.new : donnez à Bolt un budget de vitesse mesuré dans un vrai navigateur
Bolt construit des apps JavaScript, et presque chaque prompt ajoute quelque chose que le navigateur doit télécharger : une bibliothèque, un composant, une image, une police. Rien de tout cela ne casse la page, si bien que vous ne le remarquez qu’au moment où le site paraît lent sur mobile. Le connecteur MCP de Relvato donne à Bolt une mesure incontestable — les Core Web Vitals d’un vrai Chrome sur le site publié — avec les raisons derrière chaque chiffre, pour que Bolt modifie le bon code dans la même session.
Pourquoi les apps Bolt ralentissent un prompt après l’autre
Bolt choisit un framework JavaScript comme React ou Vue au démarrage, et tout ce que fait l’app arrive dans le navigateur sous forme de JavaScript. Chaque nouvelle dépendance alourdit le bundle que le téléphone doit télécharger et exécuter avant que la page réponde — cela se voit dans le Total Blocking Time et une Interaction to Next Paint plus lente. Les grandes images en haut de page font monter le Largest Contentful Paint. Les polices web et le contenu chargé tard font sauter la mise en page : c’est le Cumulative Layout Shift.
Un ordinateur rapide sur un bon Wi-Fi masque tout cela. L’exécution mobile de Relvato, non : elle bride le réseau en Slow 4G et ralentit le processeur par quatre, comme PageSpeed, si bien qu’un recul apparaît dès l’exécution qui suit le prompt qui l’a causé.
Avant de commencer
Le site doit être publié et public. Bolt Cloud donne à chaque projet une adresse *.bolt.host gratuite, ou vous pouvez connecter un domaine personnalisé ; les projets publiés avant la mi-août 2025 sont peut-être encore chez Netlify, en *.netlify.app. Un site Bolt privé, visible seulement par les personnes invitées, ne peut pas être mesuré de l’extérieur.
Il faut aussi que le site soit dans Relvato, propriété prouvée — ajoutez-le comme connexion Any website / AI-built app et utilisez la méthode de la balise meta (Bolt peut la coller dans le head de la page pour vous) ou un enregistrement DNS. Seul le propriétaire du projet Bolt peut connecter des serveurs MCP et demander à Bolt de les utiliser.
Tant que vous êtes dans Relvato, ajoutez aussi le moniteur Uptime : l’offre gratuite de Bolt cesse de servir un site dès que le compte atteint sa limite mensuelle de données, ce qui ressemble à une panne pour vos visiteurs.
Étape 1 — Une clé d’API à accès complet, rien que pour Bolt
Dans Relvato, ouvrez API access depuis le menu du compte. Nommez la clé « Bolt » et, sous What the key may do, choisissez Full access — une clé Read-only ne peut pas lancer d’exécution. Cliquez sur + Create API key et copiez-la maintenant ; elle n’est affichée qu’une fois et commence par rlv_.
Réservez cette clé à Bolt. Si vous voulez un jour couper Bolt, révoquer sa clé laisse vos autres intégrations fonctionner.
Étape 2 — Ajouter Relvato comme connecteur personnalisé
Sur la page d’accueil de Bolt, cliquez sur l’icône plus dans la zone de chat, puis Connectors → Manage connectors. Sur la page Connectors (MCP), cliquez sur Custom MCP server et remplissez : Name — Relvato ; URL — l’adresse ci-dessous ; Transport type — HTTP (Relvato parle le HTTP en streaming, pas le SSE) ; Authentication — API key, puis collez votre clé rlv_. Cliquez sur Connect et attendez le statut Connected.
Relvato accepte la clé en en-tête Authorization: Bearer ou en en-tête x-api-key : quelle que soit la façon dont Bolt l’envoie, cela fonctionne. Laissez Auto-enable for all projects désactivé pour l’instant : vous activerez Relvato seulement dans les projets où vous le voulez.
https://app.relvato.com/api/mcp
Étape 3 — Ne garder que les outils dont Bolt a besoin
Chaque connecteur actif est ajouté au contexte du projet, ce qui, selon Bolt, peut le ralentir et consommer plus de tokens. Le serveur de Relvato propose douze outils ; pour une boucle de vitesse, Bolt en a besoin de six. Ouvrez le menu à trois points du connecteur → Edit et, sous Tools, laissez activés list_sites, site_overview, add_checks, trigger_scan, get_run et get_fix_prompt. Désactivez les autres et cliquez sur Save changes.
Les interrupteurs d’outils s’appliquent à tous les projets qui utilisent le connecteur. Si vous voulez plus tard que Bolt ajoute un nouveau site ou modifie le planning d’un moniteur, réactivez ces outils et cliquez sur Refresh connection.
Étape 4 — L’activer dans le projet et ajouter le moniteur
Dans le projet, cliquez sur l’icône plus de la zone de chat → Connectors et activez Relvato. Puis demandez : « Ajoute le moniteur Core Web Vitals de Relvato à mon site. » Bolt appelle add_checks avec le moniteur web-vitals, qui mesure la page d’accueil (ou une autre page choisie dans ses réglages dans Relvato) sur mobile et sur ordinateur, trois chargements chacun, en gardant la médiane.
Étape 5 — Mettre un budget de vitesse dans le prompt
Des chiffres ne servent qu’au regard d’une limite. Donnez la limite à Bolt dans le prompt : les seuils ci-dessous sont ceux auxquels Relvato lui-même avertit, donc « réussi » veut dire la même chose dans Bolt et dans le tableau de bord de Relvato. Publiez d’abord (Publish → Update), puis envoyez un prompt comme celui ci-dessous.
Bolt lance l’exécution avec trigger_scan et la lit avec get_run jusqu’à la fin, généralement en moins d’une minute. Bolt ne documente pas d’approbation à chaque appel pour les outils de connecteur : les interrupteurs de l’étape 3 sont donc votre contrôle, Bolt ne peut utiliser que ce que vous avez laissé activé. Chaque exécution compte dans les exécutions mensuelles de votre offre Relvato.
Après la publication, lance le moniteur Core Web Vitals de Relvato sur mon site. Considère-le comme échoué si, sur mobile, le LCP dépasse 2,5 s, le CLS 0,1 ou le TTFB 0,8 s. Montre-moi l’élément LCP, les scripts bloquant le rendu et le plus gros JavaScript inutilisé.
Étape 6 — Transformer le diagnostic en modifications de code
Une exécution Relvato renvoie plus que des scores. Pour chaque appareil, elle nomme l’élément qui a fait le Largest Contentful Paint et la répartition de son temps entre réponse du serveur, chargement de la ressource et rendu ; les éléments qui ont décalé la mise en page ; les scripts qui ont bloqué le rendu ; les images trop lourdes ; et la part inutilisée de chaque fichier JavaScript. Chacun mène à une correction différente — le tableau ci-dessous les associe.
Demandez à Bolt de corriger le pire, publiez avec Update et relancez le moniteur. Si la modification n’a pas fait bouger le chiffre, l’exécution vous le dit, et vous avez dépensé un prompt au lieu d’une semaine de site plus lent. Pour une exécution en échec, get_fix_prompt renvoie le même brief que le bouton Suggest a fix de Relvato.
Continuer à surveiller entre les sessions Bolt
Le connecteur mesure quand vous le demandez. Pour repérer un ralentissement dont vous n’êtes pas la cause — un script tiers, un changement de CDN —, donnez un planning au moniteur dans Relvato (les exécutions quotidiennes nécessitent l’offre Business ; avec Pro, une connexion GitHub relance vos moniteurs à chaque push).
Les mesures en laboratoire, c’est un navigateur et un profil. Pour voir ce que vivent vos vrais visiteurs, ajoutez la balise des Web Vitals des vrais utilisateurs de Relvato — un script d’une ligne que Bolt peut ajouter à la page pour vous.
Les seuils de Relvato comme budget, et la correction habituelle dans une app Bolt
| Métrique | Relvato avertit à partir de | Relvato échoue à partir de | Cause habituelle → correction dans une app Bolt |
|---|---|---|---|
| Largest Contentful Paint | 2,5 s | 4 s | Une grande image d’en-tête ou un contenu rendu après le JavaScript → redimensionner et compresser l’image, la précharger, afficher l’en-tête sans attendre les données |
| Cumulative Layout Shift | 0,1 | 0,25 | Images sans largeur ni hauteur, polices qui changent, bannières insérées tard → fixer les dimensions, réserver l’espace, utiliser font-display |
| Time to First Byte | 0,8 s | 1,8 s | Hébergement, redirections ou fonction serveur à la première requête → pas un problème de taille de code ; vérifiez la configuration du domaine et le cache |
| Interaction to Next Paint | 200 ms | avertissement seulement (500 ms est mauvais) | Gestionnaires de clic lourds et gros bundle → découper le code, différer le travail non critique |
| Total Blocking Time | affiché, non noté | — | JavaScript bloquant le rendu et inutilisé → charger routes et composants à la demande, retirer les bibliothèques inutiles |
FAQ
Bolt demande-t-il avant d’utiliser un outil Relvato ?
Bolt ne documente pas d’étape d’approbation pour les outils de connecteur. Contrôlez ce qu’il peut faire avec les interrupteurs d’outils du connecteur : les outils de lecture de Relvato ne font que lire, et trigger_scan ne fait que lancer des exécutions de moniteurs — rien dans le connecteur ne supprime ni ne modifie votre site.
Quelle adresse dois-je mesurer ?
Celle qu’utilisent vos visiteurs : votre domaine personnalisé si vous en avez connecté un, sinon l’adresse *.bolt.host attribuée par Bolt au projet (ou *.netlify.app pour un ancien projet encore hébergé chez Netlify). Mesurez après Publish → Update, pour que l’exécution voie votre dernier changement.
Le connecteur ralentit-il Bolt ou consomme-t-il plus de tokens ?
Un peu : un connecteur actif fait partie du contexte du projet. Garder six outils activés et n’utiliser Relvato que dans les projets qui en ont besoin limite cet effet.
Les personnes avec qui je partage le projet peuvent-elles l’utiliser ?
Pas via votre connexion. Seul le propriétaire du projet peut connecter des serveurs MCP et demander à Bolt de les utiliser.
Est-ce la même chose que PageSpeed Insights ?
Proche, pas identique. L’exécution mobile de Relvato utilise le même profil de bridage (Slow 4G, 4× CPU) et donne les mêmes métriques, mais elle garde la médiane de trois chargements et tourne depuis les serveurs de Relvato : attendez-vous à des chiffres du même ordre, pas à une correspondance exacte.