Nous avons récemment découvert que l'un des sujets les plus brûlants sur le forum de Bubble concerne les utilisateurs ayant des difficultés avec un éditeur Bubble lent ou rencontrant des plantages de navigateur lors de l'utilisation de l'éditeur Bubble.

Ceci n'est pas surprenant. Chaque utilisateur de Bubble, nous y compris, a rencontré ce problème à un moment donné. Pour défendre Bubble, l'éditeur Bubble est une véritable centrale nucléaire. Il gère d'innombrables éléments, workflows et pages. Naturellement, il ne peut pas être aussi agile qu'un bloc-notes en ligne basique, n'est-ce pas?

Cela dit, chez Flusk, nous avons toujours relevé ce défi. Étant de grands fans de Bubble, nous avons développé plusieurs techniques pour améliorer la vitesse et la fiabilité de l'éditeur Bubble. Oui, le forum regorge d'astuces. Mais les conseils sont dispersés. Ainsi, nous avons élaboré cet article, rassemblant nos meilleurs conseils pour booster les performances de votre éditeur Bubble!
‍

Symptômes

‍

Avant de plonger dans les remèdes, diagnostiquons le problème. Cet article s'adresse à ceux qui :

• Trouvent l'éditeur Bubble lent ou avec des retards
• Rencontrent des plantages fréquents de l'éditeur ou de l'onglet du navigateur
• Travaillent surtout sur des applications mono-page (SPA) ou de grandes applications

Si cela vous évoque quelque chose, vous êtes au bon endroit!

‍

Cependant, si vous rencontrez les problèmes suivants, pensez à vérifier la page de status de Bubble ou à signaler un bug :

• L'alerte "Désolé, nous avons rencontré un bug temporaire et ne pouvons pas traiter votre demande".
• Des réponses lentes ou saccadées de l'éditeur, possiblement dues à une surcharge momentanée des serveurs de Bubble.

‍

Pourquoi l'éditeur Bubble est-il lent?

‍

Une brève introduction aux mécanismes de l'éditeur Bubble peut nous éclairer sur les solutions que nous proposons.

L'éditeur Bubble est comparable à un couteau suisse. Il doit afficher tous les éléments (visibles ou non) de vos pages d'application efficacement. Changement entre les pages? L'éditeur garde en cache les éléments précédents pour garantir des transitions rapides. De plus, les mises à jour en temps réel sont essentielles. Si des collègues apportent des modifications, ils doivent être immédiatement informés. De même, vos modifications doivent être sauvegardées rapidement. Ajoutez à cela, l'intégralité de la base de données est à un clic de distance, et il y a un rapporteur de problème vérifiant chaque flux de travail ou propriété d'élément.

La majeure partie de cette action se déroule dans le navigateur, consommant d'importantes ressources. Le CPU (le cerveau de votre ordinateur) et la RAM (mémoire à court terme) jouent un rôle clé.

‍

Solutions

‍

Voici des stratégies pour améliorer l'éditeur Bubble, allant des corrections rapides aux solutions à long terme.

‍

1. Réinitialisez le Cache de votre Navigateur

‍

Vider le cache dans Chrome.Effacer votre cache et recharger complètement la page peut faire des merveilles.

Comment? Si vous éditez avec Google Chrome :

• Faites un clic droit sur la page web et choisissez 'Inspecter'.
• Lorsqu'une fenêtre avec les éléments de la page apparaît, cliquez longuement sur le bouton de rafraîchissement.
• Une liste d'options devrait apparaître ; choisissez 'Vider le cache et recharger complètement'.

Bien que cette méthode soit efficace occasionnellement, elle traite principalement des symptômes plutôt que du problème fondamental.

‍

‍

2. Nettoyez la RAM de votre Ordinateur

‍

Cette technique est similaire à l'astuce précédente. En nettoyant la RAM de votre ordinateur, vous offrez à votre système un nouveau départ.

Méthodes pour désencombrer votre RAM :

• Fermez tous les onglets de l'éditeur Bubble.
• Terminez toutes les fenêtres du navigateur.
• Redémarrez votre ordinateur.

