Messen, bevor man optimiert: Paul Irishs Arbeitsablauf für Geschwindigkeit

Warum Optimieren zuerst meist Zeitverschwendung ist

Performance‑Arbeit wirkt zufällig, wenn man mit Fixes beginnt. Einmal werden Dateien minifiziert, das nächste Mal wird das Caching angepasst, dann entfernt man eine Bibliothek. Manchmal hilft es. Manchmal ändert sich nichts, und man weiß nicht warum.

Das größte Risiko ist, an der falschen Stelle zu optimieren. Wenn die Seite langsam ist, weil der Main‑Thread durch JavaScript blockiert ist, bringt stundenlanges Komprimieren von Bildern kaum etwas. Oder man beschleunigt etwas, das Nutzer gar nicht wahrnehmen, während die eigentliche Verzögerung von einem langen API‑Aufruf, einem sich ständig neu berechnenden Layout oder einem einzelnen blockierenden Script kommt.

Es gibt außerdem die Falle, nach Gefühl zu urteilen. „Fühlt sich schneller an" kann ein Placebo (z. B. ein Spinner) sein oder von Tests auf einem anderen Netzwerk, Gerät oder zu einer anderen Tageszeit kommen. „Ist schneller“ heißt: dieselbe Aktion unter denselben Bedingungen lieferte bessere Zahlen.

Ein einfacher Grundsatz löst das meiste: Messe, bevor du optimierst, und entscheide dann. Wenn du Performance als Messproblem behandelst, hörst du auf zu raten und fängst an zu lernen.

Ein praktischer Ablauf sieht so aus: Wähle eine Nutzer‑Aktion, zeichne eine Baseline unter reproduzierbaren Bedingungen auf, mache genau eine Änderung, die du erklären kannst, messe neu und behalte die Änderung nur, wenn die Zahlen besser werden.

Paul Irish und die Gewohnheit, zuerst zu messen

Paul Irish gehört zu den bekanntesten Stimmen im Bereich Web‑Performance. Durch seine Arbeit an Browser‑Tools und Performance‑Leitfäden hat er eine einfache Idee verbreitet: Deine erste Aufgabe ist nicht zu raten, was langsam ist, sondern es zu beweisen.

Diese Denkweise verändert die Teamdynamik. Anstatt aus Gewohnheiten wie „Bilder sind immer das Problem“ oder „es muss am Framework liegen“ zu argumentieren, startet man mit Belegen. Wenn du auf eine Timeline, eine langsame Abfrage oder eine lange Aufgabe zeigen kannst, verlagert sich die Diskussion von Schuldzuweisungen hin zu Lösungen.

„Messen, bevor du optimierst“ beruhigt Performance‑Debatten, weil es gemeinsame Regeln schafft: Einigt euch darauf, was gemessen wird, was „besser“ bedeutet, und feiert nur, wenn die Zahlen sich verbessern.

Das funktioniert bei kleinen Websites und großen Apps. Eine einzige Baseline kann zufällige Mikro‑Optimierungen auf einer Marketing‑Seite stoppen. In einem großen Produkt halten konsistente Messungen Performance davon ab, zu einer nie endenden To‑Do‑Liste zu werden.

Eine einfache Vorgehensweise ist, Performance wie einen Bug‑Report zu behandeln: klare Reproduktionsschritte, die Metrik, die du gesehen hast, und eine Änderung, die mit einem Ergebnis verknüpft ist. Wenn zwei Leute uneinig sind, führe die Messung erneut aus und lass die Daten entscheiden.

Performance als Instrumentierungsproblem

Behandle Performance zuerst als Instrumentierungsproblem: Füge Möglichkeiten hinzu, zu beobachten, was Nutzer tatsächlich erleben. Wenn du es nicht sehen kannst, wirst du Meinungen statt Beweise diskutieren. Das ist die wahre Bedeutung von „zuerst messen".

Instrumentierung muss nicht aufwändig sein. Es reicht, ein paar Signale konsistent an denselben Stellen zu sammeln, damit du grundlegende Fragen beantworten kannst:

