Was kann im Frontend bei Webseite optimiert werden, um die vom Nutzer wahrgenommene Ladezeit zu verkürzen? 30 Minuten Einführung in Client-Side Performance Optimization im Rahmen der Veranstaltung "StudiVZ, Xing und Co - Die Langsamen werden verlassen" an der Hochschule der Medien Stuttgart (http://www.hdm-stuttgart.de/view_news?ident=news20100122085221)
9. Einfluss der Ladezeit
Amazon: +100 ms = 1 % weniger Verkäufe
Yahoo: +400 ms = 5-9 % weniger Anfragen
Google: +500 ms = 20 % weniger Anfragen
Glückliche User
Mehr User
Mehr Geld
Kurze
Ladezeit
16. Intelligentes Browser-Caching
Use HTTPs potential!
• Achtung, ETag!
GET File
Server Client
File
GET File, if modified
Server Client
304 not modified
File
Weniger Daten, aber trotzdem ein Request!
17. Intelligentes Browser-Caching
• Besser: Expires-Header
GET File
Server Client
File
Expires 01.01.2011
Server Client
File
Kein Request! Erst wieder ab 02.01.2011
18. Cache busters
…um ein Neuladen zu erzwingen
• (Expire-Header vorher anpassen)
• base-12.js
• styles.css?67
• /890/background.png
40. Vieles lässt sich automatisieren
Integration in den Deployment-Prozess
– JS/CSS-Dateien kombinieren
– Compression & Minifying
– Cache busters
– Image optimization
41.
42. Entlastet auch
Enorme
die Server Oft einfach
Auswirkungen
Von Anfang an
Grundregeln
Client-side
beachten & ggf.
weiter optimieren matters!
Direkte Verbesserung Kostenersparnis
für die Nutzer
don‘t fiddle – analyse first
43. Weiterführend
• Steve Souders: High Performance Websites
• Steve Souders: Even Faster Websites
• http://developer.yahoo.com/performance/rules.html
• Test-Webseite: http://stevesouders.com/cuzillion