WEB ACCELERATOR SEVENVAL TECHNOLOGIES GMBH

Transkript

1 WEB ACCELERATOR Der Web Accelerator bündelt alle Maßnahmen der Frontend-Performance-Optimierung, um Ladezeiten zu verkürzen, das Nutzererlebnis zu verbessern und den Umsatz zu steigern. Ladezeiten über drei Sekunden im Browser führen zu einer hohen Absprungrate, was am deutlichsten im E-Commerce an Einbrüchen der Conversion Rate zu beobachten ist. Der Web Accelerator bündelt alle Methoden der Frontend-Optimierung in einem Produkt, um lange Ladezeiten für Ihre Nutzer zu verkürzen. Diese Optimierungen werden durch die Reduktion der Datenmenge und das Auflösen von Abhängigkeiten im Browser erreicht. Das Produkt lässt sich einfach in das existierende Frontend integrieren und es sind keine Änderungen im existierenden Code notwendig. Regelmäßige Updates von Sevenval sorgen dafür, dass der Web Accelerator immer die aktuellsten Optimierungsmaßnahmen durchführen kann. Die Ladezeiten von Webseiten können mit dem Web Accelerator erheblich verringert werden. Bilder machen einen Großteil der übertragenen Datenmenge aus. Der Web Accelerator übernimmt die Skalierung und die Komprimierung und wählt das passende Bildformat. Dabei wird die Datenmenge bis zu 80% reduziert. Zudem werden HTML, CSS und Java-Script- Dateien schlanker durch das automatische Komprimieren des Codes (Minifying). Java- Scripts von Drittanbietern, wie zum Beispiel Zählpixel, können asynchron geladen werden, um sich von deren Verfügbarkeit und Antwortzeiten unabhängig zu machen. Das Delayed Image Loading lädt Bilder erst nachdem die Seite fertig initialisiert ist, wobei die Priorisierung der Bilder selbst bestimmt werden kann sowie automatisch nur für den sichtbaren Bereich aktiviert werden kann. Funktionen wie das Partial Page Loading verwandelt die existierende Seite in eine dynamische Web Application, in der nur die Teile der Seite nachgeladen werden, die sich verändern. Dabei bleiben alle üblichen Vorteile von Webseiten erhalten, wie das Prinzip des Progressiven Enhancement, teilbare URLs und SEO-Aspekte.

2 RESPONSIVE WEB FILTER Der Responsive Web Filter ermöglicht eine hochwertige, responsive Darstellung von Webseiten für alle Browser und Geräte. en Die Komplexität von Responsive Web Design und mobiler Internetnutzung steigert die Kosten im Projekt und mindert die Qualität beim Nutzer. Bei der Projektumsetzung und der Pflege von Webseiten entstehen hohe Kosten durch Anpassungen an unterschiedliche Web- Browser und mobile Geräte. Bei der Nutzung der Webseite wird der Browser mit vielen Verarbeitungsprozessen belastet. Das Produkt integriert sich in den täglichen Workflow und ermöglicht eine Reaktion auf den Nutzungskontext (Delivery Context), wie zum Beispiel die dynamische Filterung von Webseiten-Inhalten und Prozessen. Die Optimierung der Webseitenauslieferung beginnt somit auf dem Server, um den Browser zu entlasten. Dabei werden Cross-Browser-Fehler reduziert, das Frontend ist wieder beherrschbar und die Kosten für die Erstellung und Wartung werden reduziert. Der Delivery Context wird durch eine Kombination von Feature- und Browser- Detection erzeugt und steht dem Entwickler in verschiedenen Formen zur Verfügung. Der Responsive Web Filter ermöglicht zum Beispiel ein Routing der Quellsysteme, stellt zusätzliche Parameter für das CMS zur Verfügung und ermöglicht eine Ansprache ihrer Kunden über die klassischen Kanäle Desktop, Tablet und Mobile. Außerdem können HTTP Requests für die Verarbeitung angereichert werden. Nach der Filterung können Adaptation Instructions eingesetzt werden. Diese erlauben abhängige Berechnungen auf Grundlage der gewünschten Filter- Parameter, die die komplexe Browser und Gerätelandschaft greifbarer machen.