• Was fühlt sich langsam an?
• Wohin geht die Zeit?
• Hat unsere Änderung geholfen?

In der Regel willst du zwei Arten von Daten.

Lab‑Daten werden in einer kontrollierten Umgebung erfasst: ein bestimmtes Laptop oder Testgerät, ein stabiles Netzwerkprofil, dieselben Schritte bei jedem Lauf. Sie sind ideal zum Debuggen, weil du die Verlangsamung auf Abruf reproduzieren kannst.

Real‑User‑Daten zeigen, was echte Nutzer erleben: unterschiedliche Geräte, Standorte und Verbindungsqualitäten. Sie sind ideal zur Priorisierung, weil sie zeigen, was tatsächlichen Nutzern schadet, nicht nur einem einzelnen Testlauf.

Auch ohne Experte zu sein, kannst du Seitenlade‑Meilensteine (z. B. wann der erste Inhalt erscheint), lange Tasks und Main‑Thread‑Blockaden, langsame Netzwerk‑Anfragen, aufwändige Rendering‑Arbeit (Layout, Style, Paint) und Server‑Antwortzeit messen.

Diese Signale leben typischerweise an ein paar Stellen: Browser‑DevTools für Lab‑Profiling, Server‑Logs und Traces für Backend‑Timing sowie Analytics‑ oder RUM‑Dashboards für Real‑User‑Daten. Zum Beispiel: Wenn der Checkout langsam wirkt, zeigen DevTools vielleicht, dass der Browser mit dem Rendern einer riesigen Warenkorb‑UI beschäftigt ist, während die Server‑Logs eine schnelle API anzeigen. Ohne Instrumentierung optimierst du womöglich das Backend und behebst nie das eigentliche Problem.

Schritt 1: Setze eine reproduzierbare Baseline

Um zu messen, bevor du optimierst, brauchst du einen verlässlichen Ausgangspunkt. Eine Baseline ist dieselbe Aktion, auf dieselbe Weise gemessen, unter denselben Bedingungen.

Beginne mit einer echten Nutzer‑Journey, nicht „die ganze Site“. Wähle etwas, das du in einem Satz beschreiben kannst, z. B. „Home‑Seite öffnen und zum ersten Produkt‑Grid scrollen“ oder „einloggen und zum Dashboard gelangen“. Je enger der Fokus, desto stabiler die Zahlen und klarer die nächsten Schritte.

Wähle dann 1 bis 3 Metriken, die zur Journey passen. Bei einer Seitenansicht ist ein gängiges Paar LCP (wie schnell der Hauptinhalt erscheint) und TTFB (wie schnell der Server antwortet). Bei einem Flow wie Checkout könntest du die Zeit bis Abschluss von Schritt 1 plus die API‑Antwortzeit für den Zahlungsaufruf verfolgen. Zu viele Metriken erleichtern das Cherry‑Picking.

Schreibe das Test‑Setup auf, damit jemand anderes es später reproduzieren kann. Kleine Unterschiede können Ergebnisse stark beeinflussen:

• Gerät und Browser (inkl. Version)
• Netzwerk (WLAN vs. 4G, Throttling an/aus)
• Cache‑Zustand (cold vs. warm)
• Standort und Testdaten (Region, Account‑Typ, Warenkorbgröße)
• Anzahl der Läufe (z. B. 5 Läufe und Median verwenden)

Definiere schließlich „gut genug“ für deine Zielgruppe. Zum Beispiel: „LCP unter 2,5 s auf einem Mittelklasse‑Phone bei 4G.“ Wenn du Koder.ai verwendest, hilft ein Snapshot vor dem Test, die Baseline an eine bekannte Version zu binden.

Schritt 2: Reproduziere die Verlangsamung absichtlich

Bevor du profilierst, sorge dafür, dass das Problem auf Abruf erneut auftritt. Wenn du es nicht reproduzieren kannst, kannst du dem Ergebnis nicht trauen.

