Das Dokument behandelt den Bestellprozess und die Frontend-Architektur der 1&1 Dienste, mit einem Fokus auf die Optimierung der Ladezeiten durch die Jasmin-Technologie, die CSS- und JavaScript-Ressourcen moduliert und komprimiert. Es wird beschrieben, wie verschiedene Projekte in unterschiedlichen Regionen von einem Content Delivery Server unterstützt werden, um die Performance zu verbessern und Datenvolumen zu minimieren. Zudem werden Tools zur Fehlermessung und Analyse der Frontend-Performance erwähnt, um Transparenz und Qualität zu gewährleisten.

1. 1&1 Bestellprozess-Frontends Nico Steiner & Andreas Lehr

2. 1&1 Bestellprozess-Frontends - Situation - - Unsere Frontends sind marketinggetrieben Einheitliche Elemente und Layouts sind gewünscht Projekt- und seitenspezifische Ausnahmen müssen trotzdem möglich sein (und sind oftmals die Regel) - Verschiedene Bereiche (Consumer, Hosting, Entertainment) Verschiedene Marken (1&1, WEB.DE, GMX und Maxdome) Lokalisierung für DE / US / UK / FR / ES Insgesamt über 30 Projekte Projekte unterliegen einem kontinuierlichen Änderungsprozess Performance der Seiten hat große Bedeutung

3. Jasmin-Servlet (Auslieferung von CSS/JavaScript) Frontend-Module (CSS/JavaScript/ XSL/Grafiken) Content Delivery Server (Auslieferung von Grafiken) Project Mess Tool (Frontend-Kennzahlen) Fehlertool 1&1 Bestellprozess-Frontend-Architektur

4. Jasmin-Servlet Auslieferung von CSS und JavaScript

5. Idee Ausschlaggebend für die Jasmin-Technologie war das Firefox-Addon YSlow . YSlow analysiert die Performance von Web-Seiten auf Basis der „ Yahoo rules for high performance web sites “. Mehr Info: https://addons.mozilla.org/de/firefox/addon/5369 http://developer.yahoo.com/performance/rules.html Minimize HTTP Requests Gzip compression Use Expires Header Minimize CSS/JavaScript

6. Jasmin – JavaScript Minifier Mit der Jasmin-Technologie lassen sich CSS- und JavaScript-Ressourcen modularisieren, optimieren, minimieren und kombinieren. Modularisieren CSS- und JavaScript-Ressourcen können abhängig von ihrer Verwendung in Modulen zusammengefasst werden. Optimieren An den ausgelieferten Ressourcen lassen sich an einer zentralen Stelle performancerelevante Optimierungen vornehmen. Minimieren Unnötige Inhalte (Kommentare, Leerzeichen etc.) werden vor der Auslieferung entfernt. Kombinieren Die Ressourcen werden kombiniert in je einem Request ausgeliefert. Minimize HTTP Requests

7. Jasmin Historie – Am Anfang war der YUI-Loader Möglich waren damit Modularisierung Dependencies JavaScript und CSS Ressourcen Nachteile Basiert auf JavaScript Ein Request pro Ressource Umständliches Ladekonzept Anfänglich wurde von uns der YUI-Loader von Yahoo! zur Auslieferung der Ressourcen genutzt.

8. Ausgangsbasis Ca. 20 Requests für CSS und JavaScript Alle Ressourcen wurden auf allen Seiten ausgeliefert Kein Minimieren Keine Performance-Optimierungen Ergebnis Seitenabhängiges Ausliefern von CSS und JS-Ressourcen in je einem Request Modular mit Dependencies zu anderen Modulen Komprimierung / Kombinierung Weitere Performance-Optimierungen Vom YUI-Loader zur Jasmin-Technologie

9. Jasmin-Servlet - Funktionsweise Jasmin Maven-Modul main main + autocompletion common local autocomplete.js autocomplete.css global.js main.css local.js shop.css main autocompletion main Zusammenstellung und Auslieferung der Ressourcen erfolgt seitenbezogen in je einem Request. Home Produkt Kundendaten

