Steigern Sie die Geschwindigkeit Ihrer React-App mit bewährten Techniken zur Leistungsoptimierung

Als Sie Ihre React-App erstellt haben, war sie noch schnell. Jetzt läuft sie ruckelig, die Ladezeiten haben sich verlängert, und die Nutzer bemerken das allmählich. Die gute Nachricht: Die meisten Leistungsprobleme bei React lassen sich auf eine Handvoll behebbarer Ursachen zurückführen.

Dieser Leitfaden führt Sie durch sieben bewährte Techniken, um Beschleunigen Sie Ihre React-App mit konkreten Daten, praktischen Codemustern und klaren Anleitungen, wann die einzelnen Muster anzuwenden sind. Ganz gleich, ob Ihre App beim ersten Laden träge ist, nur langsam auf Benutzereingaben reagiert oder bei großen Datensätzen Probleme hat – hier finden Sie eine gezielte Lösung.

Bevor Sie auch nur eine einzige Zeile Code schreiben, öffnen Sie den React DevTools Profiler und zeichnen Sie eine Interaktion auf, die sich langsam anfühlt. Die Flamegraph-Ansicht zeigt Ihnen genau, welche Komponenten gerendert werden, wie lange das jeweilige Rendern dauert und was es ausgelöst hat. Ohne diese Daten ist die Optimierung reine Spekulation. Mit ihnen können Sie Ihre Bemühungen dort konzentrieren, wo sie tatsächlich etwas bewirken.

1. Code-Splitting für schnelleres Laden

Standardmäßig bündelt Ihr Build-Tool Ihre gesamte React-Anwendung in einer einzigen JavaScript-Datei. Jeder Nutzer lädt die gesamte Datei herunter – auch die Teile, die er nie aufruft.

Durch Code-Splitting wird dieses Bundle in kleinere Teile aufgeteilt, die nur bei Bedarf geladen werden. React.lazy() in Verbindung mit Spannung macht die Aufteilung auf Routenebene einfach:

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

Die Dashboard Die Komponente wird nun erst beim Rendern geladen, nicht mehr beim ersten Aufruf der Seite. Bei den meisten Apps reduziert die Code-Aufteilung auf Routenebene die anfängliche Bundle-Größe um 30–50 %, wodurch sich der Largest Contentful Paint (LCP) direkt verbessert. Laut dem HTTP Archive (Daten von 2024) liegt der Medianwert der JavaScript-Nutzlast für Desktop-Nutzer bereits bei über 500 KB. Durch eine konsequente Aufteilung wird verhindert, dass dieser Wert weiter ansteigt.

Über die Routen hinaus sollten Sie in Erwägung ziehen, umfangreiche Bibliotheken von Drittanbietern – wie Kartenbibliotheken, Rich-Text-Editoren oder PDF-Viewer, die nur auf bestimmten Seiten erscheinen – aufzuteilen. Verwenden Sie Webpack-Bundle-Analysator um Ihr Bundle zu visualisieren und die wichtigsten Bestandteile zu identifizieren, bevor Sie entscheiden, wo die Aufteilung erfolgen soll.

2. Memoisation zur Vermeidung unnötiger Rendervorgänge

React rendert eine Komponente jedes Mal neu, wenn ihre übergeordnete Komponente neu gerendert wird – selbst wenn sich die Props dieser Komponente nicht geändert haben. In einem Dashboard mit 50 Komponenten kann eine Statusänderung auf oberster Ebene dazu führen, dass alle 50 Komponenten unnötigerweise neu gerendert werden. Laut einer Studie von Bit.dev kann eine schlechte Render-Leistung die Skript-Ausführungszeit um 30–60 %, ein spürbarer Rückschlag für beide Benutzererfahrung und SEO.

React.memo ist Ihre erste Verteidigungslinie. Sie umschließt eine Komponente und führt einen oberflächlichen Prop-Vergleich durch, bevor sie eine Neu-Rendering-Aktion auslöst:

const ExpensiveList = React.memo(function ExpensiveList({ items }) {
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
});

React.memo funktioniert nur, wenn die übergebenen Props stabile Referenzen haben. Kombinieren Sie es mit useMemo für berechnete Werte und useCallback für Ereignisbehandler:

