Passer au contenu principal

​
Vérifier les performances de votre application

Les performances de votre application déterminent la rapidité de chargement et de réponse aux utilisateurs. Vous pouvez les mesurer avec les Developer Tools de votre navigateur. Les indicateurs de performance clés incluent : Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) et Interaction to Next Paint (INP).
Vérifiez toujours votre application publiée, pas l’aperçu du builder. Les scores de performance sont les plus précis lors du test de la version en direct sur ordinateur et sur mobile.
Exemple de Chrome DevTools affichant les indicateurs de performance pour LCP, CLS et INP. Exemple de Chrome DevTools affichant les indicateurs de performance locaux pour LCP, CLS et INP.

​
Optimiser les performances de votre application

Optimisez les performances de votre application en vous concentrant sur les indicateurs clés qui influent sur la vitesse de chargement, d’exécution et de réponse. Chacun met en évidence un aspect différent de l’expérience utilisateur, et vous pouvez demander au chat IA Base44 de les optimiser directement.

​
Largest Contentful Paint (LCP)

Le LCP mesure le temps nécessaire pour qu’apparaisse le plus grand élément visible (image, texte ou vidéo) au-dessus de la ligne de flottaison. Pour optimiser le LCP :
  • Gardez le contenu visible au-dessus de la ligne de flottaison léger et rapide.
  • Déplacez les éléments lourds (vidéos, iFrames, grilles, listes) en dessous de la ligne de flottaison.
  • Optimisez et compressez les images avant de les téléverser.
  • Utilisez le chargement différé pour les images hors écran.
Demandez à l’IA : « Appliquez le chargement différé aux images et vidéos en dessous de la ligne de flottaison. »
L’IA ajoutera automatiquement les attributs ou les imports dynamiques appropriés.

​
Cumulative Layout Shift (CLS)

Le CLS mesure les mouvements inattendus dans la mise en page de votre application pendant le chargement. Pour optimiser le CLS :
  • Ajouter des définitions de taille : donnez à chaque image et vidéo une hauteur et une largeur fixes pour éviter les décalages au chargement.
  • Optimiser les polices personnalisées : utilisez la propriété font-display: swap; dans votre CSS pour éviter le texte invisible pendant le chargement des polices.
  • Réserver de l’espace pour le contenu dynamique : fixez des espaces dédiés pour les publicités, pop-ups ou tout élément se chargeant après le rendu initial.
  • Limiter les mises à jour du DOM : réduisez les changements de mise en page causés par des scripts automatiques.
Demandez à l’IA :
  • « Définissez une hauteur et une largeur fixes pour tous les éléments multimédias. »
  • « Empêchez les décalages de mise en page pendant le chargement des polices. »
L’IA mettra automatiquement à jour les styles des composants ou le CSS.

​
Interaction to Next Paint (INP)

L’INP mesure la vitesse à laquelle votre application répond aux clics, aux pressions ou aux entrées clavier. Pour optimiser l’INP :
  • Évitez les scripts longs déclenchés par les actions utilisateur.
  • Différez ou supprimez les scripts non essentiels du chargement initial.
  • Gardez les mises en page simples et les animations minimales.
  • Surveillez la réactivité dans l’onglet Performance.
Demandez à l’IA : « Différez les scripts non critiques jusqu’après l’interaction » ou « Simplifiez les animations pour une meilleure réactivité ». L’IA optimisera l’ordre d’exécution du code et les animations lors de la génération.

​
Content Delivery Network (CDN) et mise en cache

Un Content Delivery Network (CDN) délivre des copies de votre application depuis les serveurs les plus proches de l’utilisateur, ce qui améliore les temps de chargement. Base44 utilise automatiquement Cloudflare CDN pour la mise en cache et la diffusion.
Demandez à l’IA : « Republiez mon application pour rafraîchir les fichiers en cache. »
La republication déclenche la mise à jour automatique du cache Cloudflare par Base44.
Actuellement, vous ne pouvez pas vider le cache CDN manuellement.

