Zum Hauptinhalt springen

​
App-Leistung prüfen

Die Leistung deiner App beeinflusst, wie schnell sie lädt und auf Nutzer reagiert. Du kannst das mit den Developer Tools deines Browsers messen. Zu den wichtigsten Leistungsmetriken gehören: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und Interaction to Next Paint (INP).
Prüfe immer deine veröffentlichte App, nicht die Builder-Vorschau. Leistungs-Scores sind am genauesten, wenn du die Live-Version auf Desktop und Mobil testest.
Beispiel der Chrome DevTools mit Leistungsmetriken für LCP, CLS und INP. Beispiel der Chrome DevTools mit lokalen Leistungsmetriken für LCP, CLS und INP.

​
App-Leistung optimieren

Optimiere die Leistung deiner App, indem du dich auf die wichtigsten Metriken konzentrierst, die beeinflussen, wie schnell sie lädt, läuft und reagiert. Jede hebt einen anderen Aspekt der Nutzererfahrung hervor, und du kannst den Base44-KI-Chat bitten, sie direkt zu optimieren.

​
Largest Contentful Paint (LCP)

LCP misst die Zeit, die das größte sichtbare Element (Bild, Text oder Video) above the fold zum Erscheinen braucht. So optimierst du LCP:
  • Halte den sichtbaren Inhalt above the fold leicht und schnell.
  • Verschiebe schwere Elemente (Videos, iFrames, Grids, Listen) unter die Falz.
  • Optimiere und komprimiere Bilder vor dem Hochladen.
  • Verwende Lazy Loading für Bilder außerhalb des Bildschirms.
KI-Prompt: “Aktiviere Lazy Loading für Bilder und Videos unter der Falz.”
Die KI fügt automatisch die richtigen Attribute oder dynamischen Imports hinzu.

​
Cumulative Layout Shift (CLS)

CLS misst unerwartete Bewegungen im Layout deiner App während des Ladens. So optimierst du CLS:
  • Größendefinitionen hinzufügen: Gib jedem Bild und Video feste Höhe und Breite, damit sie beim Laden nicht verrutschen.
  • Eigene Schriftarten optimieren: Verwende die Eigenschaft font-display: swap; in deinem CSS, um unsichtbaren Text während des Schriftladens zu vermeiden.
  • Platz für dynamische Inhalte reservieren: Lege feste Räume für Werbung, Pop-ups oder alles fest, was nach dem ersten Rendern lädt.
  • DOM-Aktualisierungen minimieren: Begrenze Layout-Änderungen durch automatische Skripte.
KI-Prompt:
  • „Setze feste Höhe und Breite für alle Medienelemente.”
  • „Verhindere Layout-Verschiebungen während des Schriftladens.”
Die KI aktualisiert automatisch die Komponentenstile oder das CSS.

​
Interaction to Next Paint (INP)

INP misst, wie schnell deine App auf Klicks, Tippen oder Tastatureingaben reagiert. So optimierst du INP:
  • Vermeide lang laufende Skripte, die durch Nutzeraktionen ausgelöst werden.
  • Verzögere oder entferne nicht essenzielle Skripte aus dem ersten Laden.
  • Halte Layouts einfach und Animationen minimal.
  • Überwache die Reaktionsfähigkeit im Tab Performance.
KI-Prompt: „Verzögere nicht kritische Skripte bis nach der Interaktion” oder „Vereinfache Animationen für bessere Reaktionsfähigkeit.” Die KI optimiert während der Generierung die Codeausführungsreihenfolge und die Animationen.

​
Content Delivery Network (CDN) und Caching

Ein Content Delivery Network (CDN) liefert Kopien deiner App von Servern, die dem Standort der Nutzer am nächsten sind, und verbessert so die Ladezeiten. Base44 verwendet automatisch das Cloudflare CDN für Caching und Auslieferung.
KI-Prompt: „Veröffentliche meine App erneut, um zwischengespeicherte Dateien zu aktualisieren.”
Das erneute Veröffentlichen löst die automatische Cloudflare-Cache-Aktualisierung von Base44 aus.
Derzeit kannst du den CDN-Cache nicht manuell leeren.