10. Jasmin-Servlet Ausblick Jasmin Caching-Optimierung Umstellung von je einem auf je zwei Requests für CSS und JavaScript. Unterscheidung von allgemeinen Ressourcen und spezifischen Ressourcen. main main autocompletion Home Produkt Kundendaten 1. Request (Cache) 2. Request (variabel) main

11. Jasmin-Servlet Ausblick Jasmin Gzip Das Jasmin-Servlet liefert zukünftig Ressourcen in Gzip-Komprimierung aus. Dadurch wird das Datenvolumen um bis zu 80% verringert. data data

12. Präfix und Suffix Für JavaScript Ressourcen können durch Präfix- und Suffix-Module eine Ladereihenfolge erzwungen werden, um Module wenn nötig vor allen anderen oder nach allen anderen Modulen zu laden. if(typeof UNOUNO=="undefined"){ var UNOUNO={} ..... } onDocumentReady() { onJSload(); } Präfix Modul Javascript Suffix Modul

13. Debugging Nachteilig wirkt sich das kombinierte Ausliefern von JavaScript- und CSS-Ressourcen auf das Debugging im Firebug aus. Das Auffinden von Fehlern wird erschwert.

14. Debugging

15. Eine Firebug-Extension erleichtert zukünftig das Auffinden von Fehlern, indem ein Bezug auf die ursprünglichen Ressourcen hergestellt wird. Debugging

16. Frontend-Module (CSS, JavaScript, XML, Grafiken)

17. CSS JavaScript XML/XSL Grafiken/Pdf/Flash Frontend-Module - Komponenten Jasmin-Servlet Dynamische Includes Content Delivery Server

18. Rahmen aus Frontend-Modul (XML)

19. CSS über Jasmin-Servlet aus Frontend-Modul

20. Seiten-Inhalte über lokale Ressourcen im Projekt

21. DSL (Consumer) NGH Startseite Hosting US Mobiles Internet (Consumer)

22. Mobiles Internet (WEB.DE) DSL (WEB.DE) MailXchange (WEB.DE) Frontend-Modul

23. Mobiles Internet (1&1) Mobiles Internet (GMX) Mobiles Internet (WEB.DE)

24. Common Projekt Projekt Projekt Projekt Projekt … Common Projekt Projekt Projekt Projekt Projekt … Frontend-Module liegen außerhalb der Pustefix-Projekte

25. Common Projekt Projekt Projekt Projekt Projekt … Common Projekt Projekt Projekt Projekt Projekt … Frontend-Module lassen sich beliebig zuweisen…

26. Common Projekt Seite Seite Seite Seite Seite Seite Seite Seite … … sogar ausgewählten Seiten innerhalb eines Projekts

27. Frontend-Modul Common Nur noch Tage! DSL, Mobiles Internet, NGH DE, Hosting DE, Internetzugang, … Hosting US Only days! CSS JS XML IMG Das Prinzip lässt sich beliebig anwenden.

28. i18n – Beispiel NGH Frontend-Modul + Common Lokales Projekt (DE) XML (DE) Redaktion (Übersetzung) XML (US) Lokales Projekt (US)

29. i18n – Beispiel NGH

30. Autocompletion Telesales-Cart Clearfix-Hack PNG-Hack (IE6) Formular-Gerüste YUI Preis-Stopper Countdown-Stopper WEB.DE Rahmen 1&1 Rahmen Qooxdoo Lightbox Stage-Assistent GMX Rahmen

31. Content Delivery Server Auslieferung von Grafiken, Flash, … (in der Planung)

32. common/img/visual.gif www Apache CDS www Versionierung + Optimierung + Kennzahlen Momentan Zukünftig Content Delivery Server (CDS) Momentan werden Bilder dezentral von verschiedenen Servern geliefert. Dies verhindert den Einsatz Performance-Optimierender Techniken.