‍

Des outils tiers, comme CleanMyMac pour les utilisateurs de Mac, facilitent le nettoyage régulier de la RAM. Cependant, ces actions ne traitent pas les problèmes sous-jacents causant la lenteur et les éventuels plantages.

‍

3. Divisez votre Application

‍

L'utilisation de Reusable Elements peut considérablement améliorer l'efficacité de l'édition de pages complexes. Bien qu'ils accélèrent l'édition, ils peuvent également compliquer le processus. Ayant abordé d'énormes applications mono-page, je suis passé à l'utilisation d'éléments réutilisables. La triste réalité avec le stade actuel de Bubble est la suivante : à mesure que les éléments et les workflows s'accumulent, la réactivité de l'éditeur diminue, parfois jusqu'à un quasi-arrêt forçant un redémarrage du navigateur.

Diviser la page en groupes réutilisables et les éditer un par un, en revanche, n'alourdit pas l'utilisation de la RAM de la même manière, même si le nombre total d'éléments reste identique (ou est même légèrement supérieur, car le réutilisable est aussi un élément). Quelle est la différence? Jour et nuit, selon notre expérience.

Les éléments réutilisables servent généralement à contenir plusieurs éléments qui reviennent sur votre site. Par exemple, si votre application a plusieurs points de connexion, un élément réutilisable pour le formulaire d'inscription facilite les mises à jour et la maintenance.

Cependant, cette astuce est centrée sur l'utilisation de Reusable Elements pour des groupes qui ne se répètent pas nécessairement. Pourquoi? Comme souligné précédemment, l'utilisation de réutilisables réduit la lenteur de l'éditeur.

Pour des informations plus approfondies et des exemples pratiques liés à cela, consultez ce fil de discussion sur le forum.

‍

4. Désactivez le Issue Reporter

‍

Désactiver le rapporteur de problèmes peut soulager, car il consomme souvent une part importante des ressources de l'éditeur. Ajoutez ce paramètre d'URL à votre éditeur Bubble :

‍

&issues_off=true

‍

Cependant, soyez très prudent. Désactiver le rapporteur de problèmes peut vous permettre de publier des modifications en direct avec des problèmes non résolus, causant potentiellement des perturbations de l'application. Assurez-vous toujours de retirer ce paramètre après déploiement pour rester informé des problèmes émergents.

‍

5. Gérez vos Onglets

‍

Plusieurs onglets ouverts peuvent drainer considérablement les ressources et ralentir l'éditeur, surtout lorsque plusieurs onglets de l'éditeur Bubble sont actifs. Minimisez les onglets ouverts, ou utilisez des utilitaires comme The Marvelous Suspender.

6. Désactivez les Extensions lors de l'Utilisation de l'Éditeur

‍

Les extensions, en particulier sur Chrome, peuvent ralentir l'éditeur, en ajoutant à la charge du CPU.

Pour gérer cela, utilisez la fonction expérimentale de Chrome :

• Allez sur chrome://flags/
• Recherchez "Extensions Menu Access Control" et activez-le.
• Dans l'éditeur Bubble, désactivez les extensions inutiles en utilisant l'icône d'extension à côté de la barre de recherche.

Ou bien, utilisez un profil de navigateur sans extensions ou passez à un navigateur dédié.

‍

‍

7. Passez à Firefox

‍

Une recommandation non conventionnelle, mais souvent répétée dans divers fils, est de passer à Firefox à la place de navigateurs comme Chrome, Safari ou Edge. Les utilisateurs ont observé une amélioration notable des performances et de la vitesse de l'éditeur en optant pour Firefox.

La distinction de performance peut provenir des différents moteurs de rendu que chaque navigateur utilise. Firefox fonctionne sur le moteur "Gecko", tandis que Chrome s'appuie sur "Blink", initialement issu de WebKit. Ces moteurs peuvent donner des résultats variables dans l'interprétation et l'affichage du contenu, amenant certains sites web à fonctionner de manière optimale sur un moteur plutôt qu'un autre. De plus, tandis que Firefox utilise le moteur SpiderMonkey pour le traitement JavaScript, Chrome utilise V8. Étant donné les méthodes d'écriture de script uniques pour les sites web, le traitement d'un navigateur pourrait surpasser un autre.

