Workload Units (WU) in deiner Bubble-App optimieren

So reduzierst du den Verbrauch von Workload Units (WU) in deiner bubble.io-App

Im April 2023 kündigte Bubble eine Preisänderung an, die den Schwerpunkt für App-Entwickler verschob. Statt den Kapazitätsverbrauch zu minimieren, geht es jetzt darum, den Verbrauch von Workload Unit (WU) zu reduzieren.

Da das Abrechnungsmodell von Bubble mit Workload Units (WU) seit dem 1. Oktober 2024 vollständig umgesetzt ist, wird es Zeit, den größtmöglichen Nutzen aus deinem Bubble-Abonnement zu ziehen. Das neue System verknüpft App-Aktionen wie Seitenaufrufe, API-Aufrufe, Datenbankänderungen und Workflows mit dem WU-Verbrauch. Das klingt vielleicht überwältigend, aber keine Sorge: Hier sind 11 praktische Tipps plus ein Bonus, um den WU-Verbrauch deiner App zu optimieren.

1. Eine neue Denkweise für die Bubble-Entwicklung
2. Vermeide verschachtelte Suchabfragen
3. Begrenze Auto-Binding
4. Vermeide erweiterte Filter
5. Nutze nach Möglichkeit kürzere Listen
6. Blende Elemente standardmäßig aus
7. Optimiere Bedingungen
8. Variablen zur Wiederverwendung von Daten
9. Nutze Browser-Tools
10. Optimiere API-Aufrufe
11. Den count-Operator verstehen
12. Bonustipp: Denke wie ein Entwickler

Eine neue Denkweise bei der Bubble-Entwicklung

Der Schlüssel zu einem geringeren WU-Verbrauch liegt darin, sowohl Performance als auch Effizienz im Blick zu behalten. Frage dich vor der Umsetzung jeder Funktion:

1. Lässt sich dieser Prozess vereinfachen?
2. Ist diese Information wirklich notwendig?
3. Habe ich die Auswirkungen auf den WU-Verbrauch gemessen?

Effizienz bedeutet oft Vereinfachung. Je weniger Aktionen deine App ausführt, desto weniger WUs verbraucht sie. Verlasse dich aber nicht auf Annahmen: Teste und miss immer, um das zu bestätigen

11 Tipps, um Workload Units (WUs) in deiner Bubble-App zu optimieren

1. Vermeide verschachtelte Suchabfragen

Verschachtelte Suchabfragen entstehen, wenn eine Suche von den Ergebnissen einer anderen abhängt. Wenn du beispielsweise eine Repeating Group hast, die nach Nachrichten sucht, und innerhalb derselben Gruppe eine weitere Suche ausführst, ist das eine verschachtelte Suchabfrage.

Warum das ein Problem ist:

Verschachtelte Suchabfragen führen zu mehreren Datenbankabfragen und erhöhen den WU-Verbrauch erheblich.

So löst du es:

• Füge deiner Datenbank ein passendes Feld hinzu, um Ergebnisse bereits zu Beginn zu filtern.
• Filtere in einer einzigen Abfrage, statt mehrere Suchen zu verschachteln.

2. Begrenze Auto-Binding

Auto-Binding ist eine praktische Bubble-Funktion, kann aber viele WUs kosten. Jedes Mal, wenn ein automatisch gebundenes Feld aktualisiert wird, löst es einen Datenbankvorgang aus.

Bessere Alternative:

Nutze eine Speichern-Schaltfläche, um alle Änderungen in einem einzigen Vorgang anzuwenden und so die Zahl der Datenbankschreibvorgänge zu reduzieren. Das ist besonders bei Formularen mit mehreren Feldern hilfreich.

3. Vermeide erweiterte Filter

Erweiterte Filter laden alle Daten ins Frontend und verarbeiten sie anschließend im Browser des Nutzers. Das erhöht den WU-Verbrauch und verringert die Performance.

Optimiere das, indem du:

• Deine Datenbank mit Tags oder Option Sets strukturierst, um besser auf Abfrageebene zu filtern.
• Suchbedingungen verwendest, um Abfragen zu verfeinern, bevor sie das Frontend erreichen.

4. Sei vorsichtig mit leeren Suchbedingungen

Wenn du die Option Ignore Empty Constraints in deinen Suchabfragen verwendest, kann Bubble unnötige Daten abrufen, wenn eine Bedingung noch nicht festgelegt ist.

Lösung:

• Nutze Bedingungen, um das Laden der Datenquelle zu verzögern, bis alle erforderlichen Suchbedingungen gültig sind.
• Stelle sicher, dass Suchabfragen nur ausgelöst werden, wenn relevante Daten vorhanden sind.

5. Nutze nach Möglichkeit kürzere Listen

Kürzere Listen von Einträgen abzurufen ist häufig WU-effizienter, als wiederholt Suchabfragen auszuführen.

Beispiel:

