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.
8.
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.
15. Eine Firebug-Extension erleichtert zukünftig das Auffinden von Fehlern, indem ein Bezug auf die ursprünglichen Ressourcen hergestellt wird. Debugging
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)
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.
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