‍

8. Désactiver l'Accélération Matérielle

‍

Une astuce de @aj11 sur le Forum suggère que désactiver l'accélération matérielle dans Chrome pourrait améliorer les performances.

À première vue, cela semble bénéfique, surtout pour des activités comme le streaming vidéo ou les jeux dans le navigateur. Cependant, pour Bubble, ce changement transfère la charge opérationnelle à votre carte graphique plutôt qu'à votre mémoire/CPU habituels. En général, votre mémoire et CPU réguliers peuvent gérer les tâches de Bubble plus efficacement.

‍

9. Mettez à Jour votre RAM

‍

Investir dans davantage de RAM peut s'avérer bénéfique à long terme, en particulier pour ceux qui sont plongés dans de longues sessions de développement ou utilisent fréquemment Bubble. La possibilité d'une mise à niveau de la RAM varie selon les ordinateurs - c'est simple pour certains, tandis que pour d'autres, comme certains Macbooks, cela pourrait ne pas être une option.

Une autre approche consiste à passer à un ordinateur de meilleure performance. Avant de faire le saut, pensez à discuter des choix matériels potentiels sur le Forum Bubble pour prendre des décisions éclairées.

‍

10. Utiliser un service comme Shadow

‍

Pour ceux qui travaillent principalement sur Bubble, migrer l'Éditeur Bubble vers un ordinateur cloud pourrait être une option à envisager. Cette méthode pourrait être la solution idéale pour ceux qui recherchent une option fiable et durable sans avoir besoin d'investir dans un nouvel ordinateur ou d'entreprendre des mises à niveau matérielles.

Nous recommandons un service comme Shadow For Makers, avec des forfaits commençant à un tarif abordable de 29,99 $ (https://shadow.tech/shadow-for-makers).

‍

Méthodes qui Ne Fonctionnent Pas

‍

Alors que nous avons mis en évidence des solutions fonctionnelles, abordons également et dissipons quelques idées reçues :

• Passer à un plan plus premium n'améliorera pas drastiquement les performances. Le problème sous-jacent est avec bubble/navigateur, et non pas le serveur.
• Pour ceux qui utilisent la puce Apple M1/M2, obtenir la version de Chrome spécialisée pour cette puce ne sera d'aucune aide. La version spécialisée a depuis été fusionnée dans la version standard de Chrome.

‍

Conclusion

‍

Notre objectif est de vous aider à développer de manière plus fluide et efficace. Nous sommes impatients de savoir quelle solution a été la plus efficace pour vous. Si vous vous trouvez dans une impasse ou si vous rencontrez des problèmes sporadiques, n'hésitez pas à contacter l'équipe de Bubble pour obtenir de l'aide.

‍

Aidez Bubble à s'Améliorer

‍

Exprimer des frustrations concernant un Éditeur Bubble lent ou des plantages fréquents, que ce soit entre pairs ou sur des forums, ne contribuera pas nécessairement à l'évolution de Bubble.

Au lieu de cela, adoptez une démarche constructive en signalant les problèmes rencontrés directement à Bubble, en veillant à détailler vos spécifications matérielles comme le type d'ordinateur, la RAM, etc. Cette approche proactive leur permet de traiter les problèmes fondamentaux et d'affiner l'éditeur sur la base des retours collectifs.

‍

Sources et Mentions:

• Using Reusable Elements to Split Your App. Credited to @peter: https://forum.bubble.io/t/a-guide-to-advanced-use-of-reusables/63884
• Resetting Chrome cache. Courtesy of @newhorizoncode: https://forum.bubble.io/t/clearing-cache-quickly-speed-up-bubble-editor/199238
• On Disabling Hardware Acceleration, a suggestion by @aj11: https://forum.bubble.io/t/bubble-editor-keep-crashing/247211/10

‍

‍