function ProductPage({ products }) {
  const sortedProducts = useMemo(() => {
    return [...products].sort((a, b) => b.price - a.price);
  }, [products]);

  const handleDelete = useCallback((id) => {
    // delete logic
  }, []);

  return <ExpensiveList items={sortedProducts} onDelete={handleDelete} />;
}

Wann man nicht memoisieren sollte: Jedes React.memo Der Wrapper führt bei jedem Rendering einen flachen Vergleich durch. Bei kleinen, schnell gerenderten Komponenten kann dieser Mehraufwand mehr kosten als ein einfaches erneutes Rendering. Führen Sie zunächst eine Profiling-Analyse mit React DevTools durch und wenden Sie die Memoization dann gezielt auf Komponenten an, deren Rendering-Zeit über 5–10 ms liegt und die häufig ausgelöst werden. Alles in React.memo Das Fehlen von Messungen ist ein häufiges Anti-Muster.

Bei korrekter Anwendung kann die Memoization die Anzahl der erneuten Darstellungen um 30–50 % in umfangreichen Listen. Eine interne Prüfung ergab, dass 40 % Verringerung der Anzahl der Neudarstellungen auf einer Produktdetailseite nach gezielter Memoization.

3. Große Listen virtualisieren

Das Darstellen einer Liste mit 500 Elementen bedeutet, dass der Browser 500 DOM-Knoten erstellt, 500 Ereignis-Listener verwaltet und für alle diese Elemente Layout- und Zeichenvorgänge durchführt – selbst für diejenigen, die weit außerhalb des sichtbaren Ansichtsbereichs liegen. Die Folge sind langsame Erstdarstellungen, träges Scrollen und eine hohe Speicherauslastung.

Die Virtualisierung behebt dieses Problem, indem sie nur die Elemente rendert, die derzeit im Ansichtsbereich sichtbar sind, sowie einen kleinen Puffer. react-window ist die am häufigsten verwendete Bibliothek hierfür:

import { FixedSizeList } from 'react-window';

function VirtualizedList({ items }) {
  return (
    <FixedSizeList
      height={400}
      itemCount={items.length}
      itemSize={50}
      width={300}
    >
      {({ index, style }) => (
        <div style={style}>{items[index].name}</div>
      )}
    </FixedSizeList>
  );
}

Bei einer Liste mit 10.000 Elementen werden dadurch zu jedem Zeitpunkt etwa 20 DOM-Knoten statt 10.000 gerendert. Es ist dokumentiert, dass diese eine Änderung die Renderzeit der Liste von über 3 Sekunden auf nahezu null reduziert.

Wenden Sie Virtualisierung an, wenn Ihre Liste mehr als 100 Elemente umfasst. Unterhalb dieser Grenze bewältigt das DOM die Last ohne merkliche Leistungseinbußen. Oberhalb dieser Grenze summieren sich die Vorteile mit zunehmender Größe der Liste. Achten Sie außerdem darauf, stabile, eindeutige Schlüssel-Props zu verwenden – die Verwendung des Array-Index als Schlüssel führt zu subtilen Fehlern beim Sortieren und Filtern und zwingt React dazu, die gesamte Liste unnötigerweise neu zu rendern.

4. Bilder und andere Inhalte optimieren

Bilder sind in der Regel die größten Dateien auf einer React-Seite. Große, unkomprimierte Bilder verlangsamen das Laden der Seite, verlängern die LCP-Zeiten und verschwenden Bandbreite, insbesondere in Mobilfunknetzen.

Wechseln Sie zu modernen Formaten. WebP-Bilder sind 25–35 % kleiner als JPEGs bei gleicher Qualität. AVIF bietet eine noch stärkere Komprimierung, sofern der Browser dies unterstützt. Die Anpassung Ihrer Bild-Pipeline, sodass standardmäßig WebP bereitgestellt wird, ist eine der schnellsten Möglichkeiten, um Ergebnisse zu erzielen:

<img src="photo.webp" alt="Product image" />