​
FAQs

Klicke unten auf eine Frage, um mehr über die Optimierung der Seitenleistung zu erfahren.
Du kannst die Leistung deiner App mit Chrome DevTools oder Google PageSpeed Insights prüfen.Mit Chrome prüfen:
  • Schnelle Prüfung:
    1. Öffne deine veröffentlichte App.
    2. Klicke mit der rechten Maustaste irgendwo und wähle Inspect.
    3. Im rechten Panel zeigt Chrome lokale Metriken für Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und Interaction to Next Paint (INP) an.
      Das gibt dir einen sofortigen Überblick darüber, wie deine Live-Seite performt.
  • Detaillierte Prüfung:
    1. Öffne die Chrome DevTools.
    2. Klicke auf den Tab Performance.
    3. Klicke auf Record, lade die Seite neu und stoppe die Aufzeichnung, sobald sie fertig geladen ist.
    4. Sieh die vollständige Leistungszeitleiste an, einschließlich First Contentful Paint (FCP), LCP und Hauptthread-Aktivität.
Mit PageSpeed prüfen:
  1. Gehe zu PageSpeed Insights.
  2. Gib die URL deiner App ein und klicke auf Analyze.
  3. Sieh die Abschnitte Insights und Diagnostics durch, um die Leistung deiner App zu verbessern.
Strebe diese empfohlenen Werte für das beste Erlebnis an:
  • Largest Contentful Paint (LCP): 2,5 Sekunden oder weniger.
  • Cumulative Layout Shift (CLS): 0,1 oder weniger.
  • Interaction to Next Paint (INP): 200 Millisekunden oder weniger.
Diese Benchmarks folgen Googles Standards für exzellente Website-Leistung und helfen sicherzustellen, dass deine App schnell läuft, stabil bleibt und reibungslos reagiert.
Ein niedriger Leistungs-Score bedeutet meist, dass einige Elemente deiner Seite länger zum Laden brauchen als erwartet. Schwere Inhalte above the fold, große Skripte oder unoptimierte Medien sind die häufigsten Ursachen.So behebst du das Problem:
  1. Führe deine App durch Google PageSpeed Insights und prüfe:
    • Render-blockierende Ressourcen: Verschiebe Skripte auf async oder defer.
    • Große JavaScript-Bundles: Vereinfache oder teile Anbieter-Code.
    • Unoptimierte Bilder: Komprimiere und lade sie erneut hoch.
  2. Öffne in den Chrome DevTools den Tab Network und klicke auf Reload, um in Echtzeit zu sehen, wie deine Dateien laden.
    • Achte auf Dateien, die länger als 1–2 Sekunden brauchen — diese verlangsamen wahrscheinlich deine App.
Schnelle Lösungen:
  • Verschiebe Videos, Datenlisten oder schwere Abschnitte unter die Falz.
  • Komprimiere und ändere die Größe von Bildern vor dem Hochladen.
  • Entferne ungenutzte Skripte oder CSS.
  • Veröffentliche deine App erneut, um das CDN-Caching zu aktualisieren.
KI-Prompt: „Optimiere meine App für schnelleres LCP und INP” oder „Reduziere die Ladegröße above the fold.” Die KI wendet automatisch Lazy Loading und Skript-Verzögerung an, wo relevant.
  • Hoste Videos extern (z. B. auf Vimeo oder YouTube).
  • Füge loading="lazy" zu eingebetteten Videos oder iframes hinzu.
  • Platziere Videos unter der Falz, um Text und Bilder zu priorisieren.
  • Deaktiviere autoplay oder loop für große Hintergrundvideos.
Mobile Tests laufen in langsameren Netzwerken und auf langsameren Geräten, daher sind die Scores meist niedriger als auf dem Desktop. Konzentriere dich darauf, dein LCP und INP zuerst für Mobil zu optimieren, indem du schwere Medien reduzierst, nicht kritische Skripte verzögerst und Layouts vereinfachst.
Diese Seite wurde mit KI übersetzt. Für die genauesten und aktuellsten Informationen siehe die englische Version.