React-Native-App: Ladezeit um 50 % gesenkt

Erfahren Sie, wie wir die Ladezeit von 4,2 auf 2,1 Sekunden halbierten: Bundle-Analyse, Lazy Loading, Bildoptimierung und Zustand.

WellAlly-Redaktionsteam

Autorenprofil ansehen

12. Dezember 20258 Min. Lesezeit

Auf dieser Seite

In der hart umkämpften Welt mobiler Fitness-Apps zählt jede Sekunde. Unsere App „FitLife“ war funktionsreich, doch wir hatten ein wachsendes Problem: Nutzeranalysen zeigten eine Abbruchrate von 35 % während des ersten Ladebildschirms. Ein träger Start ist ein stiller Killer für das Nutzerengagement. Unsere Time-to-Interactive (TTI) betrug auf einem durchschnittlichen Android-Gerät schmerzhafte 4,2 Sekunden. Diese Fallstudie zeigt die konkreten Schritte, mit denen wir diese Ladezeit um 50 % gesenkt haben.

Wir gehen ein praktisches Optimierungskonzept in vier Schritten durch, das Sie auf Ihre eigenen React-Native-Projekte anwenden können. Dabei behandeln wir das Erkennen von Engpässen, das verzögerte Laden nicht kritischen Codes, das Verkleinern von Assets und die Wahl einer performanteren Bibliothek für das Zustandsmanagement.

Voraussetzungen:

Vertrautheit mit React Native und JavaScript.
Node.js und eine eingerichtete React-Native-Entwicklungsumgebung.
Werkzeuge: react-native-bundle-visualizer, react-native-fast-image.

Das ist wichtig, weil eine schnellere App nicht nur „nice to have“ ist; sie wirkt sich direkt auf Zufriedenheit, Bindung und letztlich den Erfolg Ihrer App aus.

Das Problem verstehen

Bevor wir einsteigen, mussten wir verstehen, warum unsere App so langsam war. Das Profiling zeigte mehrere Ursachen:

Ein aufgeblähtes JavaScript-Bundle: Mit 3,5 MB war unser JS-Bundle riesig. Es enthielt Bibliotheken und Komponenten, die für den ersten Bildschirm nicht benötigt wurden.
Vorzeitiges Laden aller Bildschirme: Unser Navigationsstapel importierte alle Bildschirmkomponenten im Voraus, selbst wenn Nutzerinnen und Nutzer sie nie aufriefen.
Nicht optimierte Bilder: Hochauflösende Trainingsbilder und Nutzeravatare wurden beim Start geladen und blockierten den Hauptthread.
Overhead beim Zustandsmanagement: Unser Redux-Setup war zwar leistungsfähig, brachte aber erheblichen Boilerplate-Code und ein großes initiales Zustandsobjekt mit, das die Hydration verlangsamte.

Unser Ansatz war einfach: messen, optimieren und erneut messen. Wir nahmen zuerst die niedrig hängenden Früchte ins Visier, um schnell die größten Gewinne zu erzielen.

Voraussetzungen

Um mitzugehen, benötigen Sie einige Werkzeuge, um Ihre App zu analysieren und zu optimieren.

Werkzeug zur Bundle-Analyse: Wir verwenden react-native-bundle-visualizer, um unser JS-Bundle zu untersuchen.
bash
```
# Install the visualizer
npm install --save-dev react-native-bundle-visualizer

# Generate bundle stats
npx react-native-bundle-visualizer
```
Dieser Befehl erzeugt eine interaktive Treemap Ihres Bundles und zeigt genau, welche Pakete den meisten Platz beanspruchen.
Bibliothek zur Bildoptimierung: Wir verwenden react-native-fast-image für besseres Caching und bessere Leistung.
bash
```
npm install react-native-fast-image
cd ios && pod install
```

Schritt 1: Das JS-Bundle analysieren und verschlanken

Unser erster Schritt war der Bundle-Visualizer. Das Ergebnis war aufschlussreich. Ein großer Teil unseres Bundles entfiel auf eine Diagrammbibliothek für den Trainingsverlauf und eine komplexe Animationsbibliothek für den Trainingsabschluss – beides wurde auf dem Startbildschirm nicht benötigt.