Bilder, die sich außerhalb des Bildschirms befinden, verzögert laden. Der Einheimische loading="lazy" Das Attribut weist den Browser an, das Laden von Bildern erst dann zu starten, wenn sie beim Scrollen in den sichtbaren Bereich gelangen. Dies verringert die anfängliche Seitengröße und verhindert, dass Bilder, die sich außerhalb des sichtbaren Bereichs befinden, mit wichtigen Ressourcen um Bandbreite konkurrieren:

<img src="photo.webp" loading="lazy" alt="Product image" />

Responsive Bilder bereitstellen. Das Senden eines 2000px-Bildes an einen 400px-Bildschirm eines Mobilgeräts verschwendet Bandbreite und verlangsamt das Laden. Verwenden Sie srcSet und Größen um Bilder in der für den jeweiligen Viewport geeigneten Größe bereitzustellen:

<img
  srcSet="photo-400.webp 400w, photo-800.webp 800w"
  sizes="(max-width: 600px) 400px, 800px"
  src="photo-800.webp"
  alt="Product image"
/>

Wenn Sie Entwicklung mit Next.js, der Weiter/Bild Die Komponente übernimmt automatisch die Formatkonvertierung, die anpassbare Größenanpassung und das verzögerte Laden.

5. Verwenden Sie eine Produktionsversion und reduzieren Sie die Größe des Bundles

Entwicklungsversionen von React enthalten zusätzliche Warnungen, Debugging-Tools und nicht minimierten Code, die in der Produktionsumgebung nichts zu suchen haben. Verwenden Sie für die Bereitstellung stets einen Produktions-Build. In React-App erstellen, das heißt, laufen npm run build. In Next.js bedeutet das nächster Build. Der Unterschied in der Bündelgröße ist beträchtlich.

Auch außerhalb des Build-Modus können Sie die Bundle-Größe mithilfe von „Tree Shaking“ unter Kontrolle halten. Moderne Bundler (Webpack, Vite, Rollup) entfernen ungenutzten Code automatisch – allerdings nur, wenn Sie genau das importieren, was Sie benötigen:

// Imports the entire lodash library (~70KB)
import _ from 'lodash';

// Imports only the function you need (~2KB)
import debounce from 'lodash/debounce';

Diese eine Änderung beim Import reduziert den Umfang einer Abhängigkeit von 70 KB auf 2 KB. Multipliziert man dieses Muster mit 10 bis 15 Abhängigkeiten, ergibt sich eine erhebliche kumulative Reduzierung.

Verwendung Webpack-Bundle-Analysator um Ihre größten Speicherfresser zu finden. Oft werden Sie feststellen, dass ein oder zwei Pakete einen überproportionalen Anteil an Ihrem Bundle ausmachen und dass es weniger speicherintensive Alternativen gibt.

6. Lazy Loading für Komponenten implementieren

Lazy Loading hängt eng mit Code-Splitting zusammen, geht jedoch über Routen hinaus. Jede Komponente, deren Darstellung ressourcenintensiv ist und die beim ersten Laden nicht benötigt wird, kommt für Lazy Loading in Frage.

Das hast du bereits gesehen React.lazy() Im Abschnitt „Code-Splitting“. Wenden Sie dasselbe Muster an auf:

• Modale Dialogfelder die erst nach einer Benutzeraktion angezeigt werden
• Admin-Bereiche oder selten aufgerufene Einstellungsseiten
• Diagramme und Datenvisualisierungen die nur auf bestimmten Seiten geladen werden
• Integrationen von Drittanbietern — Videoplayer, PDF-Betrachter, Karten

Vermeiden Sie das verzögerte Laden von Komponenten, die unmittelbar oberhalb der Falz erscheinen. Wenn der Nutzer sie beim ersten Rendern sieht, müssen sie sofort geladen werden; andernfalls verursachen Sie eine sichtbare Verzögerung, die wie ein Fehler wirkt.

Bei Sucheingaben und anderen Interaktionen, die rechenintensive Berechnungen auslösen, sollten Sie eine Entprellung in Betracht ziehen, um die Häufigkeit dieser Berechnungen zu begrenzen:

useEffect(() => {
  const timer = setTimeout(() => {
    setDebouncedQuery(query);
  }, 300);
  return () => clearTimeout(timer);
}, [query]);

