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