Seite 13 - Web Performance

Ein funktionaler E2E-Test bestätigt, dass ein Checkout mit einem einzelnen, isolierten Nutzer korrekt abläuft, sagt aber nichts darüber aus, was passiert, wenn zweihundert Nutzerinnen und Nutzer gleichzeitig denselben Checkout durchlaufen. Genau diese Lücke schließt Lasttesting mit k6, einem quelloffenen, skriptbasierten Lasttest-Werkzeug, das realistische, parallele Nutzerlast simuliert und dabei präzise Kennzahlen zu Antwortzeiten, Fehlerraten und Durchsatz liefert, lange bevor ein echter Sale-Ansturm diese Grenzen im Produktivbetrieb schmerzhaft aufdeckt.

Moderne Magento-Shops mit Hyvä Theme und Alpine.js rendern große Teile ihrer Inhalte im Browser, doch Google crawlt, rendert und indexiert diese Inhalte in getrennten, zeitlich versetzten Phasen. Dieser Artikel erklärt, wie der Web Rendering Service arbeitet, welche Fehler client-seitig gerenderte Seiten unsichtbar machen und wie ihr mit der URL-Prüfung und sauberem Hydration-Timing dafür sorgt, dass Googlebot wirklich alles sieht.

Die meisten Responsive-Image-Setups liefern zu grosse oder zu kleine Bilder aus, weil srcset, sizes und picture falsch kombiniert oder unvollstaendig gepflegt werden. Dieser Artikel erklaert die tatsaechliche Browser-Logik hinter Width- und Density-Deskriptoren, zeigt die korrekte sizes-Berechnung und liefert ein praxistaugliches Muster fuer Magento-Produktkataloge mit Art Direction und Format-Fallback.

Ruckelnde Animationen entstehen fast immer, weil der Browser bei jedem Frame Layout und Paint neu berechnen muss, statt die Arbeit an die GPU zu delegieren. Dieser Artikel erklärt, wie Compositor-Layer entstehen, warum transform und opacity praktisch kostenlos animierbar sind, wie will-change richtig und falsch eingesetzt wird und wie sich Layer-Probleme mit den Chrome DevTools sichtbar machen und beheben lassen.

useFetch ist im Kern ein Convenience-Wrapper um useAsyncData in Kombination mit $fetch. Sobald eigene Transform-Funktionen, präzise Caching-Keys oder eine komplexere Datenquelle jenseits eines einfachen HTTP-Requests ins Spiel kommen, ist der direkte Griff zu useAsyncData meist die klarere Wahl.

POST-Requests mit dynamischem Body lassen sich von klassischen HTTP-Caches nicht ohne Weiteres cachen, genau das ist aber die Standard-Transportform von GraphQL. GraphQL Response Caching mit Varnish und CDN Edge Caching überwindet diese Hürde durch GET-Queries, Persisted Queries und Surrogate Keys, sodass Antworten am Edge landen, bevor sie den Origin-Server je erreichen.

Ein PHP-Objekt ohne eine einzige Property belegt trotzdem mehrere Dutzend Bytes im Speicher, allein durch den internen zend_object-Header. Wer bei tausenden Objekten pro Request unerwartet hohen Speicherverbrauch sieht, findet die Ursache meist im Zusammenspiel aus Objekt-Header, Property-Tabelle und der Größe typisierter Properties, nicht im eigentlichen Nutzdatenanteil.

Jumbo Frames erhoehen die maximale Ethernet-Framegroesse von 1500 auf bis zu 9000 Byte und senken damit den prozentualen Anteil an Header-Overhead pro uebertragenem Megabyte. Fuer die interne Verbindung zwischen Webserver und MySQL-Datenbank oder fuer Backup- und Replikationsverkehr kann das spuerbar CPU-Zyklen sparen, vorausgesetzt die MTU wird auf jedem Geraet im Pfad konsistent gesetzt.

Ein Tab im Hintergrund läuft in den meisten Anwendungen unverändert weiter, Polling-Intervalle feuern, Animationen laufen, Videos spielen unhörbar ab. Die Page Visibility API liefert mit document.hidden und dem visibilitychange-Event einen zuverlässigen Signalgeber, um genau solche Hintergrundarbeit zu drosseln und spürbar CPU, Akku und Netzwerk zu sparen, ohne dass der Nutzer etwas davon merkt.

Bevor ein Service in Kubernetes oder Docker Swarm mit mehreren Replicas produktiv laeuft, lohnt sich ein lokaler Test mit deploy.replicas in Docker Compose. So lassen sich Port-Konflikte, geteilte Volumes und Lastverteilungsverhalten schon auf dem Entwicklungsrechner aufdecken, statt sie erst nach einem produktiven Rollout zu bemerken.