Seite 6 - Web Performance

INP setzt sich aus drei messbaren Phasen zusammen, die in den meisten Performance Guides nur oberflächlich behandelt werden. Dieser Deep Dive zerlegt Input Delay, Processing Time und Presentation Delay einzeln, erklärt die Rolle von Drittanbieter Skripten und Alpine.js Reaktivität in Hyvä Shops und zeigt anhand des Chrome DevTools Performance Panels, wie sich lange Tasks konkret aufspüren und beheben lassen.

Tailwinds Content Scanning verspricht, dass nur tatsächlich genutzte Klassen im finalen CSS landen. In der Praxis sammeln sich trotzdem ungenutzte Tailwind Klassen an, durch entfernte Komponenten, überzogene Safelists und dynamisch zusammengesetzte Klassennamen, die das Scanning gar nicht erst als sicher einstufen kann.

Dynamic Import mit import() ist mehr als eine bequeme Alternative zu statischen Imports: die Funktion gibt ein Promise zurueck, laedt Code erst zur Laufzeit und ermoeglicht Muster wie Route-basiertes Code-Splitting, bedingtes Laden nach Feature Detection und robuste Retry-Strategien, wenn ein Chunk im Netzwerk verloren geht.

Die Speculation Rules API erlaubt es, wahrscheinliche nächste Navigationsziele im Voraus zu laden oder sogar vollständig zu rendern, sodass der Seitenwechsel für den Nutzer praktisch instantan wirkt. Anders als klassisches Prefetching kann sie ganze Seiten inklusive JavaScript-Ausführung im Hintergrund vorbereiten.

Import Maps lösen ein lange bestehendes Problem: saubere, lesbare Modul-Bezeichner in nativen ES-Modules ohne Bundler-Schritt. Doch die eigentlich interessante Frage ist nicht die Syntax, sondern die Performance: Wann ist natives Laden vieler einzelner Modul-Dateien einem gebündelten JavaScript-Paket tatsächlich überlegen, und wann nicht.

Wer Magento nur über den Server-Load beobachtet, sieht Symptome statt Ursachen. New Relic macht einzelne Transaktionen sichtbar, von der Checkout-Anfrage bis zum externen Zahlungsdienst, und liefert damit die Datenbasis, um Performance-Probleme gezielt statt zufällig zu beheben.

Font-Dateien gehören oft zu den größten Einzelressourcen einer Webseite, obwohl ein Großteil ihres Inhalts nie zur Anzeige kommt. Mit Font-Subsetting und Variable Fonts lässt sich die übertragene Datenmenge drastisch reduzieren, ohne dass Nutzer einen sichtbaren Unterschied in der Typografie bemerken.

Web Vitals in einer Single Page Application zu messen ist keine triviale Angelegenheit, weil klassische Metriken für serverseitig gerenderte Mehrseiten Websites entworfen wurden. Mit der web-vitals Bibliothek, korrektem Timing und echtem Real User Monitoring lassen sich LCP, INP und CLS auch in Vue Apps zuverlässig erfassen.

setTimeout(0) und requestIdleCallback geben dem Browser keine echte Information darueber, wie wichtig ein Task tatsaechlich ist. scheduler.postTask() schliesst diese Luecke mit expliziten Prioritaetsstufen: user-blocking, user-visible und background, sodass eigener Code sich in dieselbe Warteschlange einreiht, die auch Rendering und Eingaben verwaltet, statt gegen sie zu konkurrieren.

Server Side Rendering löst das Problem eines leeren initialen HTML, verschiebt den Engpass aber auf den Server Render selbst. SSR Performance Tuning in Nuxt bedeutet, Time to First Byte, Datenlade Wasserfälle, Payload Größe und Hydration Kosten gezielt zu senken, statt SSR nur ein und auszuschalten.