Dans l'univers du développement d'applications No-code, Bubble.io s'est rapidement imposé comme la plateforme de référence. Si vous êtes encore peu familier avec Bubble, je vous invite à consulter notre article de présentation :
→ Bubble.io : La création d'applications No-code en 2025
Dans cet article, nous allons explorer 7 techniques d'optimisation des performances de vos application Bubble.io, basées sur nos années d'expérience et les bonnes pratiques recommandées par les meilleurs experts du sujet.
Bien que largement plus accessible que la programmation traditionnelle, la création d'application ou modules avec Bubble vient avec un défi majeur : les performances.
Votre rôle en tant que développeur (Bubble ou non) c'est de proposer à vos utilisateurs une application fluide et fonctionnelle et d'éviter un maximum les points de friction qui pourraient nuire à la rétention client.
Une application lente, c'est l'assurance d'un projet qui va droit dans le mur.
Quelques chiffres pour comprendre l'impact que les performances ont sur vos utilisateurs :
🔥 Le mot de l'expert : Comme l'explique Petter Amlie, expert Bubble et auteur de The Ultimate Guide to Bubble Performance : "Performance is a war of a thousand battles" - l'optimisation des performances est la somme cumulée de nombreuses petites améliorations et non une solution miracle unique.
Voyons maintenant comment gagner ces batailles - une par une.
La base de données est l'un des facteurs limitants principal des performances de votre application Bubble. Voici comment l'optimiser :
Créez des types de "données satellites" pour séparer les informations fréquemment recherchées de celles rarement utilisées :
💡 Astuce pratique : Pour un blog, séparez vos articles en deux types de données : un type "ArticlePreview" léger (titre, image principale, date et auteur) et un type "ArticleContent" plus lourd contenant le contenu complet. Votre page ou vos tableaux chargeront beaucoup plus rapidement !
Chaque niveau d'imbrication (une donnée qui contient une liste de données qui contiennent elles-mêmes des données...) multiplie le nombre de requêtes nécessaires.
Limitez-vous à 2-3 niveaux maximum.
Les Option Sets dans Bubble.io sont des ensembles prédéfinis de valeurs. L'avantage est qu'ils sont chargés automatiquement avec le code de votre application et ne nécessitent pas de requêtes supplémentaires. Utilisez-les pour :
Les Repeating Groups (et Tables) sont essentiels mais peuvent rapidement devenir des goulots d'étranglement pour vos performances. Ils sont d'ailleurs la cause N°1 des temps de chargement interminables sur les Apps mal configurées.
N'affichez que ce dont l'utilisateur a besoin immédiatement :
💡 Astuce pratique : Un Repeating Group contenant 50 cellules avec chacune 10 éléments génère 500 éléments au total dans le DOM. Réduisez ce nombre à 10 cellules et vous ne gérerez plus que 100 éléments, améliorant considérablement les performances de rendu.
Lorsque votre application ou vos tableaux chargent, chaque élément dans une cellule de Repeating Group (ou Table) est multiplié par le nombre total de cellules. Simplifiez au maximum le contenu de chaque cellule.
Ce point rejoint les structures imbriquées expliquées dans la base de données. Une recherche dans chaque cellule d'un Repeating Group multiplie le nombre de requêtes :
⚠️ Attention : Les Repeating Group / Tables présentent un piège pour les développeurs Bubble débutants. En phase de développement avec peu de données, tout semble rapide, mais en production avec des centaines d'enregistrements, votre application peut devenir inutilisable.
Comme mentionné précédemment, 53% des utilisateurs quittent un site / une App qui met plus de 3 secondes à charger. Dans ce contexte, une page qui charge vite n'est pas une nécessité, c'est une obligation.
Contrairement aux idées reçues, une application "One page" n'est pas toujours la meilleure approche. Tout dépend évidemment du type d'application que vous cherchez à créer.
✅ Solution : Utilisez l'onglet Network des DevTools de Chrome (Ctrl+Maj+J) pour identifier les ressources les plus volumineuses de votre application. En optimisant simplement les 3-5 plus gros fichiers, vous pouvez souvent réduire le temps de chargement de 30-40%.
Ne chargez pas tout dès le départ :
Bubble offre la possibilité de traiter les données côté serveur ou côté client. Trouver le bon équilibre est crucial :
💡 Astuce d'optimisation : Pour les recherches fréquentes sur des ensembles de données limités, considérez l'utilisation du filtrage côté client. Si votre liste contient 50 éléments, filtrer côté client sera instantané, tandis qu'une nouvelle requête au serveur prendra plusieurs centaines de millisecondes.
Bubble applique les changements visuels immédiatement côté client avant que le serveur ne termine le traitement. Exploitez cette fonctionnalité pour créer une impression de réactivité :
✅ Exemple pratique : Disons que l'utilisateur veut créer une nouvelle entrée dans la base de données. Lorsqu'il clique sur le bouton pour créer, on va séparer le workflow en 2 étapes:
→ 1 - Côté serveur : Modification base de données, lancer le processus de mise à jour en arrière plan.
→ 2 - Côté client : Aspect visuel, donc faire que le bouton s'active visuellement
Les workflows sont le moteur de votre application. Les rendre efficaces est essentiel :
✅ Solution : Créez un élément réutilisable invisible appelé "actions" qui contient tous vos événements personnalisés fréquemment utilisés. Placez cet élément sur chaque page pour accéder facilement à ces workflows partout dans votre application.
✅ Solution : Mettez en place des barres de progression, des messages informatifs et jouez avec l'interface afin de rendre les processus fluides pour vos utilisateurs.
Pour les opérations lourdes qui n'ont pas besoin d'être immédiates :
⚠️ Important : Depuis fin 2023 et l'introduction de la métrique Workload (WU) par Bubble, "Schedule API Workflow on a list" est généralement plus efficace que les workflows récursifs pour les opérations en masse, car il consomme moins de WU et s'exécute en parallèle.
On ne peut pas améliorer ce qu'on ne mesure pas :
Chrome DevTools offre plusieurs fonctionnalités essentielles :
💡 Astuce pratique : Pour une analyse précise, testez toujours vos performances en navigation privée ou après avoir vidé le cache, en utilisant l'option "Empty Cache and Hard Reload" de Chrome. Cela reproduit l'expérience d'un nouvel utilisateur visitant votre application pour la première fois.
Les performances varient considérablement selon les appareils :
Concentrez-vous sur les métriques qui impactent réellement l'expérience utilisateur :
L'optimisation des performances est importante, certes, mais elle ne doit pas devenir une obsession paralysante :
✅ Approche recommandée : Traitez l'optimisation des performances comme une fonctionnalité dans votre backlog. Il est préférable de lancer une application fonctionnelle pour rapidement tester son produit et adapter par la suite, plutôt que de passer des mois sur son application et d'attendre que tout soit parfait.
Optimiser les performances d'une application Bubble.io n'est pas une tâche ponctuelle mais un processus continu. Chaque décision de conception, chaque structure de données et chaque workflow contribue à l'expérience globale.
En appliquant ces 7 techniques essentielles du mieux que vous pouvez, vous êtes sûr d'améliorer les performances globales de votre application.
💙 Le mot de la fin : N'oubliez pas que l'objectif n'est pas de créer l'application la plus rapide du monde, mais une application suffisamment performante pour que vos utilisateurs n'aient même jamais à y penser...
