Überspringen und Hauptinhalt zeigen

Von unseren Depsters August 01, 2019

Performance-Optimierungen für das Spryker-Frontend

Performance_Optimierung_fuer_das_spryker-Frontend_Dept

Das Spryker Commerce OS zeichnet sich durch Modularität und Performance aus. Backend und Frontend sind komplett voneinander entkoppelt, gewährleisten jedoch unabhängig voneinander die Auslieferung dynamischer Shopseiten in Millisekunden. Unser Ziel war es, die ohnehin schon beachtliche Leistungsfähigkeit der E-Commerce-Lösung noch weiter zu steigern.

Für die Kunden Hardeck und AWG Mode hat Dept die Vorteile von Spryker weitergedacht und bis ins Detail ausgearbeitet: Während der Frontend-Entwicklung hat das Team zahlreiche Maßnahmen zur weiteren Steigerung der Performance analysiert und implementiert.

Optimierung der Inhalte

Die wichtigste und gleichzeitig einfach umsetzbare Optimierung war, die Datenmenge, zu der auch Medien, JavaScript und Stylesheets zählen, beim initialen Seitenaufruf zu reduzieren. So ist ein flüssiger Seitenaufbau auch über das Mobilfunknetz mit oft geringer Bandbreite und vom mobilen Browser mit eingeschränkten Hardware-Ressourcen gegeben. Denn selbst im Zeitalter von HTTP/2 spielt die Datenmenge von eingebundenen Dateien eine wichtige Rolle.

Loading on demand

Die Webseiten der beiden Onlineshops folgen in Konzeption und Gestaltung dem Mobile-First-Prinzip. Dementsprechend lag auch beim Frontend der Fokus darauf, Inhalte primär für mobile Devices aufzubereiten und auszuspielen. Das Motto lautet hier: Weniger ist mehr. In Konsequenz liefert das Backend beim Seitenaufruf nur die sichtbaren Elemente aus. Seitenbereiche außerhalb des Viewports, die erst per expliziter Benutzeraktion ins Sichtfeld gelangen, lädt die Applikation bei Bedarf nach. Der modulare Aufbau von CSS und JavaScript erlaubt eine punktuelle Steuerung des Nachladens einzelner Komponenten, abhängig von Breakpoint und Device.

Auf diese Weise reduzieren wir das Datenvolumen der Website, die Anzahl der DOM-Knoten und der Assets auf ein Minimum – für schnelle Ausführungszeiten bei gleichbleibender Flexibilität.

Above the fold

Um gute Bedienbarkeit zu gewährleisten, liegt der Fokus bei der Darstellung und Auslieferung der Inhalte auf dem sofort sichtbaren Bereich der Webseite. Bestenfalls erhält der Browser präparierten Content direkt im HTML, ohne zusätzliche Server-Anfragen zu starten. Betroffene SVG-Symbole, JavaScript und Stylesheets werden als Inline-Elemente im Markup platziert. Elemente außerhalb des Viewports lädt die Applikation im Bedarfsfall nach.

Ein guter Ratschlag für die Einbindung von statischen Inhalten: Nicht kritische Stylesheets und Skripte wie z.B. Tracking nach Möglichkeit erst zum Schluss laden.

Service Worker

Statische Inhalte wie Webfonts, Stylesheets, JavaScript und Bilder eignen sich gut für eine effektive Caching-Strategie, die via Service Worker gesteuert wird. Der Service Worker legt vom Server zum Client übertragene Dateien im Browser-Cache ab. Bei der nächsten Anfrage wird die Datei dann aus dem Cache und nicht vom vom Server ausgeliefert. So stehen zwischengespeicherte Assets verzögerungsfrei zur Verfügung und schonen die Bandbreite.

Wichtig: Hierfür eignen sich ausschließlich versionierte Dateien. Bei Änderungen werden diese nicht mehr aus dem Browser-Cache bezogen. 

Live-Beispiel einer Service Worker Datei: https://www.awg-mode.de/sw.js

Preload

  • Preload (<link rel=”preload” […] />) für priorisierte Inhalte wie z.B. Webschriften
  • Prefetch (<link rel=”prefetch” […] />) für potentiellen Content wie z.B. Pagination 
  • Preconnect (<link rel=”preconnect” […] />) für Drittanbieter-Aufrufe wie z.B. CDN

JavaScript

  • Vanilla JavaScript
  • Dezenter Einsatz von Drittanbieter-Frameworks und Bibliotheken
  • Gebrauch von Webpack Code Splitting

