Performance-Optimierung The hard is what makes it great
Der Performance-Gott <ul><li>Steve Souders </li></ul><ul><li>Früher bei Yahoo! </li></ul><ul><li>Heute bei Google </li></u...
Argumente <ul><li>Google: +0.4 Sekunden – 0.6% weniger Suchanfragen </li></ul><ul><li>Yahoo!: 0.4 Sekunden – 5-9% weniger ...
Argumente <ul><li>Verbesserte User Experience </li></ul><ul><li>Mehr Traffic </li></ul><ul><li>Mehr Umsatz </li></ul><ul><...
Die Regeln <ul><li>Best Practices for Speeding Up Your Web Site (http://developer.yahoo.com/performance/rules.html) </li><...
Die Regeln <ul><li>90-95% der Ladezeit entsteht im Frontend, nur 5-10% auf dem Server </li></ul>Quelle: Fronteers-Vortrag ...
Die wichtigsten Regeln <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>A...
Das Jasmin-Servlet <ul><li>Ressourcen </li></ul><ul><ul><li>CSS/JavaScript </li></ul></ul><ul><li>Quellen </li></ul><ul><u...
Das Jasmin-Servlet <ul><li>Seitenbezogene Konfiguration </li></ul><ul><li>„ Liefere für alle Seiten nur im Stage-Modus die...
Das Jasmin-Servlet <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add a...
Das Jasmin-Servlet <ul><li>CSS wird minimiert und komprimiert (gZip) </li></ul><ul><ul><li>Einsparung von ca. 70% </li></u...
Das Jasmin-Servlet <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add a...
Das Jasmin-Servlet <ul><li>Hinzufügen von Expires-Headern </li></ul><ul><ul><li>„ Diese Ressource (CSS/JavaScript) ändert ...
Das Jasmin-Servlet <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add a...
Das Jasmin-Servlet <ul><li>Weitere Features </li></ul><ul><ul><li>Korrekte Reihenfolge durch Dependencies </li></ul></ul><...
Das Jasmin-Servlet <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add a...
Weitere Optimierungen <ul><li>Minimierung von Inline-Scripten </li></ul><ul><li>Komprimierung des HTML-Dokuments (gZip) </...
Das Jasmin-Servlet <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add a...
Project Mess Tool <ul><li>Wertet Daten (u.a. vom Jasmin-Servlet) aus und liefert Kennzahlen </li></ul><ul><ul><li>Wie groß...
Geplante Systeme <ul><li>Content Delivery Server </li></ul><ul><ul><li>Automatische Versionierung </li></ul></ul><ul><ul><...
Geplante Systeme <ul><li>Tracking-Pixel-Script </li></ul><ul><ul><li>Nimmt Tracking-Informationen über standardisierte Sch...
Das Jasmin-Servlet <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add a...
Werkzeuge <ul><li>YSlow (Yahoo!) </li></ul><ul><ul><li>Firefox Extension </li></ul></ul><ul><ul><li>Integriert sich in Fir...
YSlow - Grade <ul><li>„ Benotung“ der Seite (Performance Score) </li></ul><ul><li>Vorgefertigte oder individuelle Tests </...
YSlow - Components <ul><li>Detaillierte performance-relevante Daten </li></ul><ul><li>doc, js, css, cssimage, image </li><...
YSlow - Statistics <ul><li>Empty Cache / Primed Cache </li></ul><ul><li>HTTP-Requests / Total Weight </li></ul>
YSlow - Tools <ul><li>JSLint (JavaScript QA-Tool) </li></ul><ul><li>Smush.it (Optimierung von Grafiken) </li></ul><ul><li>...
Werkzeuge <ul><li>Page Speed (Google) </li></ul><ul><ul><li>Firefox Extension </li></ul></ul><ul><ul><li>Integriert sich i...
Werkzeuge <ul><li>webpagetest.org </li></ul>
Werkzeuge <ul><li>webpagetest.org </li></ul>
Weitere Informationen <ul><li>stevesouders.com </li></ul><ul><li>Best Practices for Speeding Up Your Web Site (Yahoo!) </l...
Danke! <ul><li>Fragen? </li></ul>Nico Steiner [email_address] http://www.nicosteiner.de
Nächste SlideShare
Wird geladen in …5
×

Frontend Performance

2.384 Aufrufe

Veröffentlicht am

10 wichtige Regeln zur Steigerung der Frontend Performance in Verbindung mit der Jasmin-Servlet-Technologie. Vorstellung von Performance-Tools.

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.384
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
11
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Frontend Performance

  1. 1. Performance-Optimierung The hard is what makes it great
  2. 2. Der Performance-Gott <ul><li>Steve Souders </li></ul><ul><li>Früher bei Yahoo! </li></ul><ul><li>Heute bei Google </li></ul><ul><li>Sprecher auf großen internationalen Konferenzen und Performance-Evangelist </li></ul><ul><li>Autor zweier Büchern zum Thema </li></ul><ul><li>Entwickler von YSlow </li></ul>
  3. 3. Argumente <ul><li>Google: +0.4 Sekunden – 0.6% weniger Suchanfragen </li></ul><ul><li>Yahoo!: 0.4 Sekunden – 5-9% weniger Traffic </li></ul><ul><li>Bing: +2 Sekunden – 4.3% weniger Umsatz </li></ul><ul><li>Shopzilla: -5 Sekunden – 12% mehr Umsatz, 50% weniger Hardware </li></ul><ul><li>Netflix: 43% weniger Bandbreite </li></ul>Quelle: Fronteers-Vortrag „fast by default“ 2009
  4. 4. Argumente <ul><li>Verbesserte User Experience </li></ul><ul><li>Mehr Traffic </li></ul><ul><li>Mehr Umsatz </li></ul><ul><li>Weniger Kosten </li></ul>Quelle: Fronteers-Vortrag „fast by default“ 2009
  5. 5. Die Regeln <ul><li>Best Practices for Speeding Up Your Web Site (http://developer.yahoo.com/performance/rules.html) </li></ul><ul><li>Ursprünglich 14, heute 34 Regeln </li></ul><ul><li>„ discuss this rule“ </li></ul><ul><li>Web Performance Best Practices (http://code.google.com/speed/page-speed/docs/rules_intro.html) </li></ul><ul><li>10 wichtigste Regeln, die unbedingt beachtet werden sollten </li></ul>
  6. 6. Die Regeln <ul><li>90-95% der Ladezeit entsteht im Frontend, nur 5-10% auf dem Server </li></ul>Quelle: Fronteers-Vortrag „fast by default“ 2009
  7. 7. Die wichtigsten Regeln <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add an Expires or a Cache-Control Header </li></ul><ul><li>Gzip Components </li></ul><ul><li>Put Stylesheets at the Top </li></ul><ul><li>Put Scripts at the Bottom </li></ul><ul><li>Make JavaScript and CSS External </li></ul><ul><li>Reduce DNS Lookups </li></ul><ul><li>Minify JavaScript and CSS </li></ul><ul><li>Configure ETags </li></ul>
  8. 8. Das Jasmin-Servlet <ul><li>Ressourcen </li></ul><ul><ul><li>CSS/JavaScript </li></ul></ul><ul><li>Quellen </li></ul><ul><ul><li>localhost, classpath, http </li></ul></ul><ul><li>Orte / Geltungsbereiche </li></ul><ul><ul><li>Projekt (auf ein Projekt beschränkt) </li></ul></ul><ul><ul><li>Common (auf mehrere Projekte beschränkt) </li></ul></ul><ul><ul><li>Modul (kann auf alle Projekte angewendet werden) </li></ul></ul>
  9. 9. Das Jasmin-Servlet <ul><li>Seitenbezogene Konfiguration </li></ul><ul><li>„ Liefere für alle Seiten nur im Stage-Modus die Ressourcen des Stage-Assistent“ </li></ul><ul><li>„ Liefere für alle Seiten sowohl auf der Stage als auch Online die Ressourcen für den Seitenrahmen“ </li></ul><ul><li>„ Liefere nur für die Seiten Kundendaten und Lieferadresse die Ressourcen für die Address-Autocompletion“ </li></ul>
  10. 10. Das Jasmin-Servlet <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add an Expires or a Cache-Control Header </li></ul><ul><li>Gzip Components </li></ul><ul><li>Put Stylesheets at the Top </li></ul><ul><li>Put Scripts at the Bottom </li></ul><ul><li>Make JavaScript and CSS External </li></ul><ul><li>Reduce DNS Lookups </li></ul><ul><li>Minify JavaScript and CSS </li></ul><ul><li>Configure ETags </li></ul>
  11. 11. Das Jasmin-Servlet <ul><li>CSS wird minimiert und komprimiert (gZip) </li></ul><ul><ul><li>Einsparung von ca. 70% </li></ul></ul><ul><li>JavaScript wird minimiert, obfuscated und komprimiert </li></ul><ul><ul><li>Einsparung von ca. 70% </li></ul></ul><ul><li>Beide Ressourcen werden in je 2 Requests ausgeliefert </li></ul><ul><ul><li>1. Request: Ressourcen, welche für alle Seiten ausgeliefert werden (ab dem 2. Request immer aus dem Cache) </li></ul></ul><ul><ul><li>2. Request: Seitenspezifische Ressourcen </li></ul></ul>
  12. 12. Das Jasmin-Servlet <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add an Expires or a Cache-Control Header </li></ul><ul><li>Gzip Components </li></ul><ul><li>Put Stylesheets at the Top </li></ul><ul><li>Put Scripts at the Bottom </li></ul><ul><li>Make JavaScript and CSS External </li></ul><ul><li>Reduce DNS Lookups </li></ul><ul><li>Minify JavaScript and CSS </li></ul><ul><li>Configure ETags </li></ul>
  13. 13. Das Jasmin-Servlet <ul><li>Hinzufügen von Expires-Headern </li></ul><ul><ul><li>„ Diese Ressource (CSS/JavaScript) ändert sich für die nächsten 10 Jahre nicht mehr“ </li></ul></ul><ul><li>Browser holt Ressource immer aus dem Cache </li></ul><ul><li>Problem: Was, wenn sich die Ressourcen doch ändern (für gewöhnlich nach einem Publish)? </li></ul><ul><li>Lösung: Versionierung beim Publish </li></ul><ul><ul><li>http://dsl.1und1.de/xml/jasmin/ 1205031209 /get/... </li></ul></ul>
  14. 14. Das Jasmin-Servlet <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add an Expires or a Cache-Control Header </li></ul><ul><li>Gzip Components </li></ul><ul><li>Put Stylesheets at the Top </li></ul><ul><li>Put Scripts at the Bottom </li></ul><ul><li>Make JavaScript and CSS External </li></ul><ul><li>Reduce DNS Lookups </li></ul><ul><li>Minify JavaScript and CSS </li></ul><ul><li>Configure ETags </li></ul>
  15. 15. Das Jasmin-Servlet <ul><li>Weitere Features </li></ul><ul><ul><li>Korrekte Reihenfolge durch Dependencies </li></ul></ul><ul><ul><li>Laden der Stylesheets im Head </li></ul></ul><ul><ul><li>Laden der Scripte am Ende der Seite über XHR </li></ul></ul><ul><ul><ul><li>Ermöglicht generell Progressive Rendering </li></ul></ul></ul><ul><ul><ul><li>XHR ermöglicht weiterhin parallele Downloads </li></ul></ul></ul><ul><ul><ul><li>Registrieren der Inline-Scripte für eine spätere Ausführung </li></ul></ul></ul><ul><ul><li>Variantenfähig </li></ul></ul><ul><ul><ul><li>Spezielle Ressourcen für GMX/WEB.DE Skin </li></ul></ul></ul><ul><ul><li>Präfix / Suffix </li></ul></ul>
  16. 16. Das Jasmin-Servlet <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add an Expires or a Cache-Control Header </li></ul><ul><li>Gzip Components </li></ul><ul><li>Put Stylesheets at the Top </li></ul><ul><li>Put Scripts at the Bottom </li></ul><ul><li>Make JavaScript and CSS External </li></ul><ul><li>Reduce DNS Lookups </li></ul><ul><li>Minify JavaScript and CSS </li></ul><ul><li>Configure ETags </li></ul>
  17. 17. Weitere Optimierungen <ul><li>Minimierung von Inline-Scripten </li></ul><ul><li>Komprimierung des HTML-Dokuments (gZip) </li></ul><ul><ul><li>Einsparung von ca. 65% </li></ul></ul><ul><li>Korrekte eTags für das HTML-Dokument und für Grafiken </li></ul><ul><ul><li>Configure ETags </li></ul></ul><ul><li>Einsatz von CSS-Sprites </li></ul><ul><ul><li>Minimize HTTP Requests </li></ul></ul><ul><li>Conditional Comments für IE6/IE7 </li></ul>
  18. 18. Das Jasmin-Servlet <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add an Expires or a Cache-Control Header </li></ul><ul><li>Gzip Components </li></ul><ul><li>Put Stylesheets at the Top </li></ul><ul><li>Put Scripts at the Bottom </li></ul><ul><li>Make JavaScript and CSS External </li></ul><ul><li>Reduce DNS Lookups </li></ul><ul><li>Minify JavaScript and CSS </li></ul><ul><li>Configure ETags </li></ul>
  19. 19. Project Mess Tool <ul><li>Wertet Daten (u.a. vom Jasmin-Servlet) aus und liefert Kennzahlen </li></ul><ul><ul><li>Wie groß sind CSS/Scripte/HTML/Grafiken in einem Projekt pro Seite und im Durchschnitt </li></ul></ul><ul><ul><li>Gibt es Ausreißer? (Error-Tool) </li></ul></ul><ul><ul><li>Welche CSS-Selektoren werden nicht genutzt und können gelöscht werden? </li></ul></ul><ul><ul><li>Werden fehlende Grafiken angefordert? (Error-Tool) </li></ul></ul><ul><ul><li>Werden Grafiken nie ausgeliefert und können gelöscht werden? </li></ul></ul><ul><ul><li>Gibt es invalide HTML- oder CSS-Dokumente? </li></ul></ul>
  20. 20. Geplante Systeme <ul><li>Content Delivery Server </li></ul><ul><ul><li>Automatische Versionierung </li></ul></ul><ul><ul><li>Far Future Expires Header </li></ul></ul><ul><ul><li>Ermittlung von Kennzahlen </li></ul></ul><ul><ul><li>Automatisches Preloading von Ressourcen </li></ul></ul><ul><ul><ul><li>„ Lade nach dem vollständigen Laden der Seite im Hintergrund über XHR die 10 Grafiken, welche statistisch als nächstes abgerufen werden“ </li></ul></ul></ul><ul><ul><li>Bezug der Ressourcen von verschiedenen Rechenzentren (besonders USA) </li></ul></ul><ul><ul><li>Aufhebung der Beschränkung von maximal 2 parallelen Requests durch Subdomains </li></ul></ul><ul><ul><li>Cookie-freie Domain </li></ul></ul>
  21. 21. Geplante Systeme <ul><li>Tracking-Pixel-Script </li></ul><ul><ul><li>Nimmt Tracking-Informationen über standardisierte Schnittstelle entgegen und „reicht diese durch“ </li></ul></ul><ul><ul><li>Muss auch für Cookies und Header-Daten funktionieren </li></ul></ul>
  22. 22. Das Jasmin-Servlet <ul><li>Minimize HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </li></ul><ul><li>Add an Expires or a Cache-Control Header </li></ul><ul><li>Gzip Components </li></ul><ul><li>Put Stylesheets at the Top </li></ul><ul><li>Put Scripts at the Bottom </li></ul><ul><li>Make JavaScript and CSS External </li></ul><ul><li>Reduce DNS Lookups </li></ul><ul><li>Minify JavaScript and CSS </li></ul><ul><li>Configure ETags </li></ul>
  23. 23. Werkzeuge <ul><li>YSlow (Yahoo!) </li></ul><ul><ul><li>Firefox Extension </li></ul></ul><ul><ul><li>Integriert sich in Firebug </li></ul></ul><ul><ul><li>Grade / Components / Statistics / Tools </li></ul></ul>
  24. 24. YSlow - Grade <ul><li>„ Benotung“ der Seite (Performance Score) </li></ul><ul><li>Vorgefertigte oder individuelle Tests </li></ul><ul><li>Unterteilung in Content / CSS / JavaScript und Server </li></ul>
  25. 25. YSlow - Components <ul><li>Detaillierte performance-relevante Daten </li></ul><ul><li>doc, js, css, cssimage, image </li></ul><ul><li>Detaildaten zu jeder Ressource </li></ul>
  26. 26. YSlow - Statistics <ul><li>Empty Cache / Primed Cache </li></ul><ul><li>HTTP-Requests / Total Weight </li></ul>
  27. 27. YSlow - Tools <ul><li>JSLint (JavaScript QA-Tool) </li></ul><ul><li>Smush.it (Optimierung von Grafiken) </li></ul><ul><li>... </li></ul>
  28. 28. Werkzeuge <ul><li>Page Speed (Google) </li></ul><ul><ul><li>Firefox Extension </li></ul></ul><ul><ul><li>Integriert sich in Firebug </li></ul></ul><ul><ul><li>Ähnlich wie YSlow mit etwas anderen Kriterien </li></ul></ul>
  29. 29. Werkzeuge <ul><li>webpagetest.org </li></ul>
  30. 30. Werkzeuge <ul><li>webpagetest.org </li></ul>
  31. 31. Weitere Informationen <ul><li>stevesouders.com </li></ul><ul><li>Best Practices for Speeding Up Your Web Site (Yahoo!) </li></ul><ul><li>Web Performance Best Practices (Google) </li></ul><ul><li>High Performance Websites (Steve Souders) </li></ul><ul><li>Even Faster Websites (Steve Souders u.a.) </li></ul><ul><li>YouTube „even faster websites“ / „yslow“ </li></ul><ul><li>Slideshare </li></ul><ul><li>http://www.websiteoptimization.com/publications/ </li></ul>
  32. 32. Danke! <ul><li>Fragen? </li></ul>Nico Steiner [email_address] http://www.nicosteiner.de

×