3 ADAPTIVE COMPONENTS Adaptive Components sind Webseitenelemente, die angepasst, wiederverwendet und einfach gepflegt werden können. Eine Webpräsenz wird häufig nicht aus einem System gespeist, sondern besteht aus vielen Systemen, verteilt über die gesamte Organisation mit ihren Länder- und Business-Units. Die Corporate Identity des Unternehmens für alle Versionen der Seite konsistent zu halten, ist sehr aufwendig genauso wie die Synchronisation der technischen Systeme. Mit Adaptive Components lässt sich die Erstellung und Pflege von Webseitenelementen effektiver und günstiger umsetzen. Sie können Adaptive Components in Ihrer Library nach Ihren Wünschen gestalten und mit einer Code-Zeile beliebig oft auf ihren Webseiten einsetzen. Sie müssen sich bei Updates keine Gedanken mehr machen, wie oft und wo bestimmte Webseitenelemente eingesetzt worden sind. Eine einmalige Bearbeitung Ihrer Components in der Library führt zur Aktualisierung aller Implementierungen. Zusätzlich können Sie einen Katalog von Vorlagen nutzen, die Standard-en schnell und hochwertig lösen. Sie können Adaptive Components auch abhängig von Browsereigenschaften einsetzen, um dynamische Inhalte zu erzeugen, die für den jeweiligen Nutzungskontext ideal sind. Betrachten Sie Adaptive Components als Teil ihrer Corporate Identity, die Layout und Usability bestimmter Bedienelemente definiert. Der einfache Einsatz dieser Komponenten über alle Plattformen, Kanäle sowie Länderund Partnerseiten, sorgt dafür, dass Ihre Corporate Identity erhalten bleibt. Es entstehen keine ungewollten Abweichungen von System zu System, die das gewünschte Erscheinungsbild Ihres Unternehmens allmählich verwässern. Mit den Adaptive Components verpacken wir Funktionen einer Webseite in einfache, wiederverwendbare Custom HTML Tags. Diese werden bei der Auslieferung in Standard HTML Tags umgewandelt und notwendiges CSS, Java-Script und Assets werden eingefügt. Durch die Verweisstruktur zwischen Implementierung und den Components in der Library können CSS und Java-Script bei den Implementierungen gespart werden, weil große Teile des Codes nur einmalig in der gekapselten Komponente vorliegen müssen. Unabhängig vom zahlreichen Einsatz der Komponenten lassen sich diese zentral testen und pflegen, was zum Beispiel bei großen Major Updates wie ios 9 oder Windows 10 sehr nützlich ist.

4 RAPID DEVELOPMENT LAYER Der Rapid Development Layer übernimmt und managt Content von veralteten Systemen und ermöglicht damit einen Frontend-Relaunch ohne Eingriffe in die existierende IT-Infrastruktur. Die technologische Entwicklung auf der Frontend-Seite ist sehr dynamisch und erzeugt fortlaufend neue Anforderungen, wenn ein Unternehmen der Erwartungshaltung der Nutzer gerecht werden möchte. Die Content-Migration von veralteten Systemen ist aufwändig und steht der Innovation im Weg. Denn Unternehmen stoßen meist auf problematische Abhängigkeiten zu Systemund Organisationsstrukturen. Die Update-Fähigkeit des Gesamtsystems ist dabei oft nicht mehr vorhersehbar - die Aufwände für das Bug-Fixing steigen und sind nicht planbar. Ein Neustart der gesamten IT-Infrastruktur ist oft zu kostspielig oder nicht rechtzeitig umzusetzen. Dies bremst das Innovationstempo für die Webseite und blockiert das Unternehmen dabei, die neuesten Frontend-n einzusetzen. Der Rapid Development Layer nutzt existierende Inhalte und Prozesse für die Erstellung neuer Frontends und Services und minimiert so die Aufwände für Ihre IT- Abteilung. Sie können mit dem Rapid Development Layer zum Beispiel ein fixes Layout in ein Responsive Web Design umwandeln, eine dedizierte mobile Webseite erstellen oder eine REST API für eine App bereit stellen. Über den Rapid Development Layer kann Ihre IT oder unser Professional Services Team in kurzer Zeit eine Lösung schaffen, die unabhängig von existierenden Limitierungen neue Wege geht. Dabei entscheiden Sie, ob die Lösung als Software-as-a-Service genutzt wird oder in Ihr Rechenzentrum integriert wird. Der Rapid Development Layer legt sich als leistungsstarke Frontend-Middleware über vorhandene APIs und HTML Quellen. Dabei können statische und dynamische Inhalte ebenso wie JSON-, XML- und HTML-Informationen verarbeitet werden. Die von den unterschiedlichen Systemen geladenen Informationen werden in einen strukturierten DOM übersetzt, der mit Actions in der Verarbeitung manipuliert werden kann. Die Content-Migration zwischen Browser und Content-Quelle kann mit Request & Response-Regeln organisiert werden und bietet viele Möglichkeiten für die Optimierung der Usability oder Schaffung neuer Services. Existierende HTML Seiten von Legacy Systemen eignen sich für dieses Produkt sehr gut zur Nutzung als API, da diese Webseiten als Quelle eine hohe Form von Stabilität mit sich bringen. Der Rapid Development Layer ist als Übergangslösung zu empfehlen, damit Ihr Team für die Entwicklung einer langfristigen Lösung mit umfassender neuer Ressourcen frei bekommt.