​
FAQ

Cliquez sur une question ci-dessous pour en savoir plus sur l’optimisation des performances du site.
Vous pouvez vérifier les performances de votre application avec Chrome DevTools ou Google PageSpeed Insights.Pour vérifier avec Chrome :
  • Vérification rapide :
    1. Ouvrez votre application publiée.
    2. Faites un clic droit n’importe où et sélectionnez Inspect.
    3. Dans le panneau de droite, Chrome affiche les indicateurs locaux pour Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) et Interaction to Next Paint (INP).
      Cela vous donne un aperçu instantané des performances de votre page en direct.
  • Vérification détaillée :
    1. Ouvrez Chrome DevTools.
    2. Cliquez sur l’onglet Performance.
    3. Cliquez sur Record, rechargez la page et arrêtez l’enregistrement une fois le chargement terminé.
    4. Examinez la chronologie complète des performances, notamment First Contentful Paint (FCP), LCP et l’activité du thread principal.
Pour vérifier avec PageSpeed :
  1. Allez sur PageSpeed Insights.
  2. Saisissez l’URL de votre application et cliquez sur Analyze.
  3. Examinez les sections Insights et Diagnostics pour des pistes d’amélioration.
Visez à atteindre ou dépasser ces scores recommandés pour la meilleure expérience :
  • Largest Contentful Paint (LCP) : 2,5 secondes ou moins.
  • Cumulative Layout Shift (CLS) : 0,1 ou moins.
  • Interaction to Next Paint (INP) : 200 millisecondes ou moins.
Ces références suivent les standards de Google pour une excellente performance de site et contribuent à ce que votre application soit rapide, stable et réactive.
Un score de performance bas signifie généralement que certains éléments de votre site mettent plus de temps à se charger que prévu. Le contenu lourd au-dessus de la ligne de flottaison, les gros scripts ou les médias non optimisés sont les causes les plus fréquentes.Pour résoudre le problème :
  1. Passez votre application à Google PageSpeed Insights et vérifiez :
    • Ressources bloquant le rendu : passez les scripts en async ou defer.
    • Bundles JavaScript volumineux : simplifiez ou découpez le code des dépendances.
    • Images non optimisées : compressez et téléversez à nouveau.
  2. Dans Chrome DevTools, ouvrez l’onglet Network et cliquez sur Reload pour voir comment vos fichiers se chargent en temps réel.
    • Repérez les fichiers qui mettent plus de 1 à 2 secondes à se charger — ils ralentissent probablement votre application.
Solutions rapides :
  • Déplacez les vidéos, listes de données ou sections lourdes en dessous de la ligne de flottaison.
  • Compressez et redimensionnez les images avant de les téléverser.
  • Supprimez les scripts ou CSS inutilisés.
  • Republiez votre application pour rafraîchir le cache CDN.
Demandez à l’IA : « Optimisez mon application pour un LCP et un INP plus rapides » ou « Réduisez la taille de chargement au-dessus de la ligne de flottaison ». L’IA appliquera automatiquement le chargement différé et le report de scripts là où c’est pertinent.
  • Hébergez les vidéos en externe (par exemple sur Vimeo ou YouTube).
  • Ajoutez loading="lazy" aux vidéos ou iframes intégrés.
  • Placez les vidéos sous la ligne de flottaison pour prioriser le texte et les images.
  • Désactivez la lecture automatique ou la boucle pour les grandes vidéos d’arrière-plan.
Les tests mobiles s’exécutent sur des réseaux et appareils plus lents, donc les scores sont généralement plus bas que sur ordinateur. Concentrez-vous d’abord sur l’optimisation de votre LCP et INP pour mobile en réduisant les médias lourds, en différant les scripts non critiques et en simplifiant les mises en page.
Cette page a été traduite à l’aide de l’IA. Pour les informations les plus précises et à jour, consultez la version anglaise.