Seite 15 - Web Performance

Ein einzelner Heap Snapshot zeigt nur eine Momentaufnahme, aber die Drei Snapshot Technik entlarvt systematisch, welche Objekte trotz Garbage Collector im Speicher bleiben. Retainer Pfade zeigen exakt, welche Referenz eine Freigabe verhindert, und machen aus vagem Speicherverdacht eine konkrete Ursache im Code.

Natives CSS-Nesting erlaubt es, verschachtelte Selektoren direkt im Stylesheet zu schreiben, ohne Präprozessor. Jede zusätzliche Verschachtelungsebene erhöht dabei aber automatisch die Spezifität des zusammengesetzten Selektors und die Zahl der Zeichen, die der Browser beim Parsen und Matching verarbeiten muss, was ab einer bestimmten Tiefe echte Wartbarkeits- und Performance-Konsequenzen hat.

Redis übernimmt in Magento gleich drei Rollen: Session-Speicher, Object-Cache-Backend und optional Full-Page-Cache. Wer alle drei Rollen in derselben Datenbank ablegt, riskiert Tag-Kollisionen, unnötige Cache-Flushes und im schlimmsten Fall abgemeldete Kunden durch verlorene Sessions. Dieser Artikel zeigt, wie Redis in Magento korrekt konfiguriert, überwacht und vor Speicherüberlauf geschützt wird.

Interaction to Next Paint bestraft jede Millisekunde, die zwischen Klick und sichtbarer Reaktion vergeht. Wer Long Tasks systematisch identifiziert und mit Yielding, Scheduler API und Event Handler Aufteilung auflöst, senkt die INP Zahl nicht durch Zufall, sondern durch nachvollziehbare technische Eingriffe.

Ein Health Check, der nur prüft, ob der Webserver antwortet, meldet einen Shop als gesund, obwohl die Datenbank blockiert, die Suche down ist oder die Message Queue voll läuft. Ein durchdachter Health Check Endpoint prüft echte Abhängigkeiten und verhindert, dass ein Load Balancer weiter Traffic auf einen defekten Node schickt.

Ein Service Worker läuft als eigener Thread zwischen Browser und Netzwerk und kann Anfragen abfangen, aus einem lokalen Cache beantworten und im Hintergrund aktualisieren. Richtig eingesetzt sorgt das für sofortige Ladezeiten bei wiederkehrenden Besuchen, funktionierende Fallback-Seiten ohne Netzverbindung und spürbar weniger Serverlast, ohne dass Nutzer den Unterschied zu einer nativen App bemerken.

Streaming SSR zerlegt eine Serverantwort in mehrere Chunks, statt auf das vollständige HTML zu warten, bevor überhaupt etwas an den Browser geschickt wird. React Suspense definiert dabei die Grenzen, an denen einzelne Teile der Seite nachgeliefert werden, während schnell verfügbare Inhalte sofort sichtbar sind.

Server-Side Rendering sollte eigentlich für schnelle erste Sichtbarkeit sorgen, doch bei großen SPA/SSR-Hybrid-Anwendungen frisst die anschliessende Hydration oft genau den Vorteil wieder auf, den das serverseitige Rendering erst erzeugt hat. Der Browser muss den kompletten Component-Tree erneut durchlaufen, Event-Handler anhängen und internen State rekonstruieren, bevor die Seite wirklich interaktiv wird. Partielle Hydration und das grundlegend andere Konzept der Resumability sind zwei Antworten auf dasselbe Problem, mit sehr unterschiedlichen Konsequenzen für Architektur und Framework-Wahl.

Ein einzelner GraphQL-Endpunkt kann tausende verschiedene Operationsformen bedienen, klassisches Endpoint-basiertes APM versagt an dieser Stelle vollständig. GraphQL Observability braucht Resolver-Level-Tracing, das jeden einzelnen Feldaufruf sichtbar macht, kombiniert mit OpenTelemetry-Standardisierung und verteiltem Tracing über Federation-Gateways hinweg.

Der Index ist angelegt, die Spalte ist ausgewählt, trotzdem zeigt EXPLAIN einen vollständigen Table Scan. Dieses Muster hat fast immer eine von wenigen konkreten Ursachen: Funktionen auf der indizierten Spalte, implizite Typkonvertierung, führende Wildcards oder veraltete Statistiken. Diese Anleitung zeigt eine feste Reihenfolge, mit der sich die Ursache in wenigen Minuten eingrenzen lässt.