Optimierung der Web-Performance mit phasiertem Rendern in Adobe Experience Manager Sites.
Schwerfällige, langsam ladende Web-Seiten können zu Frustration führen und Besucherinnen und Besucher verschrecken. Adobe Experience Manager Sites mit Edge Delivery Services wurde für erstklassige Performance entwickelt, damit Benutzerinnen und Benutzern Inhalte schnell bereitgestellt werden.
In diesem Artikel beschreiben wir das phasierte Rendern im Content-Management-System, bei dem Webcontent in drei Phasen geladen und die Payload der Seite aufgeteilt wird.
Darum ist phasiertes Rendern wichtig.
Phasiertes Rendern verbessert nicht nur das Kundenerlebnis, sondern optimiert auch die Site-Performance gemäß den Scores von Google Lighthouse und Core Web Vitals.
Wenn Web-Seiten in Phasen geladen werden, erzielt ihr einfacher hohe Scores bei Google Lighthouse und Core Web Vitals, was sich positiv auf folgende Aspekte auswirkt:
- Suchmaschinen-Optimierung (SEO) und Traffic: Neben anderen Faktoren wie Relevanz wirken sich Core Web Vitals vor allem auf Such-Rankings aus. Je besser die Core Web Vitals, desto höher euer Rang in den Suchergebnissen. Höhere Rankings in Suchmaschinen verbessern den Bekanntheitsgrad eurer Website und führen zu mehr Traffic.
- Absprungrate: Höhere Website-Performance und schnellere Ladezeiten sorgen für eine bessere User Experience, was die Absprungraten reduziert.
- Interaktion und Conversion: Mit schnelleren Seitenladezeiten steigen die Verweildauer, die Interaktionen und die Conversions.
So funktioniert phasiertes Rendern in Experience Manager Sites.
Experience Manager Sites mit Edge Delivery Services lädt Webcontent in drei Phasen:
- Phase E („Eager“): Diese Phase lädt alles Nötige, um den Largest Contentful Paint (LCP) zu erzielen, bei dem die Zeit zum Laden der Hauptseite gemessen wird und der für die wahrgenommene Ladezeit für Benutzerinnen und Benutzer steht, die einen wesentlichen Aspekt der User Experience ausmacht.
- Phase L („Lazy“): Diese Phase lädt Ressourcen, die hauptsächlich vom selben Ursprung stammen und nicht entscheidend für den LCP sind.
- Phase D („Delayed“): Diese Phase lädt alles weitere, zum Beispiel Drittanbieter-Tags oder Assets, die nicht wesentlich für das sichtbare Erlebnis sind.
Sehen wir uns die drei Phasen im Detail an.
Phase E – „Eager“.
Phase E fokussiert sich auf die optimale LCP-Ladezeit, die beschreibt, wann das größte Element eurer Seite – eine Grafik, ein Video oder Text – geladen ist. Je schneller der LCP, desto früher können Benutzerinnen und Benutzer mit eurer Seite interagieren.
In dieser Phase wird alles geladen, was für die Anzeige des echten LCP erforderlich ist. Hierzu zählen in der Regel das Markup, die CSS-Stile und JavaScript-Dateien.
Phase L – „Lazy“.
Während Phase L wird nur der Anteil der Payload geladen, der keine Auswirkungen auf die Total Blocking Time (TBT) hat. TBT steht für die Zeit, in der eine Benutzerin oder ein Benutzer nicht mit eurer Web-Seite interagieren kann, was die Site-Performance und die Core Web Vitals negativ beeinflusst.
In dieser Phase werden Blöcke (JavaScript und CSS), die verbleibenden Grafiken, die nicht entscheidend für den LCP waren, und andere nicht blockierende JavaScript-Bibliotheken geladen. Auch die Kopf- und Fußzeilen der Seite werden in dieser Phase asynchron in ihren jeweiligen Blöcken geladen, da sie nicht entscheidend für den LCP sind.
Phase D – „Delayed“.
Phase D lädt die Anteile der Payload, die sich nicht unmittelbar auf die User Experience auswirken. Hierzu zählen Drittanbieter-Tags, Marketing-Tools, Consent-Management, erweiterte Analysen und Chat-Module. Diese werden erst in der dritten Phase geladen, da sie häufig große JavaScript-Dateien generieren, die die Performance beeinträchtigen.
Der Beginn dieser Phase sollte bis mindestens drei Sekunden nach dem LCP-Event verzögert werden, damit sich die anderen für die User Experience wichtigen Komponenten stabilisieren können.
Beim phasierten Rendern werden Elemente strategisch basierend auf deren Einfluss auf die User Experience geladen, um eine hohe Website-Performance sicherzustellen. Mit diesem Ansatz des phasierten Renderns in Verbindung mit unserer Edge-Architektur, Real-User Monitoring (RUM) und persistentem Caching stellt Edge Delivery Services in Experience Manager Sites schnelle Ladezeiten und hohe Scores bei Google Lighthouse und Core Web Vitals bereit – alles fertig vorkonfiguriert.
Weitere Details zum phasierten Rendern findet ihr in unserer technischen Dokumentation.
