Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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.505 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
  • Als Erste(r) kommentieren

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

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

×