Ein Entprellungsfenster von 300 ms fängt die meisten Eingabepausen ab, ohne dass dabei eine spürbare Verzögerung entsteht. Bei React-Anwendungen, die React 18 oder höher verwenden, useTransition Bietet eine Alternative zu React Native, die die Benutzeroberfläche reaktionsschnell hält und gleichzeitig nicht dringende Statusaktualisierungen zurückstellt; dies ist besonders effektiv bei Suchfunktionen, die bereits während der Eingabe Ergebnisse anzeigen.

7. Die Leistung kontinuierlich überwachen und analysieren

Leistungsoptimierung ist keine einmalige Aufgabe. Neue Funktionen werden eingeführt, Abhängigkeiten häufen sich an, und was heute noch schnell ist, kann in drei Monaten schon zu einem Engpass werden. Eine kontinuierliche Überwachung ist das, was Teams, die die Leistung aufrechterhalten, von denen unterscheidet, die Probleme erst dann wiederentdecken, wenn sich Nutzer beschweren.

Hier sind die Tools, die Sie in Ihren üblichen Arbeitsablauf integrieren sollten:

React DevTools-Profiler Zeigt an, welche Komponenten gerendert wurden, wie lange das jeweilige Rendern gedauert hat und was es ausgelöst hat. Nutzen Sie es während der Entwicklung und nach der Veröffentlichung größerer Feature-Updates, um Regressionen zu erkennen, bevor sie in die Produktion gelangen.

Leuchtturm (verfügbar in Chrome DevTools) überprüft Ihre App anhand der Schwellenwerte der Core Web Vitals: LCP unter 2,5 Sekunden, INP unter 200 Millisekunden und CLS unter 0,1. Führen Sie das Tool in Ihrer CI-Pipeline aus, um zu verhindern, dass Leistungsrückgänge unbemerkt in die Produktionsumgebung gelangen.

Web Vitals JS erfasst Daten von echten Nutzern in der Produktionsumgebung. Labormessungen spiegeln nicht immer die tatsächlichen Nutzererfahrungen auf verschiedenen Geräten und unter unterschiedlichen Netzwerkbedingungen wider. Felddaten tun dies hingegen sehr wohl.

Chrome DevTools – Registerkarte „Leistung“ Bietet eine Einzelbildansicht der JavaScript-Ausführungszeit, langwieriger Aufgaben, Paint- und Layout-Ereignisse sowie von Frame-Drops. Verwenden Sie diese Funktion, wenn der Profiler eine langsame Komponente anzeigt, Sie aber verstehen müssen, was auf Browserebene vor sich geht.

Integrieren Sie die Profilerstellung in Ihren Code-Review-Prozess, insbesondere bei gemeinsam genutzten Komponenten und UI-Kits. Überprüfen Sie nach umfangreichen Umstrukturierungen die Flamegraphs. Richten Sie Warnmeldungen für Regressionen bei den Core Web Vitals ein. Die Teams, die Leistungsprobleme am frühesten erkennen, benötigen am wenigsten Zeit, um diese zu beheben.

Eine schnellere React-App beginnt mit dem richtigen Ansatz

Geschwindigkeit ist nicht nur eine technische Kennzahl. Jede Latenz von 100 Millisekunden hat messbare Auswirkungen auf die Konversionsraten, und Websites, die alle drei Schwellenwerte der Core Web Vitals erfüllen, schneiden in der organischen Suche durchweg besser ab als ihre Mitbewerber.

Die in diesem Leitfaden beschriebenen Techniken – Code-Splitting, Memoisation, Virtualisierung, Bildoptimierung, Produktions-Builds, Lazy Loading und kontinuierliche Überwachung – gehen die eigentlichen Ursachen der meisten React-Leistungsprobleme an. Wenden Sie diese systematisch an, messen Sie vor und nach jeder Änderung die Leistung und konzentrieren Sie sich auf die Engpässe, die der Profiler tatsächlich aufdeckt.

Sind Sie bereit, die Leistung Ihrer React-Anwendung weiter zu steigern?

Monarch Innovation arbeitet mit Entwicklungsteams zusammen, um Leistungsengpässe zu identifizieren, Optimierungsstrategien umzusetzen und schnellere, skalierbarere React-Anwendungen zu entwickeln. Entdecken Sie, was Monarch Innovation für Ihr Projekt leisten kann.