Was wir tun

Wir ermitteln die größten Abhängigkeiten in unserem JavaScript-Bundle, um zu sehen, was entfernt oder später geladen werden kann.

Umsetzung

Nach dem Ausführen von react-native-bundle-visualizer erhielten wir einen HTML-Bericht.

(Bildvorschlag: Ein Screenshot einer Treemap des Bundle-Analyzers, der große, nicht wesentliche Bibliotheken wie moment.js oder eine schwere Diagrammbibliothek hervorhebt).

Der Visualizer zeigte, dass victory-native (unsere Diagrammbibliothek) und lottie-react-native über 600 KB zum Bundle beitrugen.

So funktioniert es

Der Bundle-Visualizer wertet die Ausgabe des Metro-Bundlers aus und erstellt eine visuelle Karte. So erkennen Sie schnell „toten Code“ oder unnötig große Bibliotheken. Wir stellten fest, dass wir die gesamte Bibliothek lodash importierten statt einzelner Funktionen – eine häufige Falle.

Häufige Fallstricke

Ganze Bibliotheken importieren: Statt import { debounce } from 'lodash'; verwenden Sie import debounce from 'lodash/debounce';, damit nicht die gesamte Bibliothek gebündelt wird.
Entwicklungsabhängigkeiten ignorieren: Stellen Sie sicher, dass Bibliotheken nur für die Entwicklung (etwa Storybook) nicht in Ihr Produktionsbundle gelangen.

Ergebnis: Durch das Entfernen ungenutzter Abhängigkeiten und gezielte Importe haben wir 500 KB von unserer Bundle-Größe abgeschnitten. Verbesserung der Ladezeit: ca. 0,5 s.

Schritt 2: Lazy Loading für Bildschirme und Komponenten

Warum den Bildschirm „WorkoutDetail“ laden, bevor die Nutzerin oder der Nutzer überhaupt ein Training antippt? Lazy Loading verschiebt das Laden des Codes einer Komponente, bis er tatsächlich benötigt wird.

Was wir tun

Wir verwenden React.lazy und Suspense, um unseren Code aufzuteilen und Bildschirme bei Bedarf zu laden. Das ist eine der wirksamsten Möglichkeiten, die anfängliche Ladezeit zu senken.

Umsetzung

Wir haben unseren Navigationsstapel von statischen auf dynamische Importe umgestellt.

Vorher:

javascript

// src/navigation/AppNavigator.js
import HomeScreen from '../screens/HomeScreen';
import WorkoutDetailScreen from '../screens/WorkoutDetailScreen';
import ProfileScreen from '../screens/ProfileScreen';

// ... Stack.Screen definitions for all screens

Nachher:

javascript

// src/navigation/AppNavigator.js
import React, { Suspense } from 'react';
import { View, ActivityIndicator } from 'react-native';
import HomeScreen from '../screens/HomeScreen';

// Lazily load screens that are not the initial route
const WorkoutDetailScreen = React.lazy(() => import('../screens/WorkoutDetailScreen'));
const ProfileScreen = React.lazy(() => import('../screens/ProfileScreen'));

