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)

2. Client-side Performance
Optimizations
Jakob Schröter
22.01.2010

3. 20%
80%

4. Wahrgenommene Ladezeit
einer Webseite
20%
80%

5. Wahrgenommene Ladezeit
einer Webseite
20%
Server
80%
Client

6. Wahrgenommene Ladezeit
einer Webseite
20%
Server
80%
Client

7. Frontend Engineer
Kajona³ CMS
BESTTRICK.COM
Bachelor of Computer
Science in Media Jakob Schröter
Master of Computer
Science and Media
Schlagzeuger

8. LADEZEIT?
Spalte2
1000 ms
500 ms
100 ms
50 ms

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

10. WAS PASSIERT IM BROWSER?

11. Your best friends
• Firebug
• Yahoo YSlow
• Google PageSpeed
• Speed limiter: Webscarab

12. HTML (Server) Ressources (Client)

13. HTTP Requests are expensive!
ANZAHL DER REQUESTS REDUZIEREN

14. HTTP Requests reduzieren
• Redirects vermeiden
• Dateien sinnvoll kombinieren
– base.js, dragndrop.js, animation.js, …
– master.css, dashboard.css, lightbox.css
• Auch Grafiken – CSS Sprites!
– button.png, button_hover.png,
button_active.png, …

15. CSS Sprites
sprites.png
40px
110px
.button {
width: 10px; height: 10px;
background-image: url(sprites.png);
background-position: 100px 40px;
}
.button:hover {
background-position: 110px 40px;
}

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

19. HTTP Requests are expensive!
REQUESTS VERKLEINERN

20. Compression & Minifying
• alles was geht: HTML, CSS, JS, JSON, XML,
…aber keine Bilder, PDFs, SWFs, …
• Compression
– mod_deflate / mod_gzip
• Minifying

22. Compression & Minifying
hdm-stuttgart.de
Komprimiert
Original Minified Komprimiert + Minified
HTML 101 KB 97 KB 17 KB 16 KB
CSS 90 KB 68 KB 19 KB 14 KB
JS 243 KB 195 KB 73 KB 63 KB
434 KB 360 KB 109 KB 93 KB
-341 KB ≈ -79%!

23. IMAGE
OPTIMIZATION

24. Image Optimization
JPG PNG (GIF)
Farbanzahl
• „Für Web speichern“
• CSS-Sprites

25. smushit.com
hdm-stuttgart.de
130 x 86 px

26. HDM-STUTTGART.DE
-325 KB Compression & Minifying
-97 KB Image Optimization
Facebook
-422 KB -49%
x 200.000.000 Unique Visitors
= -82 TB/Monat

27. HTTP Requests are expensive!
REIHENFOLGE DER REQUESTS

28. Order of loading ressources
• Achtung <script>!
– blockiert weitere Downloads
• JS/CSS nicht doppelt einbinden

29. Order of loading ressources
DOM-ready onLoad
Zwingend Ergänzende
CSS notwendige Scripts Grafiken
Scripts
master.css base.js background.jpg dragndrop.js
button.png lightbox.js

30. PRELOADING

31. Preloading
• Z.B. Loginseite

32. LAZY-LOADING

33. Post-loading

34. Domain sharding / CDN
• Parallele Downloads (für ältere Browser)
– nur 2 Requests per Host
• Schnellere Antwortzeiten/Übertragungsraten
– Schlanker Webserver
– Cookie-free Domain
static.ak.studivz.net

35. NOCH NICHT SCHNELL GENUG?

36. JS performance
• Passende AJAX-Bibliothek wählen
• Aktionen bei window.onload reduzieren
• Best practices

37. CSS performance
• Selektoren
#myElement > li {}
.myElement-li {}
• Best practices

38. Chrome Speed Tracer

39. Client-Side Performance Optimization
„IST JA GANZ SCHÖN
AUFWÄNDIG…“

40. Vieles lässt sich automatisieren
Integration in den Deployment-Prozess
– JS/CSS-Dateien kombinieren
– Compression & Minifying
– Cache busters
– Image optimization

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

44. Client-side Performance
Optimizations
Jakob Schröter
xing.com/profile/Jakob_Schroeter