Rendre le site rapide sur un téléphone et une connexion lente
Aider les visiteurs à voir et à utiliser rapidement les parties importantes, même sur un téléphone ordinaire ou une connexion peu fiable.
Quand l'utiliser
Avant le lancement, après l'ajout de nombreuses images ou widgets, ou lorsque le site semble correct sur votre ordinateur mais lent sur un téléphone.
Avant de commencer
- Un site avec du contenu réel et des images représentatives ; les tests utilisant uniquement des espaces réservés peuvent masquer le problème réel.
- La ou les deux pages que les clients doivent pouvoir utiliser rapidement.
- Un téléphone pour la vérification humaine finale, idéalement une fois en Wi-Fi et une fois sur une connexion mobile plus lente.
- Une liste des widgets tiers que vous devez conserver, tels que les cartes, les vidéos, les chats, les analyses ou les outils de réservation.
Le prompt
Ces prompts fonctionnent mieux en anglais — collez-les tels quels, même sur les pages traduites.
Review the whole site for a visitor using a narrow phone screen and a slow connection. Improve speed without removing essential content, changing the brand or redesigning the pages. Start by testing the home page and [MOST IMPORTANT CUSTOMER PAGE] at a phone size with a simulated slow connection. Give me a short before list of what makes the visitor wait, what moves around while loading, and what cannot be controlled from inside this app. Then make the first visible section useful as soon as possible. Resize and compress images without making them visibly poor, use the right image size for the visitor's screen, and delay images and heavy sections below the first screen until the visitor approaches them. Do not delay the main image or content needed in the first screen. Remove only extra code, fonts, animations and repeated files that are genuinely unused. Keep form submission, visitor tracking, payments and other working connections intact. Load non-essential third-party widgets, which are tools supplied by another service such as a map or chat box, after the main content. Show a clear fallback if a map, video or other external tool fails. Reserve the correct space for images and cards before they load so buttons and text do not jump. Keep buttons responsive while background work finishes, and show a simple loading or error message instead of a blank screen. The style should remain [CURRENT BRAND FEELING]. After the changes, repeat the same phone and slow-connection test, compare it with the before list in plain language, and tell me which remaining delays come from services outside my control.
Vous construisez déjà ? Collez ceci dans votre projet. Vous partez de zéro ? Ouvrez un compte gratuit sur un outil compatible ci-dessous.
Créez-le sur
Ce que cela crée
- Un examen de la vitesse en langage simple avant et après
- Des images mieux dimensionnées et compressées pour différents écrans
- Un premier contenu plus rapide et un report des sections non essentielles
- Un espacement de page stable pendant le chargement des images et des cartes
- Des solutions de secours claires pour les widgets externes lents ou défaillants
Vérifiez que ça a marché
Collez le prompt, attendez la fin de la construction, puis vérifiez ceci — en langage simple, sans contrôle technique :
- Sur votre téléphone, le texte utile et l'action principale apparaissent avant que l'image du bas de page ne finisse de se charger
- Le menu et le bouton principal répondent pendant que les sections plus lentes sont encore en cours de chargement
- Le texte et les boutons ne sautent pas vers un endroit différent à mesure que les images apparaissent
- Les images restent suffisamment nettes et ne sont pas étirées
- Lors d'un test délibérément lent, la page affiche un message de chargement ou d'erreur utile au lieu de rester vide
- Vos formulaires, paiements, suivi des visiteurs et autres connexions requises fonctionnent toujours après les changements de vitesse
Il manque quelque chose ? C'est normal — demandez-le dans un court message de suivi plutôt que de relancer tout le prompt.
Étapes suivantes
Corriger d'abord la page la plus lourde
Lorsqu'une galerie, un menu ou une page de catalogue est encore sensiblement plus lent
Focus only on [PAGE NAME]. Identify its three biggest causes of waiting, fix the ones this app controls, and keep [ESSENTIAL FEATURE OR IMAGE QUALITY] intact. Do not change other pages. Repeat the same slow-phone test and explain the difference in plain language.
Vous saurez que ça a marché quand : La page choisie devient utilisable plus tôt sans perdre son contenu essentiel.
Rendre un widget lourd optionnel
Lorsqu'une carte, une vidéo, un chat ou un outil intégré ralentit la première vue
Replace the automatic loading of [WIDGET] with a lightweight preview and a clear [BUTTON LABEL] button. Load the real widget only after the visitor chooses it. If loading fails, show [FALLBACK INFORMATION OR LINK] instead of a blank space.
Vous saurez que ça a marché quand : La page se charge sans attendre le widget, qui s'ouvre toujours lorsqu'il est sollicité.
Empêcher les régressions de vitesse
Une fois que le site est suffisamment rapide
Add a repeatable performance check for the home page and [IMPORTANT PAGE] at a phone size. Flag newly added images that are unnecessarily large, layout that jumps while loading, and third-party scripts that delay the main content. Give me a short checklist to run after future changes.
Vous saurez que ça a marché quand : Vous disposez d'une vérification simple qui détecte les ralentissements courants avant la publication.
Attention à
- L'image principale ne doit pas être retardée. Charger l'image du premier écran tardivement peut rendre le site plus lent. Retardez uniquement le contenu qui commence en dessous du premier écran.
- La compression peut détruire des détails importants. Les photographes, les magasins et les entreprises agroalimentaires devraient comparer les images clés aux tailles téléphone et ordinateur avant d'accepter des fichiers plus petits.
- Les widgets tiers peuvent dominer l'attente. Une carte, une boîte de discussion ou une vidéo lourde peut rester lente même après la correction du reste. Retardez-le, affichez un espace réservé ou supprimez-le s'il ne justifie pas son coût.
- Votre visite répétée peut sembler plus rapide que la première visite d'un client. Testez dans une fenêtre privée ou un navigateur vidé afin que les fichiers enregistrés ne masquent pas la véritable expérience de la première visite.
- Les changements de performance peuvent briser des dépendances silencieuses. Retestez les formulaires, les paiements, le suivi des visiteurs et la connexion plutôt que de supposer qu'une page plus rapide fait toujours tout.
Notes par plateforme
Les trois plates-formes principales peuvent optimiser les pages et les fichiers que votre application contrôle, mais aucune ne peut rendre rapide le réseau d'un visiteur ou un widget tiers lent. La recherche de site publié et l'examen des performances de Lovable peuvent confirmer les problèmes courants. La configuration d'application standard de v0 dispose d'outils puissants pour les images, les polices et le chargement lorsqu'ils sont correctement configurés. Base44 gère le système qui publie l'application, alors concentrez-vous sur vos images, la structure de votre page et vos connexions, et demandez-lui de nommer tout ce que la plate-forme gérée ne lui permet pas de changer.
Dépensez moins de crédits
Chaque plateforme vous facture le travail que fait son IA — la habitude la moins chère est donc de réfléchir avant de construire. Ces six règles éliminent l'essentiel du gaspillage, quelle que soit la plateforme.
- Planifiez d'abord dans un chat gratuit. Esquissez le tout dans ChatGPT, Claude ou Gemini — pages, fonctionnalités, ce que chaque formulaire collecte, l'apparence voulue. Réfléchir là-bas est gratuit ; réfléchir dans un builder est facturé.
- Partez d'un prompt écrit, pas d'une phrase. « Fais-moi un site » est la phrase la plus chère de la construction avec l'IA. Un premier prompt complet — comme ceux de ce site — évite des dizaines de corrections.
- Ne soyez pas paresseux sur les détails. Chaque détail omis revient en correction payante. Nom de l'entreprise, couleurs, chaque page, chaque champ de formulaire, ce qui se passe après l'envoi — mettez tout dans le premier prompt.
- Ensuite, un changement par message. « Corrige l'en-tête, et le formulaire, et les couleurs » crée un enchevêtrement plus coûteux à démêler que ce qu'il a économisé.
- Bloqué ? Arrêtez de rustiner. Si la même correction échoue environ trois fois, n'en envoyez pas une quatrième — décrivez plutôt l'état final souhaité de toute la section dans un nouveau message.
- Commencez gratuitement. Passez au payant quand il vous en faut plus. Utilisez le quota gratuit pour créer et explorer votre première version. Passez au payant quand vous avez besoin de plus d’utilisation ou de fonctionnalités payantes, et vérifiez le coût des services connectés avant le lancement.
Les prompts de cette page sont écrits pour faire l'essentiel de ce travail à votre place — c'est tout leur intérêt.
Lire le guide completPlaybooks associés
Prompts associés
Fait partie de ces kits
Dernière vérification: 2026-07-27