Seite 22 - Web Performance

Performance bleibt nur stabil, wenn sie nicht an einer einzelnen Person hängt, sondern über Code-Review-Checklisten, automatisierte CI-Budgets, sichtbare Dashboards und feste Sprint-Ziele im gesamten Team verankert ist. Dieser Artikel zeigt, wie Magento- und Hyvä-Teams Performance-Governance aufbauen, Widerstand bei konkurrierenden Deadlines produktiv auflösen und Verantwortung nachhaltig verteilen, statt sie einer Person aufzubürden.

will-change signalisiert dem Browser, dass sich eine Eigenschaft demnaechst aendert, und der Browser reagiert darauf oft, indem er ein eigenes Compositing-Layer fuer das Element anlegt. Das beschleunigt einzelne Animationen spuerbar, aber jedes zusaetzliche Layer kostet Grafikspeicher. Wer will-change grosszuegig auf viele Elemente dauerhaft setzt, erzeugt genau die Ruckler, die die Eigenschaft eigentlich verhindern sollte.

Ein einzelnes riesiges JavaScript Bundle bremst jede Vue App beim ersten Laden aus. Bundle Splitting mit dynamic import, manualChunks und Route basiertem Code Splitting verteilt den Code auf kleinere Häppchen, die der Browser parallel und bedarfsgerecht lädt.