const AppNavigator = () => {
  return (
    <Suspense fallback={<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><ActivityIndicator /></View>}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="WorkoutDetail" component={WorkoutDetailScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </Suspense>
  );
};

So funktioniert es

React.lazy ermöglicht es, einen dynamischen Import wie eine normale Komponente darzustellen. Wenn React versucht, WorkoutDetailScreen zu rendern, wird der dynamische import() ausgelöst. Während der Code-Chunk geladen wird, sieht die Nutzerin oder der Nutzer die fallback-Oberfläche der Suspense-Komponente.

Häufige Fallstricke

Keine Fallback-Oberfläche: Wenn Sie vergessen, Lazy-Komponenten in <Suspense> einzuschließen, stürzt Ihre App ab.
Alles per Lazy Loading laden: Laden Sie Ihren ersten Bildschirm oder kritische Komponenten nicht per Lazy Loading, da sonst eine spürbare Verzögerung der Oberfläche entstehen kann.

Ergebnis: Code-Splitting reduzierte die Größe unseres initialen JS-Bundles um weitere 1,2 MB. Verbesserung der Ladezeit: ca. 1,0 s.

Schritt 3: Die Bildauslieferung optimieren

Der Startbildschirm unserer App zeigte ein Karussell mit Trainingsplänen, jeweils mit einem hochauflösenden Bannerbild. Diese Bilder waren ein erheblicher Leistungsengpass.

Was wir tun

Wir ersetzen die standardmäßige React-Native-Komponente <Image> durch react-native-fast-image für besseres Caching und verwenden moderne, komprimierte Bildformate wie WebP.

Umsetzung

javascript

// src/components/WorkoutCard.js
import React from 'react';
import FastImage from 'react-native-fast-image';

const WorkoutCard = ({ workout }) => {
  // Use a .webp URL from a CDN if possible
  const imageUrl = `${workout.imageUrl}?format=webp&quality=80`;

  return (
    <FastImage
      style={{ width: 200, height: 150 }}
      source={{
        uri: imageUrl,
        priority: FastImage.priority.normal,
        cache: FastImage.cacheControl.immutable, // Aggressively cache images
      }}
      resizeMode={FastImage.resizeMode.cover}
    />
  );
};

export default WorkoutCard;

So funktioniert es

react-native-fast-image nutzt native Bibliotheken (SDWebImage unter iOS, Glide unter Android) zum Laden und Zwischenspeichern von Bildern, was deutlich performanter ist als die Standardimplementierung von React Native. Die Eigenschaft cache: FastImage.cacheControl.immutable weist die App an, das Bild aggressiv zwischenzuspeichern, sodass spätere Ladevorgänge sofort erfolgen. Das WebP-Format reduziert die Bilddateigröße im Vergleich zu JPEG um 25–35 %, ohne nennenswerten Qualitätsverlust.

Häufige Fallstricke

Bilder nicht skalieren: Ein 1080p-Bild für eine Miniaturansicht von 200 px verschwendet Bandbreite und Speicher. Nutzen Sie ein CDN oder einen Backend-Dienst, um Bilder dynamisch zu skalieren.
Lokale Assets ignorieren: Verwenden Sie Werkzeuge wie TinyPNG oder Squoosh, um Bilder zu komprimieren, die mit Ihrer App ausgeliefert werden.

Ergebnis: Optimierte Bilder verbesserten die wahrgenommene Leistung und verringerten die Netzwerklast. Verbesserung der Ladezeit: ca. 0,4 s.

Schritt 4: Das Zustandsmanagement von Redux zu Zustand migrieren

Unsere letzte Baustelle war das Zustandsmanagement. Redux Toolkit hat uns gute Dienste geleistet, doch sein Boilerplate-Code und die Größe des mit redux-persist hydrierten Zustands trugen zu Startverzögerungen bei. Für die Komplexität unserer App war es überdimensioniert. Wir entschieden uns für die Migration zu Zustand.

Was wir tun

Wir ersetzen Redux Toolkit durch Zustand, um Boilerplate-Code, Bundle-Größe und die Zeit für die anfängliche Zustandshydration zu reduzieren.

Umsetzung

Vorher (Redux-Toolkit-Slice):

javascript

// src/store/userSlice.js
import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: { profile: null, settings: {} },
  reducers: {
    setUser: (state, action) => {
      state.profile = action.payload;
    },
  },
});
// ... plus store configuration, providers, etc.

Nachher (Zustand-Store):

javascript

// src/store/userStore.js
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useUserStore = create(
  persist(
    (set) => ({
      profile: null,
      settings: {},
      setUser: (userProfile) => set({ profile: userProfile }),
    }),
    {
      name: 'user-storage', // key in AsyncStorage
    }
  )
);

So funktioniert es

Zustand ist eine kleine, schnelle und skalierbare Lösung für das Zustandsmanagement auf Basis von Hooks. Sie hat minimalen Boilerplate-Code und ist in der Regel schlanker als Redux. Die Leistung ist oft besser, weil Komponentenaktualisierungen granularer sind: Komponenten rendern nur neu, wenn sich genau der Zustandsteil ändert, den sie abonnieren.

Häufige Fallstricke