33. Maven-Module common local Grafiken/Flash/… Expires-Header, Versionierung CDS + Dateigröße Fehlende Res. Ungenutzte Res. PMT Fehler-Tool Vorteile Durch Expires-Header wird das Caching verbessert. Übermittlung von Kennzahlen und Fehlern an das Project-Mess-Tool und das Fehlertool . Aufbau eines Content-Delivery-Network für Zugriffe aus dem Ausland. cds1.1und1.de cds2.1und1.de cds3.1und1.de Content Delivery Server (CDS)

34. CDS - Versionierung für Far Future Expires Header Far Future Expires Header enthalten ein weit in der Zukunft liegendes „Verfallsdatum“. Datei wird nach erstmaligem Herunterladen vom Server aus dem Browser-Cache bezogen. Versionierung sorgt für Aktualisierung nach Datei-Änderung.

35. CDS - Versionierung für Far Future Expires Header Erstmaliger Dateiaufruf Die Datei wird vom CDS ausgeliefert und bekommt einen Far Future Expires Header (10 Jahre) zugewiesen.

36. CDS - Versionierung für Far Future Expires Header Wiederholter Dateiaufruf Die Datei wird auf Grund ihres weit in der Zukunft liegenden Expires-Headers aus dem Browser-Cache geladen.

37. CDS - Versionierung für Far Future Expires Header Dateiaufruf nach Dateiänderung Beim Publish einer veränderten Version wird über den Dateinamen eine neue Versionierung vergeben. Aus z.B. price-1.gif wird price-2.gif Der Browser lädt die veränderte Datei vom Server.

38. CDS - Versionierung für Far Future Expires Header Am Dateinamen im XML-Code ändert sich nichts XML-Code für die Anzeige der Grafik <pfx:image src=”common/img/ price.gif ” alt=”für 0,- Euro”/> Beim Publish wird im ausgelieferten HTML-Code automatisch die Version im Dateinamen ergänzt. HTML-Code mit der Versionierung <img src=”common/img/ price-1.gif ” alt=”für 0,- Euro”/> wird zu <img src=”common/img/ price-2.gif ” alt=”für 0,- Euro”/>

39. Contend Delivery Network Dateien werden in die Nähe des „Empfängers“ gebracht. Dadurch verkürzten sich die Latenz-Zeiten.

40. Project Mess Tool Frontend-Kennzahlen (im Aufbau)

41. Erfassung typischer Frontend-Kennzahlen Wie groß sind die ausgelieferten Dokumente? Gibt es grobe Ausreißer? Werden Dokumente nicht gefunden? Gibt es überflüssige Dokumente? Sind die Dokumente valide? Dabei gilt: Dokumente = Grafiken = Styles = Scripte

42. PMT

43. Erfassung typischer Frontend-Kennzahlen PMT Jasmin-Servlet CDS Apache Pustefix Core ???

44. Erfassung typischer Frontend-Kennzahlen Jasmin-Servlet CDS Apache Pustefix Core CSS/JavaScript Grafiken/Pdf/ Flash HTML Größe ungenutzte Selektoren Validierung (Fehler) Größe fehlende Ressourcen überflüssige Ressrc. Größe Validierung (Fehler) fehlende Dokumente fehlende/überfl. Incl. Project Mess Tool Fehlertool JavaScript-Fehler

45. PMT-Sichten Filtern nach Projekt/Seite/Kennzahl Send to Dashboard

46. Warum machen wir das? Qualität Ordnung Transparenz - Performance

47. Warum machen wir das? Einzelne Grafiken bis zu 600 KB Tausende ungenutzte Grafiken Hunderte ungenutzte CSS-Selektoren pro Projekt Diverse „Missing Includes“ (Fehlende Textbausteine) Hang der Projekte zum „Vermüllen“ Momentaner Stand Auch ein blindes Huhn… Zukünftig Ich bin schon da! Ohne Tricks!

48. Danke! Fragen? Jasmin Frontend-Module CDS Project Mess Tool