Magento Performance-Optimierung & Release-Nachweise
Dokumentation der chirurgischen Performance-Maßnahmen, LCP-Beschleunigungen, CLS-Beseitigungen und Image-Payload-Reduktionen auf CloudLab Production und der OCI-Verifikationsumgebung.
Layout-Shift auf Startseite durch frühes Shadow-Root-Positioning vollständig beseitigt.
40.84 MB Payload eingespart durch progressive 800x800 sRGB Konvertierung bei Qualität 84.
Eager Loading + `fetchpriority="high"` + Amasty-Lazyload-Ausschluss für Kategorie-LCP.
Gemessene Live-Audits (Median) nach Beseitigung von Layout-Shift und Skriptblockaden.
Detaillierte technische Dokumente
Cookie-Consent & CLS Beseitigung
Surgical Fix für das Geo-Suggest Skript: Bounded 50ms Polling anstelle von vollen DOM-Scans, CLS von 0.417 auf 0.000 gesenkt.
Kategorie-Banner Priorität & Eager Loading
Template-Override im Child-Theme mit `fetchpriority="high"`, Amasty Lazy-Load Ausschluss und minifizierte PHTML-Generierung.
Karussell-Bildoptimierung & eTrusted Deferral
Resizing von 7 JPEGs auf 800x800 (41.5 MB → 660 KB), Deaktivierung des globalen eTrusted Loaders zugunsten Viewport-Triggering.
Critical CSS & Blockierungs-Analyse
Ursachenanalyse der Kategorie-Bewertung (33/39), Penthouse CSS Inlining (76KB/12KB), font-display: swap und RequireJS-Prüfung.
Isolierte VM & Staging-Verifikation
Vergleich von Produktions- vs. Staging-Umgebung (Baseline vs. Performance-Kandidat), Sicherheits-Sanitizer und Verifikations-Matrix.
Release-Worklog & Versionshistorie (v1–v6)
Chronologische Aufzeichnung aller Produktions-Releases, Optimierung der Bild-Pipelines, Amasty Bundling-Tests und Deployment-Schutz.
Startseiten Cookie-Consent & Layout-Shift (CLS)
Behebung des verzögerten Einfügens von Positionierungs-CSS im Geo-Suggest Skript, welches zuvor auf gerenderte Dialoginhalte wartete und den bereits gezeichneten Dialog sprunghaft verschob.
Ursprüngliches Problem
Das bisherige Geo-Suggest Skript wartete auf die Inhalte des Consent-Dialogs, bevor es sein Positionierungs-CSS installierte. Da DOM-Observer Inhalte von Shadow-Roots nicht direkt beobachten können, führten verzögerte Retries dazu, dass ein bereits sichtbarer Dialog nachträglich neu positioniert wurde.
Dies führte auf Mobilgeräten zu einem Cumulative Layout Shift (CLS) von bis zu 0.417–0.849.
Implementierte Lösung
Der Kandidat installiert das identische CSS sofort, sobald die offene usercentrics-root Shadow Root existiert. Gezielte Lookups ersetzen teure Voll-Dokument-Scans.
Ein Observer mit begrenztem 50 ms Polling fängt verzögertes Shadow-Attachment ab, mit automatischer Bereinigung nach Erfolg oder maximal 30 Sekunden. Consent-Texte, Buttons, Standardwerte und Länderauswahllogik blieben unberührt.
Tatsächliche Live Vorher/Nachher Audits (CloudLab Production)
Gemessen mit lokalem Chrome/Lighthouse 13.5.0 Harness, frischer Browser-Speicher, simuliertes Mobilgerät, 3 Durchläufe pro Gruppe auf der Live-Site.
| Median Metrik | Live Vorher | Live Nachher | Veränderung | Bewertung |
|---|---|---|---|---|
| Cumulative Layout Shift (CLS) | 0.417 | 0.000 | -100% | Vollständig eliminiert in allen 3 Testläufen |
| Performance Score | 39 | 61 | +56.4% | Signifikanter Anstieg (Spannweite 60–65) |
| Largest Contentful Paint (LCP) | 6.188 s | 5.481 s | -11.4% | Verbessert (Spannweite 5.23–7.43 s) |
| First Contentful Paint (FCP) | 4.695 s | 3.906 s | -16.8% | Spürbar schnellere Erstanzeige |
| Total Blocking Time (TBT) | 145.5 ms | 79.5 ms | -45.4% | Haupt-Thread Entlastung |
| Server Response Time (TTFB) | 506 ms | 416 ms | -17.8% | Verbesserte Varnish Cache-Antwort |
Veröffentlichte Produktions-Dateien & SHA-256 Hashes
geo-suggest.js:
2c6e61ce11993aca661af01c9c46c15db830b8605ea8cf1e83c6d9b08b4aacd1
languages.phtml:
4ac352bebfa7ba98d6b2e6f3713a1822d9b59d9b31c4b193f556405ac35a56a6
languages.phtml (generiert / minifiziert):
9d8a81d0aae0b0a811e25f1c63782e7634a89870b992f6822b8b79206baac962
geo-suggest.min.js (served):
36a818c8b5ea7f3718f7fe3de7ea7ca6b1d1d8647dd7f7902b53ba2bf716338eSicherheits- & Rollback-Garantien
Die Veröffentlichung erfolgte atomar mit Einzelumbenennungen und versioniertem Template (`?v=20260924-consent-early`). Ein vollständiges Rollback-Manifest mit unveränderten Original-Byte-Daten liegt außerhalb des Document-Roots sicher bereit.
Startseiten Karussell-Bilder & Review Deferral
Reduktion von über 40.8 Megabyte unnötigem Bild-Overhead auf der Startseite sowie Deferral des eTrusted Review-Loaders.
Technische Umsetzungsdetails
Präzise 800x800 Skalierung für 400x400 Display-Slots
Sieben Startseiten-Karussell JPEGs wurden von Originalauflösungen (über 5000px) auf 800x800 für Retina-Displays skaliert. Farbräume wurden verlustfrei nach sRGB konvertiert, Metadaten bereinigt und als progressive JPEGs mit Qualität 84 gespeichert.
eTrusted Reviews: Lazy Loading via Viewport-Trigger
Entfernung des begierigen (eager) eTrusted App-Loaders aus Magento_Cms/layout/cms_index_index.xml. Stattdessen wird das Skript erst dann geladen, wenn der Nutzer tatsächlich in die Nähe der Bewertungs-Sektion scrollt.
Strikte URL- und Check-Integrität
Bestehende Bild-URLs blieben unverändert, um CMS-Abhängigkeiten zu vermeiden. Alle 7 öffentlichen URLs liefern HTTP 200 und exakte SHA-256 Hashes.
Lighthouse Messvergleich (Startseite vor / nach Bildoptimierung)
| Gerät | Score | LCP (Sekunden) | TBT (ms) | Transfergröße |
|---|---|---|---|---|
| Mobil (Vorher) | 51 – 56 | 13.63 – 19.38 s | 60 – 159 ms | ~2.02 MB |
| Mobil (Nachher) | 57 – 60 | 5.58 – 7.48 s | 101 – 198 ms | 1.92 MB |
| Desktop (Vorher) | 56 – 58 | 5.35 – 6.80 s | 0.0 ms | 44.55 MB (!) |
| Desktop (Nachher) | 61 | 4.68 s | 0.0 ms | 3.63 MB (-91.8%) |
Critical CSS & Blockierungs-Analyse (Katalog)
Detaillierte Analyse des Render-Blocking CSS auf Kategorie-Seiten (/druck-produkte) und Entwurf einer asynchronen Ladestrategie via Penthouse.
Warum die Kategorie-Seite mobil 33 und Desktop 39 erzielte
porto-icons.woff2 wurde doppelt geladen wegen fehlerhafter Cache-Busting-Query-Parameter.font-display: swap.Architektur des Critical CSS Kandidaten
1. Inline Critical Stylesheet
In Magento_Theme/templates/root.phtml werden critical.css (76 KB) und critical-porto.css (12 KB) vorab inline eingebettet. Volle Stylesheets werden zu media="not all" mit einem onload-Switch umgeschrieben.
2. Penthouse Generator Pipeline
Generator-Skript build-critical-css.mjs extrahiert selektive CSS-Regeln für 375px (Mobile) und 1366px (Desktop) unter strikter Erhaltung der Original-Kaskadenreihenfolge.
Staging Testergebnis & Empfehlung
Auf OCI Staging erzielte der Kandidat gemischte Resultate: Zwar sank FCP drastisch, jedoch verursachte das nachträgliche Umschalten der vollen Stylesheets Layout-Shifts auf Magezon-Zeilen. Dieser Kandidat wurde daher nicht ungeprüft auf CloudLab überführt, sondern führte zur Entwicklung der robusteren Releases v4, v5 und v6.
Isolierte VM & Architektur-Verifikation
Zwei getrennte Staging-Varianten auf Oracle Cloud Infrastructure (OCI) zur risikofreien Validierung vor Produktions-Releases.
| Variante | Öffentlicher Hostname | VM Listener | Zweck & Konfiguration |
|---|---|---|---|
| Original Baseline | https://staging-baseline.internal |
Port 8181 (Isolated) |
Unveränderte Baseline, Produktions-Abbild mit anonymisierter DB |
| Modifizierter Kandidat | https://staging-candidate.internal |
Port 8182 (Isolated) |
Performance-Patches, reservierte Bilddimensionen, Eager Banner |
Sicherheits- & Sanitization-Regeln auf Staging
Datenschutz & DSGVO
Sämtliche Kunden-, Bestell- und Admin-Daten wurden vor Bereitstellung durch Sanitizer vollständig entfernt.
Netzwerk-Isolation
Ausgehende Applikationsverbindungen blockiert, Third-Party Tracker per CSP geblockt, kein Mailversand.
Automatisierte Tests
npm run verify prüft Homepage, Kategorien, Produkte, HTTP 405 bei Schreibzugriffen und Noindex-Header.
Chronologisches Engineering-Arbeitsprotokoll
Lückenlose Dokumentation aller Bereitstellungen, Ursachenanalysen (Root-Cause-Analysen), Release-Meilensteine und Systemoptimierungen.
Release v6: Usercentrics v3 Loader & RequireJS 404 Behebung
25. September 2026 (Abends)be5b4bb, e1e6616
Static: 1790332923
Ursachenanalyse der 404-Fehler: mage/requirejs/mixins.js leitete fälschlicherweise configure() an den internen $-Kontext weiter. Dadurch lud der Kontext die Abhängigkeiten unminifiziert ein zweites Mal nach. Durch den Patch wurde dies behoben.
Usercentrics v3 Upgrade: Umstieg auf web.cmp.usercentrics.eu/ui/loader.js. Dialog erscheint bereits innerhalb von 40 ms nach dem Load-Event, CLS 0 auf der Startseite, kein Layout-Shift durch den Dialog mehr messbar.
Release v4 & v5: Font-Fallback Anpassung & Event-Deferral
25. September 2026 (Nachmittags)6004d01, 6ff2275
PerformanceObserver-Traces zeigten: Vor DOMContentLoaded renderte die Header-Topzeile (Fjalla One 10px) in einer um 14% breiteren Systemschrift, was zu einem 26px Absacken des Headers führte. Gelöst durch größenbereinigte lokale Fallback-Schriften (Arial 86.3%, Roboto 87.4%). Trusted Shops und Smartsupp werden nun strikt erst bei echten Nutzerinteraktionen (isTrusted) freigegeben.
Release v3: Bildverarbeitungs- & Ressourcen-Optimierung
24.–25. September 2026Optimierung der Medienverarbeitung: Konfiguration strenger Ressourcen- und Durchsatz-Grenzwerte für die Amasty-Bildwarteschlange (AVIF/WebP-Konvertierung auf 7.7 GB Host-Instanzen). Gewährleistung stabiler Arbeitsspeicher-Verfügbarkeit für Caching (Varnish) und Suche (Elasticsearch) während intensiver Hintergrund-Stapelverarbeitung.
Amasty JS Super-Bundling Testreihe (OCI Staging)
24. September 2026 (Nachts)1790272072
Replikation der Amasty Optimierung: Request-Reduktion auf der Kategorie von 305 auf 57 Anfragen (268 Skriptdateien auf 29 reduziert). Blocking Time sank von 381 ms auf 255 ms.