Alles in einen Store legen: Es ist verlockend, aber besser ist es, getrennte Stores (Slices) für verschiedene Bereiche Ihrer App anzulegen (z. B. useUserStore, useWorkoutStore).
Keine Selektoren verwenden: Um unnötige Neu-Renderings zu vermeiden, wählen Sie in Ihren Komponenten stets nur den minimal benötigten Zustand aus: const profile = useUserStore(state => state.profile);.

Ergebnis: Zustand reduzierte den Umfang unserer Bibliothek für das Zustandsmanagement und beschleunigte die Rehydrierung des Zustands. Verbesserung der Ladezeit: ca. 0,2 s.

Alles zusammenfügen

Hier eine Zusammenfassung unserer Optimierungen und ihrer Wirkung auf die Leistung unserer App.

Kennzahl	Vor der Optimierung	Nach der Optimierung	Verbesserung
Time-to-Interactive	4,2 Sekunden	2,1 Sekunden	−50 %
Größe des JS-Bundles	3,5 MB	1,8 MB	−48 %
Abbruchrate der Nutzer	35 %	12 %	−65 %

Die kumulative Wirkung dieser Änderungen hat das Nutzererlebnis verändert. Die App fühlte sich vom ersten Start an schnell und reaktionsschnell an.

Fazit

Die Leistungsoptimierung einer React-Native-App ist keine einmalige Aufgabe, sondern ein fortlaufender Prozess aus Messung und Verfeinerung. Indem wir unsere größten Engpässe systematisch angegangen sind – Bundle-Größe, Asset-Laden und Zustandsmanagement –, konnten wir die Ladezeit um dramatische 50 % senken.

Unsere wichtigsten Erkenntnisse:

Zuerst profilen: Raten Sie nicht. Nutzen Sie Werkzeuge wie react-native-bundle-visualizer, um Ihre tatsächlichen Leistungsprobleme zu finden.
Alles Mögliche aufschieben: Wenn Nutzerinnen und Nutzer es auf dem ersten Bildschirm nicht brauchen, laden Sie es später mit React.lazy.
Bilder sind trügerisch schwer: Eine durchdachte Strategie zur Bildoptimierung ist für eine medienreiche App unverzichtbar.
Das richtige Werkzeug wählen: Eine schlankere Bibliothek für das Zustandsmanagement wie Zustand kann bei kleinen bis mittelgroßen Apps spürbare Leistungsgewinne bringen.

Wir ermutigen Sie, diese Techniken auf Ihre eigenen Projekte anzuwenden. Ihre Nutzerinnen und Nutzer werden es Ihnen danken.

Ressourcen

Häufig gestellte Fragen

F: Wie weiß ich, ob das auf mich zutrifft? A: Besprechen Sie Ihre persönliche und familiäre Krankengeschichte mit Ihrer Ärztin oder Ihrem Arzt, um Ihre individuellen Risikofaktoren zu beurteilen und geeignete nächste Schritte festzulegen.

F: Was sollte ich meine Ärztin oder meinen Arzt fragen? A: Gute Fragen sind: „Was bedeuten meine Ergebnisse?“, „Welche Möglichkeiten habe ich?“, „Welche Lebensstiländerungen würden helfen?“ und „Wann sollte ich zur Nachkontrolle kommen?“

F: Gibt es Lebensstiländerungen, die helfen können? A: Die meisten Erkrankungen profitieren von grundlegenden Maßnahmen: ausgewogene Ernährung, regelmäßige körperliche Aktivität (150+ Minuten/Woche), erholsamer Schlaf (7–9 Stunden), Stressbewältigung und Verzicht auf Tabak.

Medizinischer Haftungsausschluss

Dieser Artikel dient ausschließlich der Aufklärung und stellt keine medizinische Beratung dar. Konsultieren Sie stets eine qualifizierte medizinische Fachperson, bevor Sie Entscheidungen über Ihre Gesundheit, Behandlung oder Versorgung treffen. Individuelle Umstände unterscheiden sich, und was für eine Person angemessen ist, muss für eine andere nicht angemessen sein.

Wenn Sie einen medizinischen Notfall erleben, rufen Sie sofort 911 (oder Ihre örtliche Notrufnummer) an.

Zurück zu allen Artikeln