Beginne bei dem, was Nutzer fühlen, nicht bei dem, was du annimmst. Ist es ein langsamer erster Render? Ein Klick, der hängt, bevor sich etwas ändert? Ein langes Warten nach dem Absenden eines Formulars? Wähle den Moment, über den sich Nutzer beschweren, und konzentriere dich darauf.

Mach einen schnellen Lauf, um zu bestätigen, dass die Verlangsamung echt und reproduzierbar ist. Halte alles andere gleich: dieselbe Seite, dasselbe Gerät, möglichst dasselbe Netzwerk. Notiere dann den Auslöser und den genauen Moment, an dem es langsam wirkt, z. B. „nach Klick auf Pay friert der Button für eine Sekunde ein“ oder „beim Scrollen ruckelt es, wenn die Produktliste erscheint."

Eine einfache Methode, die Reproduzierbarkeit zu sichern, ist ein kurzes Skript: Seite in einem neuen Tab öffnen, die langsame Aktion ausführen, den genauen Punkt notieren, an dem es stockt, und dann einmal wiederholen, um zu bestätigen.

Erstelle ein oder zwei Basis‑Aufnahmen, nicht dutzende. Du willst genügend Belege haben, um zu sagen: „Ja, die Verlangsamung tritt auf, und zwar genau hier."

Schritt 3: Profilieren, um den Hauptengpass zu finden

Wenn du die Verlangsamung reproduzieren kannst, hör auf zu raten. Öffne einen Profiler (für die meisten Leute das Performance‑Panel des Browsers) und nimm einen Lauf der langsamen Interaktion auf. Das Ziel ist nicht, jedes Problem zu finden, sondern zu verstehen, wohin die Zeit fließt.

Beginne mit den größten Zeitblöcken. Kleine Spitzen können echt sein, erklären aber selten allein eine spürbare Verzögerung.

Eine nützliche Einteilung beim Lesen einer Aufnahme ist, die Zeit in ein paar Kategorien zu gruppieren: Netzwerk und Laden (Warten auf Anfragen), Main‑Thread‑Scripting (lange JS‑Tasks), Rendering und Paint (Layout/Style/Paint), Leerlauf (Warten auf etwas anderes) und wiederholte Arbeit (derselbe teure Schritt wiederholt sich).

Ein häufiger Fehler ist, eine langsame Serverantwort mit langsamer Client‑Arbeit zu verwechseln. Wenn die Timeline lange Lücken zeigt, während Requests laufen, liegt der Engpass vielleicht im Netzwerk oder Backend. Zeigt sie lange Tasks auf dem Main‑Thread, hast du ein Frontend‑Problem, selbst wenn das Netzwerk schnell ist.

Bevor du etwas änderst, schreibe eine kurze, testbare Hypothese basierend auf dem, was du gesehen hast. Zum Beispiel: „Die Seite wirkt langsam, weil der Main‑Thread direkt nach Eintreffen der API‑Antwort durch JSON‑Parsing blockiert wird.“ Dieser Satz bereitet den nächsten Schritt vor.

Schritt 4: Ändere eine Sache, bewusst

Hast du den wahrscheinlichen Engpass gefunden, widerstehe dem Drang, „alles zu beheben“. Ändere eine Variable, damit du Ursache und Wirkung verbinden kannst.

Halte die Änderung klein und einfach rückgängig zu machen. Große Rewrites verwischen das Ergebnis: Verbessert sich die Performance, weißt du nicht warum. Wird es schlechter, ist das Zurückrollen riskant.

Gute Einzelmaßnahmen sind spezifisch und testbar. Beispiele: ein blockierendes Drittanbieter‑Script deferen oder entfernen, ein übergroßes Bild auf der langsamen Seite komprimieren, Caching für eine teure DB‑Abfrage hinzufügen, eine schwere UI‑Komponente splitten, damit sie weniger Arbeit direkt rendert, oder Arbeit in einer heißen Schleife reduzieren, die du im Profiler gesehen hast.

