eggs Website Relaunch

Unsere Website auf Edge Delivery Services

Zurück zu Insights

Einleitung

Ein Website-Redesign und -Relaunch ist ein großes Unterfangen, und der Launch von Edge Delivery Services Ende 2024 hat uns den finalen Impuls gegeben, diesen bedeutenden Schritt zu wagen. Wir wollten unsere Website auf der neuesten Adobe-Technologie umsetzen und daher fiel uns die Wahl auf Edge Delivery Services leicht.

Unsere bisherige Website hatte uns seit 2017 sehr gute Dienste erwiesen, nach vielen Jahren immer noch gut ausgesehen und unsere Firma wunderbar repräsentiert. 2023/24 kamen jedoch die ersten Impulse für einen Website-Relaunch; ein technologischer und optischer Neustart unserer Website sollte neue kreative Ideen wecken. Die neue Website sollte dynamischer sein, transaktionaler, interaktiver und ansprechender.

Jetzt galt es zu erforschen, wie unsere Anforderungen mit Edge Delivery Services umzusetzen sind und welche Tools und Möglichkeiten uns Adobe zur Verfügung stellt, um auch komplexe Anforderungen zu lösen.

Ein großes Augenmerk wurde auf den Lighthouse Score, vor allem auf die Performance, gelegt. Adobe verspricht mit Edge Delivery Services (abgeleitet von „Edge Computing", einer Technologie zur dezentralen Datenverarbeitung und -auslieferung über CDN-Netzwerke) einen Performance Score von nahezu 100. Dieses Versprechen wollten wir natürlich auch auf unserer Website abbilden.

false

Technische Umsetzung

Die erste Frage, die wir uns gestellt haben, war, welche Authoring-Methode wir einsetzen möchten. Edge Delivery Services bietet zahlreiche Möglichkeiten: vom dokumentenbasierten Authoring über Document Authoring mit da-live bis hin zum AEM-basierten Authoring in AEMaaCS mit dem Universal Editor. Darüber hinaus stellt Adobe auch Headless-Authoring-Lösungen bereit, sodass wir flexibel zwischen verschiedenen Ansätzen wählen konnten.

Da wir so viele Jahre mit der AEM Sites UI gearbeitet und großen Gefallen daran gefunden haben, wollten wir uns davon nicht trennen und haben beschlossen, den Weg mit dem Universal Editor zu gehen.

Er ist keine 1:1-Kopie des AEM Sites Page Editors. Der optisch ähnliche Universal Editor stellt für Content-Autoren eine mächtige Lösung dar. Die Nutzerführung ist ein wenig anders und es ist auch keine "Feature-complete" Kopie des AEM Sites Page Editors. So fehlt z. B. das Responsive Grid, das es Autoren erlaubt, Komponenten für verschiedenste Geräte und Bildschirmgrößen in die richtige Größe zu ziehen und mehrere Komponenten nebeneinander darzustellen. Diese Flexibilität bietet der Universal Editor dem Content-Autor nicht. Für visuell komplexere Komponenten wie z. B. unserem Article-Parallax-Block mussten wir uns daher etwas einfallen lassen.

medium

Der Parallax-Effekt wird durch eine Zwei-Spalten-Struktur implementiert, bei der Autoren im Dialog das Hintergrundvideo/-bild und zwei Textblöcke mit zugehörigen Bildern definieren können. Adobe Edge Delivery Services rendert die Inhalte zunächst als einfache, sequenzielle HTML-Elemente, die der Code dann durch DOM-Manipulation in zwei Spalten reorganisiert: links eine vertikale Anordnung von Texten und Bildern, rechts das fixierte Video/Bild mit Parallax-Effekt.

Die Authoring-Erfahrung ermöglicht dabei die separate Konfiguration aller Komponenten (Überschriften, Texte, Bilder, Links und sogar eine optionale Google-Maps-Integration), ohne dass der Autor sich um die komplexe Layout-Struktur kümmern muss.

Adobe Managed CDN

Da unser Authoring komplett im Universal Editor von AEMaaCS erfolgt, nutzen wir das Adobe Managed CDN, um unseren Content schnell und performant an unsere Website-Besucher auszuliefern. Die Konfiguration dazu liegt allerdings – anders als der restliche Website-Code – nicht in unserem Edge Delivery Services Repository, sondern in unserem AEMaaCS Repository.

Dort wird die Konfiguration als cdn.yaml im Root-Verzeichnis unter /config abgelegt und anschließend über eine Config-Deployment-Pipeline in AEMaaCS deployed.

Da die Config standardmäßig auf dem AEM-Publisher liegt, wird unsere Edge Delivery Services Umgebung als Origin definiert und der gesamte Traffic läuft hierüber.

Mit unserem Relaunch haben wir auch unsere Website auf internationale Regionen und Locale umgestellt (de_DE).

Die cdn.yaml bietet uns darüber hinaus mächtige Redirect-Konfigurationstools, die uns bei unserem Wechsel unserer beiden Domains eggs.de für Deutschland und eggs.ro für Rumänien auf eggsunimedia.com stark unterstützen konnten und uns weitestgehend umfangreiche Redirect-Tabellen für Legacy-Links erspart haben.

false

kind: "CDN"

version: "1"

metadata:

envTypes: ["prod"]

data:

origins:

- name: "eds-origin"

domain: "main--repo--owner.aem.live"

originSelectors:

rules:

- name: "route-to-eds"

when:

allOf:

- reqProperty: tier

equals: "publish"

- reqProperty: domain

equals: "www.new-domain.com"

action:

type: selectOrigin

originName: "eds-origin"

redirects:

rules:

- name: "legacy-to-new-redirect"

when:

reqProperty: domain

equals: "www.legacy-domain.com"

action:

type: redirect

status: 301

location: "https://www.new-domain.com{reqProperty: path}"

grey-background

Für Ausnahmefälle, also Legacy-Links, die nicht von unseren Redirect-Rules abgedeckt werden, hat Adobe jedoch auch eine sehr gute Lösung entwickelt: Diese können über eine Redirect-Tabelle, die in der Authoring-Umgebung liegt, gepflegt werden – völlig unabhängig vom dokumentenbasierten Ablageort wie SharePoint, AEM o. ä.

medium

Natürlich kann man dies auch ganz bequem lokal in einer Excel-Datei pflegen und diese dann in AEM oder auf SharePoint hochladen.

Lighthouse Score

Der Google Lighthouse Score, ein kostenloses Tool zur Messung der Qualität und Leistung einer Website, bewertet verschiedene Bereiche einer Website wie die Performance, den SEO-Score, Best Practices sowie die Barrierefreiheit.

Ein hoher Lighthouse Score bedeutet, dass die eigene Website schnell lädt, benutzerfreundlich ist und technisch einwandfrei funktioniert und somit zu besseren User-Experiences führt, was weniger Absprünge und bessere Rankings bei Google mit sich bringt.

Edge Delivery Services unterstützt genau hierbei: Durch schnelles und effizientes Edge-Caching, automatische Bildoptimierung und eine effiziente Content-Auslieferung sorgt es dafür, dass unsere Website blitzschnell geladen wird und stets einen perfekten Lighthouse Score aufweist.

Edge Caching & CDN: Inhalte werden global verteilt über CDN-Caching, was zu sehr schnellen Ladezeiten führt

Optimierte HTML-Auslieferung: HTML wird am Edge gerendert (Server Side Rendering), wodurch Time to First Byte (TTFB) drastisch sinkt
Image Optimization: Bilder werden automatisch in modernen Formaten (z. B. WebP) und passenden Größen ausgeliefert
Minification: JS-Code und CSS-Stylesheets werden minifiziert

Ein Detail, das ich hier jedoch noch gar nicht angesprochen habe, ist die sehr häufige Nutzung von Videos auf unserer Website. Die optimierte Auslieferung von Video-Assets wird von Edge Delivery Services nicht out-of-the-box unterstützt, wie es bei Image-Assets der Fall ist. Im nächsten Kapitel schauen wir uns also an, wie wir diese Anforderung gelöst haben.

Integration von Dynamic Media für Videos

Edge Delivery Services bietet Standard-Blocks für die einfache Integration von Bildern. Für eine Integration von Videos über Dynamic Media ist das nicht vorgesehen, weshalb wir Dynamic Media Videos manuell eingebunden und konfiguriert haben.

Das erfordert etwas zusätzlichen Entwicklungsaufwand, um Video Dynamic Media programmatisch vom Dynamic Media Server holen. Der Aufwand lohnt sich, denn Dynamic Media ermöglicht eine hochperformante und adaptive Videoauslieferung, die perfekt mit Edge Delivery Services zusammenspielt und so zur optimalen Nutzererfahrung beiträgt.

async function _createVideo_(videoPath: string, block: HTMLElement, cssClass: string): Promise<HTMLElement> {

try {

const DM_VIDEO_URL = `${DM_VIDEO_SERVER_URL}/eggsserver/${videoPath}`;

const DM_POSTER_URL = `${DM_SERVER_URL}/eggsserver/${videoPath}?bfc=on&fmt=webp&qlt=${preloadQuality}&wid=${posterImageWidth}`;

const videoProfiles = [

{ width: mobileResolution, url: `${DM_VIDEO_URL}-0x360-785k` },

{ width: tabletResolution, url: `${DM_VIDEO_URL}-0x540-2135k` },

{ width: desktopMediumResolution, url: `${DM_VIDEO_URL}-0x1080-4800k` },

];

const selectedProfile = videoProfiles.reduce((best, current) => {

return posterImageWidth >= current.width && current.width > best.width ? current : best;

}, videoProfiles[0]);

const videoContainer = document.createElement('div');

videoContainer.dataset.component = 'video-container';

videoContainer.classList.add(cssClass);

const videoElement = document.createElement('video');

videoElement.muted = true;

videoElement.loop = true;

videoElement.controls = false;

videoElement.preload = isAEMEditor ? 'none' : 'auto';

videoElement.setAttribute('muted', '');

videoElement.setAttribute('aria-hidden', 'true');

videoElement.setAttribute('playsinline', 'true');

videoElement.setAttribute('webkit-playsinline', 'true');

videoElement.setAttribute('fetchpriority', 'low');

videoElement.poster = DM_POSTER_URL;

const source = document.createElement('source');

source.src = selectedProfile.url;

source.type = 'video/mp4';

videoElement.appendChild(source);

videoContainer.appendChild(videoElement);

block.appendChild(videoContainer);

if (!isSafariBrowser) {

videoElement.load();

}

videoElement.play().catch((err) => {

console.error('Autoplay failed:', err);

});

return block;

} catch (error) {

console.error('Error creating video:', error);

throw error;

}

grey-background

Die neu von Adobe entwickelte Open API Lösung für Dynamic Media bietet uns flexible Möglichkeiten, Dynamic Media Videos dynamisch in unsere Website einzubinden.

Der große Vorteil: Anstatt statisch festgelegte Assets auszuspielen, können wir mit dieser Lösung Videos je nach Kontext und Nutzergerät gezielt anpassen und steuern.

page speed insights

small

Ein weiterer Vorteil ist das Smart Cropping. Dynamic Media erkennt KI-gestützt automatisch die wichtigsten Bildbereiche und schneidet Videos und Bilder so zu, dass sie auf allen Endgeräten optimal angezeigt werden und der relevante Teil des Assets im Fokus bleibt. So ist beispielsweise in einem Video immer die dargestellte Person im Fokus, nicht der irrelevante Hintergrund, was Qualität und Performance auf allen Endgeräten deutlich verbessert.

Herausforderungen & Learnings

Unser internes Website-Team hatte jahrelang hauptsächlich mit klassischen AEM-Projekten gearbeitet, weshalb der Einsatz einer neuen Technologie wie Edge Delivery Services natürlich mit einer gewissen Lernkurve verbunden war.

EDS verfügt über eine sehr gute und umfangreiche Dokumentation (https://www.aem.live/), man kann trotz herausfordernder Anforderungen schnell Erfolge verzeichnen. Wir haben im Zuge des Projekts neue Tooling-Konzepte kennengelernt, die sich deutlich von klassischen AEM-Projekten unterscheiden.

Anders als bei klassischen AEM-Projekten werden Features wieder eigenhändig umgesetzt – dafür aber sehr schnell und effizient. Bei AEM griff man in den vergangenen Jahren, wie viele wissen, auf Core Components zurück. Auch musste bezüglich des Markups umgedacht werden, da dieses nun komplett von Edge Delivery Services geliefert wird und nur noch clientseitig „dekoriert" werden muss.

export default function _decorate_(block: HTMLElement): void {

if (block) {

const childrenArray = Array.from(block.children);

for (let i = 0; i < childrenArray.length; i += 3) {

const row = document.createElement('div');

row.classList.add(`${blockName}__row`);

childrenArray.slice(i, i + 3).forEach((child) => {

child.classList.add(`${blockName}__card-container`);

child.innerHTML = _generateCardDom_(Array.from(child.children), blockName);

row.appendChild(child);

});

if (row.innerHTML.trim()) {

block.appendChild(row);

}

grey-background

Die Architektur eines Edge Delivery Services Projekts unterscheider sich stark von einem klassischen AEM-Setup und wirkt sich daher auch auf die tägliche Arbeit aus. Es ist ein Umdenken erforderlich: Denn der „Change“ von der Arbeit mit einem monolithischen System zur Arbeit mit blockbasierten Content-Bausteinen ändert die Herangehensweisen grundlegend.

Mit Edge Delivery Services fällt die beeindruckende, aber auch komplexe und mit hohem Wartungsaufwand und einer hohen Lernkurve verbundene hochmodulare Architektur mit OSGI-Bundles gänzlich weg. Während viele Backend-Logiken in AEM über Servlets und OSGI Services abgehandelt wurden (beispielsweise der Mailversand bei Kontaktformularen), wird dies nun gänzlich vom Adobe App Builder übernommen.

Dadurch entfällt viel Komplexität im Backend und der Fokus verschiebt sich auf schnelles und performantes Rendering und eine schlankere, modulare Frontend-Entwicklung.

Auch Features wie GraphQL und SQL2-Queries, z. B. zur Auslieferung unserer Team-Overview-Seite oder Blogübersicht, werden durch die Helix Query in Edge Delivery Services abgelöst, womit Edge Delivery Services Page Content beliebig indexiert werden kann.

insights-de-de:

include:

- /de/de/insights/**

exclude:

- /de/de/insights

- /de/de/insights/blog

- /de/de/insights/events

- /de/de/insights/news

- /de/de/insights/success-story

- /content/**

target: /de/de/insights-index.json

properties:

insightsImage:

select: head > meta[property="og:image"]