Bildmedien

  • Auslieferung breakpoint-abhängiger Bilddateien via <picture>-Element
  • Entfernung überflüssiger Metainformationen
  • Verwendung moderner Dateiformate wie WebP und JPEG XR
  • Nutzung der Lazy Loading Strategie für punktuelles (Nach)Laden
  • Einsatz von Progressive JPEGs
  • Empfehlung: Cloudinary als Dienstleister für Bildmanipulationen

Serverseitig

  • GZIP-(Vor)Komprimierung für die Dateitypen HTML, JS, CSS, ICO, SVG
  • Reduzierung des TTFB-Wertes (time to first byte)
  • Aktivierung des Netzwerkprotokolls HTTP/2
  • Vermeidung von Weiterleitungen
  • Berücksichtigung des Save-Data HTTP-Headers
  • Großzügiges Caching (1 Jahr) für statische Inhalte

Auswertung der Performance

Der Performance-Sprung ist in vielen KPIs deutlich sichtbar:

Image

Verschiedene Tools erleichtern Messung und Monitoring umgesetzter Frontend-Optimierungen: 

Lighthouse

Das im Chrome-Browser fest integrierte Analyse-Tool Lighthouse (zu finden in DevTools im Tab Audits) führt benutzerdefinierte Simulationen und aussagekräftige Prüfungen mit den Schwerpunkten Performance, SEO und Accessibility aus. Die resultierende Diagnoseauswertung hilft dem Entwickler bei der Identifizierung des Optimierungsbedarfs. 

Im Gegensatz zum häufig genutzten Dienst Google PageSpeed Insights, der lediglich auf öffentlich verfügbare Webseiten zugreifen und diese auswerten kann, eignet sich Lighthouse auch für das Monitoring lokaler Entwicklungsumgebungen.

Zudem kann man Lighthouse in einen Continuous-IntegrationProzess (z.B. GitLab CI) einbinden: npm Packages wie Lighthouse CI und Lighthouse Bot überwachen die gesetzten Limits der einzelnen Frontend-Metriken. Automatisierte Checks erkennen präventiv die Code-Änderungen, die sich negativ auf die Performance auswirken würden, und ermöglichen es, sofort entsprechende Maßnahmen zu ergreifen.

SpeedCurve

Der Service SpeedCurve wurde von namhaften Performance-Experten gegründet und bietet eine permanente Überwachung der Frontend-Performance. Der kostenpflichtige Dienst ermittelt die Ladezeiten gewünschter Webseiten in festen Zeitintervallen und meldet Verschlechterungen sofort. 

Für Entwickler hält SpeedCurve eine Vielzahl technischer Auswertungen bereit, etwa visualisierte Benchmarks, Performance-Budgets, Ausführungszeiten von Skripten und Drittanwendungen sowie Rendering-Zeiten für bestimmte Seitenbereiche (z.B. Headlines, Bilder, Werbung). Projektverantwortlichen bietet der Service wertvolle Diagnosewerte zum Nutzerverhalten und zu E-Commerce-KPIs wie Conversion Rate und Bounce Rate.

Die Auswirkungen von Design- und Code-Änderungen auf die Performance und die User Experience können mithilfe von SpeedCurve jederzeit nachverfolgt und analysiert werden. A/B-Tests, Deploy API und Vorschläge zur Performance-Optimierung runden das Angebot ab.

Eine Alternative zu SpeedCurve ist das kostengünstigere Calibre. Der Funktionsumfang ist überschaubarer, in der Regel aber ausreichend.

Die bekanntesten Analyse-Tools:

Fazit

Frontend-Optimierung ist ein andauernder Prozess. Moderne Webseiten werden im Laufe der Zeit immer träger, Medien immer hochauflösender, Stylesheets immer umfangreicher und JavaScript immer komplexer.

Die hier vorgestellten Tipps, Techniken und Tools sind den meisten Webentwicklern wahrscheinlich bereits bekannt. Es ist jedoch unerlässlich, die Performance niemals aus den Augen zu verlieren und Optimierungsmethoden regelmäßig anzuwenden. Dies gilt für die Umsetzung neuer Features und für nachträgliches Code-Refactoring gleichermaßen. Idealerweise gilt der Grundsatz “Performance first” bereits in der Konzeptphase und wird von Beginn an auch im Design berücksichtigt. So steht einer performance-orientierten Frontend-Umsetzung nichts im Wege. Das Ergebnis sind zufriedene User und höhere Umsätze.

Fragen? Wir sind hier, um zu helfen!

Hoppla!

Wenn Sie dies lesen, können Sie das Formular, das hier sein sollte, leider nicht sehen. Sie haben wahrscheinlich einen Werbeblocker installiert. Schalten Sie den Werbeblocker aus, um das Formular zu sehen. Es funktioniert trotzdem nicht? Öffnen Sie diese Seite in einem anderen Browser oder setzen Sie sich mit uns in Verbindung: [email protected]