Häufig gestellte Fragen

Was ist Code-Splitting und wie beschleunigt es eine React-App?

Code-Splitting ist eine Technik, bei der Ihre React-Anwendung in kleinere JavaScript-Bundles aufgeteilt wird, anstatt die gesamte Anwendung auf einmal zu laden. Dadurch können Nutzer nur den für die aktuelle Seite benötigten Code herunterladen, was die anfängliche Ladezeit verkürzt und die Leistung verbessert. React unterstützt Code-Splitting mithilfe von React.lazy() und dynamisch import().

Wann sollte ich „React.memo“, „useMemo“ und „useCallback“ verwenden?

Diese React-Optimierungstools helfen dabei, unnötige Neu-Renderings zu vermeiden:

• React.memo: Verpacken Sie funktionale Komponenten, die häufig dieselben Props erhalten, um unnötiges Neu-Rendering zu vermeiden.
• useMemo: Speichere rechenintensive Berechnungen, damit sie nur dann ausgeführt werden, wenn sich die Abhängigkeiten ändern.
• useCallback: Callback-Funktionen zwischenspeichern, um eine unnötige Neudefinition von Funktionen zu vermeiden, insbesondere wenn Funktionen an untergeordnete Komponenten übergeben werden.

Verwenden Sie diese nur, wenn bei der Profilierung Leistungsengpässe festgestellt werden, da eine übermäßige Memoisation zu unnötiger Komplexität führen kann.

Wie virtualisiere ich große Listen in React?

Bei der Virtualisierung werden in einer langen Liste nur die sichtbaren Elemente gerendert, statt jedes einzelne Element im DOM. Dies verbessert die Rendering-Leistung erheblich und senkt den Speicherbedarf. Bibliotheken wie react-window und react-virtualized werden häufig verwendet, um Tausende von Zeilen effizient darzustellen und dabei ein flüssiges Scrollen zu gewährleisten.

Wie kann ich Bilder in einer React-App optimieren?

Die Bildoptimierung verbessert die Ladegeschwindigkeit der Seite und das Nutzererlebnis durch:

• Bilder vor der Bereitstellung komprimieren.
• Durch den Einsatz moderner Formate wie WebP oder AVIF.
• Bereitstellung responsiver Bilder in geeigneten Größen.
• Implementierung von Lazy Loading für Bilder unterhalb der Falz.
• Einsatz eines CDN für eine schnellere Bildbereitstellung.

Diese Maßnahmen reduzieren die Bandbreitennutzung und verbessern die Core Web Vitals.

Was ist „Lazy Loading“ und welche Komponenten sollte ich in React per „Lazy Loading“ laden?

Beim Lazy Loading wird das Laden von Komponenten verzögert, bis sie tatsächlich benötigt werden. Dadurch wird die anfängliche Bundle-Größe reduziert und das erste Laden der Seite beschleunigt.

Zu den geeigneten Kandidaten für Lazy Loading gehören:

• Routenbezogene Seiten
• Admin-Dashboards
• Einstellungsseiten
• Diagramme und Analysemodule
• Große Formulare
• Modalfenster und Dialogfelder
• Komponenten von Drittanbietern, die nicht sofort sichtbar sind

React bietet React.lazy() und Spannung um Lazy Loading effizient umzusetzen.

Wie kann ich die Leistung meiner React-App kontinuierlich überwachen?

Die Leistungsüberwachung sollte ein fortlaufender Prozess sein. Verfolgen Sie regelmäßig Kennzahlen wie Seitenladezeit, Reaktionsgeschwindigkeit bei Interaktionen, Bundle-Größe und Core Web Vitals. Nutzen Sie Tools wie Lighthouse, den React DevTools Profiler, das Performance-Panel der Chrome DevTools sowie Real-User-Monitoring-Lösungen (RUM), um Engpässe zu identifizieren. Eine kontinuierliche Überwachung hilft dabei, Regressionen frühzeitig zu erkennen und stellt sicher, dass Ihre React-Anwendung auch im Laufe ihrer Weiterentwicklung schnell bleibt.