Meetup der AEM User Group Deutschland bei eggs unimedia in München

Performance-Optimierung im AEM-Frontend

Der erste Vortrag von Joel Köbner, Senior AEM Consultant bei eggs unimedia, beschäftigte sich mit der Performanceverbesserung von Websites. Dabei ging er auf Ursachen ein, weshalb Websites langsam sind, warum man aus Unternehmenssicht auf eine gute Performance achten sollte, wie man Performance misst und welche Möglichkeiten es gibt, die Website-Performance zu verbessern.​

Große Websites von Enterprise-Kunden sind über viele Jahre hinweg entstanden und wurden dabei häufig von unterschiedlichen Dienstleistern betreut. Das Spektrum der Code Qualität reicht dabei von sehr gut bis absolut mangelhaft. Darunter leidet auch die Website-Performance und lange Ladezeiten sind ein häufiges Problem großer und über die Jahre hinweg entstandener Webapplikationen. Lange Ladezeiten sorgen für Abbrüche, d.h. dem Unternehmen gehen Besucher und Kunden verloren. Aus diesem Grund ist die Website-Performance geschäftskritisch und rückt immer stärker in den Fokus.

Es gibt viele Möglichkeiten, Performance-KPIs zu definieren. Dazu gehören z.B. “Time-To-First-Byte”​, “First Paint”, “Visually Complete”, “Time to Interactive”, “Speed Index”​ oder der neue Dynatrace-Standard “User Action Duration”. Welche KPIs definiert werden, sollte vom Anwendungsfall abhängig gemacht werden.

Zur Performanceverbesserung stehen Frontend-Entwicklern viele Möglichkeiten zur Verfügung. Dazu gehören Maßnahmen im HTML („Light weight“​, „Styles First“, „Scripts Last“​ etc.), CSS („Light weight CSS“, etc.)​, JavaScript („Render-Blocking JS​“, Nachladen von JavaScript-Bibliotheken, etc.), Browser, Rendering, HTTP2 und für das Rendering von Bildern.

Nachladen von JavaScript-Bibliotheken in AEM

Christoph Behounek, Managing Consultant bei eggs unimedia, behandelte in seinem Vortrag die Performance-Optimierung durch Nachladen von JavaScript-Bibliotheken in AEM anhand eines konkreten Kundenbeispiels.

Dabei ging er insbesondere auf die Möglichkeiten durch die Verwendung von AMD („Asynchronous Module Definition“) ein. Bei AMD handelt es sich um eine JavaScript-Programmierschnittstelle, mit deren Hilfe Module und deren Abhängigkeiten asynchron geladen werden können.

Anschließend beschrieb er die „Component Loader“-Funktion, die eggs unimedia zur Website-Performanceoptimierung in diversen Projekten verwendet. Bei einer klassischen Initialisierung wird für jedes Komponenten-Script das komplette „Document Object Model“ (DOM) geparst. Bei der Verwendung eines Component Loaders wird das DOM nur ein einziges Mal für alle Module verarbeitet, d.h. die Komponenten werden gemäß des kritischen Render-Pfads initialisiert.

Für den Besucher der Website hat dies den positiven Effekt, dass die Website schneller geladen wird, da ausschließlich die relevanten Teile der Website priorisiert initialisiert und gerendert werden.

Migration von AEM6.x auf AEM6.4
Beim letzten Vortrag von Jörg Hoh, Senior Technical Architect bei Adobe, ging es um AEM Migrationen auf die aktuelle AEM6.4 Version.  Er behandelte dabei die Beweggründe für eine Migration, skizzierte die notwendigen Vorarbeiten und Nacharbeiten und beschloss den Vortrag mit seinen persönlichen Empfehlungen.

Gründe, die für eine Migration sprechen, sind ganz unterschiedlicher Natur. Dazu gehören neue Funktionalitäten, die das CMS bietet, wie bspw. „Experience Fragments“, „Smart-Cropping“, „Smart-Tagging“ oder ein aktueller Plattform-Support für bspw. Betriebssysteme und Datenbanken. Ein anderer Beweggrund ist das neue Touch UI für Redakteure, damit sie über mobile Geräte wie Tablets oder Smartphones Content einstellen können.

Eine Migration sollte in jedem Fall mit einer Explorationsphase starten. In dieser wird in Erfahrung gebracht, welche eigenentwickelten Implementierungen angepasst werden müssen, welche Abhängigkeiten es gibt oder welche verwendeten Bibliotheken ggf. nicht mehr unterstützt werden. In dieser Phase wird der erwartete Umfang einer Migration ersichtlich. Unternehmen sollten bei einer Migration darauf achten, die Migration gekapselt durchzuführen und diese nicht mit weiteren Projekten zu vermengen. Das Einbinden neuer Features oder Funktionen, wie bspw. ein Touch UI für Redakteure, sollten nachgelagert folgen. Diese Projekte sind dann meist auch umfangreicher als die reine Migration.

Alle Vorträge waren sehr interaktiv und es gab eine rege Beteiligung seitens der Teilnehmer. Nach den Vorträgen startete der Networking-Teil des Abends und die Teilnehmer und Präsentatoren unterhielten sich bei Pizza und Kaltgetränken. Um 22:30 Uhr verließen die letzten Gäste die Büroräume von eggs unimedia.

Der Organisator bei Adobe, Nour Al Dares aus dem Bereich Customer Success Management, zeigte sich sehr zufrieden mit der Veranstaltung. „Das war das bisher teilnehmerreichste AEM Meetup in der DACH Region. Das Teilnehmer-Feedback war äußerst positiv und ich möchte mich herzlich bei eggs unimedia für die Durchführung dieses MeetUps bedanken. Die Themen waren klasse und ich freue mich schon auf die Organisation des nächsten Meetups bei eggs unimedia im Sommer 2019!“

Interessierte Teilnehmer können sich über diesen Link zur AEM Meetup Gruppe anmelden:
https://www.meetup.com/de-DE/AEM-User-Group-Deutschland/?_locale=de-DE

Die Blogbeiträge zu „Performance Optimierung im AEM Front-End“ und „Nachladen von JavaScript Bibliotheken in AEM“ werden in Kürze unter https://www.eggs.de/de/blog.html veröffentlicht.