Bevor du am Code drehst, schreibe auf, was du änderst, warum du es gewählt hast und was du erwartest zu verbessern (z. B. „Main‑Thread‑Zeit reduzieren“ oder „DB‑Zeit halbieren").

Wenn dein Team eine Plattform mit Snapshots und Rollback verwendet (wie Koder.ai), erstelle einen Snapshot direkt vor der Änderung, damit „klein und reversibel“ real ist, nicht nur ein Wunsch.

Schritt 5: Prüfe die Auswirkung und vermeide laute Schlussfolgerungen

Du hast eine Änderung gemacht. Beweise jetzt, dass sie geholfen hat.

Führe denselben Testaufbau aus wie für die Baseline: dasselbe Gerät, dieselbe Browserversion, dieselbe Route und Flows sowie dieselbe Anzahl Läufe. Vergleiche Vorher‑/Nachher mit denselben Metriken. Führe nicht mitten im Test neue Metriken ein, nur weil diese besser aussehen.

Rauschen ist der häufigste Grund für Streit im Team. Achte auf warm vs. cold Cache, Erweiterungen oder Hintergrundprozesse, unterschiedliche Netzwerkbedingungen oder VPN, Server‑Varianz (ruhige Minute vs Stoßzeit) und den Unterschied zwischen „direkt nach Deploy“ und steady state.

Wenn sich der Median verbessert, aber das Worst‑Case schlechter wird, ist das ein echter Trade‑off. Entscheide, was für eure Nutzer zählt, und dokumentiere die Entscheidung: Änderung behalten, zurückrollen oder eine neue Hypothese formulieren und erneut testen.

Häufige Fallen, die Performance‑Arbeit unmöglich erscheinen lassen

Performance‑Arbeit wird verwirrend, wenn man das Falsche misst oder zuviel auf einmal ändert. Du kannst viel Aufwand verbrennen ohne klaren Gewinn, selbst wenn deine App sich verbessert.

Ein häufiger Fehler ist, eine einzelne Punktzahl als Ziel zu behandeln. Scores können nützlich sein, aber Nutzer erleben kein „92“. Sie erleben „die Seite zeigt Inhalte in 2 Sekunden“ oder „auf Kaufen reagiert es sofort“. Wähle ein nutzer‑sichtbares Ergebnis und messe es konsistent.

Eine weitere Falle ist, nur auf einem leistungsstarken Laptop zu testen. Viele Verlangsamungen zeigen sich auf Mittelklasse‑Phones, in schlechten Netzwerken oder wenn die CPU ausgelastet ist. Testest du nur auf dem besten Gerät, verpasst du Engpässe.

Verwirrung entsteht oft durch Muster wie: das Einfache optimieren statt des Zeitintensiven, mehrere Anpassungen gleichzeitig zusammenfassen, bei jedem Lauf den Pfad wechseln, auf ein Re‑Test verzichten, weil es sich schneller anfühlt, oder den Sieg erklären ohne dieselbe Baseline neu zu messen.

Wenn du die App mit einer Chat‑gesteuerten Plattform wie Koder.ai baust, gilt dieselbe Disziplin: eine Änderung, dann Verifizieren auf exakt demselben Flow, damit du dem Ergebnis vertraust.

Eine kurze Checkliste, die du jedes Mal wiederverwenden kannst

Wenn du eine Gewohnheit behalten willst, dann diese: Messe, bevor du optimierst. Das Ziel ist nicht endlose Daten, sondern eine wiederholbare Schleife, der du vertraust.

Benenne die genaue Nutzer‑Journey, die dir wichtig ist. „Homepage ist langsam“ ist vage. „Vom Produktseite → Klick auf Kaufen → Bestätigung sehen“ gibt dir einen wiederholbaren Pfad.

Nutze diese Checkliste:

• Schreibe die Journey als kurzes Skript, damit jeder sie wiederholen kann.
• Friere das Setup ein (Gerät, Browser, Netzwerk, Standort wenn möglich).
• Erfasse eine Baseline‑Zahl plus eine Baseline‑Aufnahme.
• Profile, wähle den größten Engpass und ändere nur eine Sache.
• Teste erneut, protokolliere die neue Zahl und dokumentiere die Entscheidung.

Die ruhige Version von Performance‑Arbeit ist simpel: ein Pfad, ein Setup, eine Änderung, ein verifiziertes Ergebnis.

Beispiel: Checkout beschleunigen ohne zu raten

Eine typische Beschwerde: Der Checkout wirkt langsam direkt nach dem Klick auf „Pay“. Leute fangen an zu raten (Bilder, Fonts, der Button). Behandle es stattdessen wie einen Test, den du wiederholen kannst.

Setze eine Baseline, die du erneut ausführen kannst. Wähle ein Gerät und einen Pfad (Warenkorb → Checkout → Pay → Bestätigung). Schalte Netzwerk‑Throttling ein (z. B. Fast 3G) und halte es bei jedem Lauf gleich. Messe eine einfache Zahl: Zeit vom Klick auf „Pay“ bis zum Anzeigen des Bestätigungsbildschirms.

Profile dann genau diesen Moment und schau, wohin die Zeit fließt. Meist entscheidest du zwischen drei Kategorien: Netzwerk (eine lange Anfrage oder zu viele Anfragen), Server (der Zahlungsaufruf ist langsam, während der Browser idle ist) oder Main‑Thread (der Browser ist mit JavaScript beschäftigt und kann die UI nicht aktualisieren).

Stell dir vor, das Profil zeigt: Nach Klick auf „Pay“ feuert der Browser eine Analytics‑Anfrage und ein Fraud‑Check‑Script, und die Zahlungsanfrage wartet hinter ihnen. Das ist kein „mach alles schneller“-Problem. Es ist ein blockierender Schritt.

Ändere eine Sache gezielt. Zum Beispiel: Starte die Zahlungsanfrage sofort und sende Analytics erst, nachdem der Bestätigungsbildschirm angezeigt wurde.

Verifiziere mit demselben Setup: gleiche Throttling‑Einstellung, dieselben Schritte, mehrere Läufe. Wenn die Bestätigungszeit sinkt und Fehler nicht zunehmen, hast du einen echten Erfolg. Prüfe außerdem stichprobenartig, dass Refunds, Retries oder Double‑Submit‑Schutz nicht kaputt gegangen sind.

Nächste Schritte: Mach den Ablauf zur Team‑Gewohnheit

Performance bleibt überschaubar, wenn es Routine ist, nicht eine Notfallaktion. Messen sollte die Standardhandlung sein, auch wenn sich alles gut anfühlt.

Wähle eine kleine Menge Metriken, die dein Team immer verfolgt. Halte sie konsistent, damit Trends leicht erkennbar sind:

• Seitenladezeit: Largest Contentful Paint (LCP)
• Interaktivität: Interaction to Next Paint (INP)
• Stabilität: Cumulative Layout Shift (CLS)
• API‑Geschwindigkeit: p95‑Antwortzeit für Schlüssel‑Endpoints
• Fehler: Client‑ und Server‑Fehlerrate

Baue eine Schleife um diese Metriken. Eine wöchentliche Baseline‑Prüfung ist oft ausreichend. Wenn eine Metrik driftet, ist das dein Auslöser: Reproduziere die Verlangsamung, profile sie, mache eine Änderung und verifiziere die Auswirkung.

Führe ein einfaches Performance‑Log in dem Format, das dein Team tatsächlich nutzt. Halte fest, was du gemessen hast (inkl. Gerät, Netzwerk und Build), was du geändert hast und wie sich die Zahlen danach veränderten.

Wenn du mit Koder.ai baust, kann Planning Mode dir helfen, die Nutzer‑Journey und die entscheidende Metrik vor einer Änderung niederzuschreiben. Nutze Snapshots und Rollback, um Experimente sicher zu machen: Snapshot erstellen, eine Änderung anwenden, erneut testen und zurücksetzen, wenn das Ergebnis zu rauschig oder schlechter ist.

Bei Planung oder Review hält eine Frage die Kultur gesund: „Was haben wir gemessen und was hat sich dadurch verändert?“