• Speichere eine kurze Liste zusammengehöriger Daten im übergeordneten Objekt, statt in einer separaten Tabelle nach zugehörigen Einträgen zu suchen.
• Vermeide lange Listen, beispielsweise mit 200+ Einträgen, in einem einzelnen Objekt, da diese zu größeren Ladevorgängen führen können.

6. Blende Elemente standardmäßig aus

Das Caching-System von Bubble lädt beim Seitenaufruf nur das, was sichtbar ist. Verborgene Gruppen oder Elemente, die nicht sofort benötigt werden, können dadurch WUs sparen.

So setzt du es um:

• Setze Gruppen und Elemente auf „not visible on page load“ (beim Laden der Seite nicht sichtbar).
• Mache sie erst sichtbar, wenn bestimmte Bedingungen ausgelöst werden.

7. Optimiere Bedingungen

Bubble wertet Bedingungen von links nach rechts aus. Schlägt eine Bedingung früh fehl, werden die nachfolgenden Bedingungen nicht ausgeführt.

Bewährte Vorgehensweise:

Platziere die einfachsten und am wenigsten ressourcenintensiven Bedingungen zuerst, um unnötige Vorgänge zu vermeiden.

8. Nutze Variablen zur Wiederverwendung von Daten

Daten mehrfach für verschiedene Elemente abzurufen verbraucht unnötig WUs. Speichere häufig verwendete Daten stattdessen in Variablen oder Custom States.

So gehst du vor:

• Nutze verborgene Gruppen oder Repeating Groups, um Daten zu speichern.
• Verweise auf diese gespeicherten Daten, statt neue Suchabfragen auszuführen.

9. Nutze Browser-Tools

Die Entwicklerkonsole in Browsern wie Chrome kann dir helfen, die Performance deiner App zu überwachen.

Wichtige Bereiche zur Prüfung:

• Geladene Elemente: Reduziere unnötige Elemente, damit Seiten weniger Daten laden müssen.
• Netzwerk-Registerkarte: Beobachte Datenabrufe und erkenne umfangreiche Anfragen.
• Umfang der Datenabrufe: Analysiere die Größe der Suchergebnisse und optimiere die Abfragen entsprechend.

10. Optimiere API-Aufrufe

API-Aufrufe können große Datensätze zurückgeben, auch wenn du nur einen Teil der Daten benötigst.

Verbessere die API-Effizienz, indem du:

• Paginierung oder Begrenzungen verwendest, um nur die benötigten Daten abzurufen.
• API-Antworten sortierst und filterst, bevor sie an Bubble gesendet werden.

11. Den :count-Operator verstehen

Der :count-Operator ist ein gutes Beispiel dafür, wie der WU-Verbrauch unerwartet variieren kann. Stell dir vor, du möchtest ein Element unter der Bedingung anzeigen, dass Search:count is 0. Obwohl in der Dokumentation von Bubble steht, dass ein :count-Vorgang 0,20 WUs verbraucht, zeigen Praxistests ein anderes Bild.

Das haben wir beobachtet:

1. Search (1,000 items):count is 0

- WU-Verbrauch: 3,86

- Warum? Dieser Vorgang lädt die ersten 10 Einträge vom Server herunter, bevor die Anzahl ausgewertet wird, und führt dadurch zu unerwarteten WU-Spitzen.

2. Search (1,000 items):first item is empty

- WU-Verbrauch: 0,69

- Warum? Dabei wird nur ein Eintrag vom Server heruntergeladen, was deutlich effizienter ist.

3. Search (1,000 items):count≥1 (≤1)

- WU-Verbrauch: 0,20

- Warum? Dieser Vorgang ruft die Anzahl direkt ab, ohne Einträge herunterzuladen.

Bonustipp: Denke wie ein Entwickler

Die Denkweise eines Entwicklers kann viel dazu beitragen, den WU-Verbrauch zu optimieren.

Was du tun kannst:

• Prüfe die Serverprotokolle von Bubble, um Vorgänge mit hohem WU-Verbrauch zu verfolgen.
• Prüfe Workflows und Datenbankabfragen regelmäßig auf Effizienz.
• Teste verschiedene Implementierungen und miss ihre Auswirkungen auf den WU-Verbrauch.

Die wichtigsten Erkenntnisse

• Vereinfache Workflows und vermeide redundante Suchabfragen, um den WU-Verbrauch zu minimieren.
• Nutze das Datenbankdesign strategisch, um die Abhängigkeit von erweiterten Filtern und verschachtelten Suchabfragen zu reduzieren.
• Nutze Browser-Tools und Serverprotokolle, um deine App zu überwachen und zu optimieren.
• Experimentiere, miss und verbessere kontinuierlich, um die effizienteste Umsetzung zu erreichen.

Hat deine Bubble-App eine schlechte Performance und einen hohen WU-Verbrauch? Buche ein Gespräch und besprich mit uns, wie du die Performance deiner App verbessern kannst! 🚀