5 FRONTEND ANALYTICS Frontend Analytics (FA) bündelt alle Maßnahmen der User Experience Analyse bzw. des Frontend Monitorings und macht den technischen Gesundheitszustand des Frontends messbar und leicht verständlich sichtbar, damit Optimierungsmaßnahmen schneller gefunden werden. Die heutige Notwendigkeit zur ständigen Weiterentwicklung existierender Webseiten führt oft zu vielfältigen Fehlerbildern im Web-Frontend. Die höhere Fehleranfälligkeit ergibt sich aus dem Zusammenspiel der erhöhten Anzahl an Releases und der Schwierigkeit, diese auf allen verfügbaren Browsern und Endgeräten im Markt vollumfänglich zu testen. Diese Fehler wirken sich direkt auf die Kundenschnittstelle aus. Daraus resultierende schlechtere Ladezeiten, sowie Darstellungs-Fehler im Live-Betrieb führen zwangsläufig direkt zu Einbrüchen der Conversion Rate im E-Commerce. Die gebündelten Maßnahmen aus Frontend Analytics sorgen für Transparenz im Frontend. Damit ist der technische Gesundheitszustand der Lösung messbar. Die Auswirkungen von Weiterentwicklungen (z.b. längere Ladezeiten oder höhere Fehlerraten) können schneller identifiziert, sowie Handlungsmaßnahmen definiert werden. Damit können Verluste durch schlechte User Experience minimiert werden. Die Datenauswertung sowie das Frontend Analytics Dashboard laufen in hochverfügbaren Rechenzentren und bieten einfach zu verstehende aber prägnante Visualisierungen der User Experience. So wird der Handlungsbedarf schnell erkannt und Verbesserungsmaßnahmen können zielgerichtet definiert werden. Bei der User Experience Analyse müssen große Datenmengen erhoben, verschränkt und analysiert werden. Eine einfache Lösung ist die Messung aller notwendigen Daten am Frontend. Hiermit können die Daten im Kunden-Kontext (z.b. Endgerät-Typ, Browser, Betriebssystem, etc.) störungsfrei erhoben werden. Für die Auswertung setzt Sevenval Big Data n und Methoden aus der künstlichen Intelligenz ein. Das Frontend Analytics Dashboard stellt die Auswertungen leicht verständlich zur Verfügung und bietet die Möglichkeit, im Team eine Lösung zu erarbeiten. Dabei unterstützt es mit aussagekräftigen Informationen die Definition möglicher Lösungsszenarien. Das Produkt lässt sich einfach in das vorhandene Frontend integrieren und es sind keine Änderungen im existierenden Code notwendig (z.b. keine weitere Integration eines Analytics-Snippets).