Warum ist die Performance mit für den Erfolg von Webprojekten entscheidend? Welche Auswirkungen kann eine zusätzliche Sekunde Ladezeit in Bezug auf die Webseiten-Hits und den Umsatz haben? Und vor allem: wie können wir Entwickler die Performance deutlich verbessern? Und zwar ohne neue Hardware anzuschaffen. Eine Einführung in die Web Performance Optimierung (SEITENBAU Developer Convention 2011 - 24.09.2011) - Wie betrachtet ein Nutzer eine Webseite? - Wie kann man die Performance messen? - Welche Optimierungsmöglichkeiten gibt es? - Client-seitige Optimierungen - Server-seitige Optimierungen - Automatisierung der Optimierungen - Blick in die Zukunft (u.A.: Google SPDY)

1. Developer Convention 2011
Web Performance
Optimization
Jakob Schröter
http://www.jakob-schroeter.de/
http://www.seitenbau.com/

3. PERFORMANCE

5. WEB PERFORMANCE

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

9. Einfluss der Ladezeit
Glückliche User
Mehr User
Mehr Umsatz
Kurze
Ladezeit

10. Einfluss der Ladezeit
Amazon +100 ms 1 % weniger Verkäufe1
Yahoo +400 ms 5-9 % weniger Zugriffe1
Google +500 ms 20 % weniger Zugriffe1
Bing +2000 ms 4,3 % weniger Umsatz/Nutzer2
Shopzilla -5000 ms 25 % mehr Zugriffe
7-12 % mehr Umsatz
50 % weniger Hardware3
Mozilla -2200 ms 15,4 % mehr Downloads4
1 http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/
2 http://www.slideshare.net/dyninc/the-user-and-business-impact-of-server-delays-additional-bytes-and-http-chunking-in-web-search-presentation
3 http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html
4 http://blog.mozilla.com/metrics/category/website-optimization/

11. User Experience
Empfohlene Ladezeit:
– vor 2006: unter 8 Sekunden Jupiter research
– 2006: unter 4 Sekunden Jupiter research
– 2009: unter 2 Sekunden Forrester Research
„Jede Website, deren Ladezeit eine Sekunde
überschreitet, tut dem Benutzer weh.“ Jakob Nielsen
http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/

12. 10 Golden Principles of
Successful Web Apps
Speed
Instant Utility
Software is Media
Less is More
Make it Programmable
Make it Personal
RESTful
Discoverabilty
Clean
Playful
http://thinkvitamin.com/web-apps/fred-wilsons-10-golden-principles-of-successful-web-apps/

13. SEO -> WPO
• Search Engine Optimization ist ein
Thema von gestern Steve Souders
• Performance beeinflusst Google Ranking
seit April 2010

14. „Das Internet ist nicht
schneller geworden“
http://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2

15. PERFORMANCE OPTIMIEREN
Messen: z.B. JMeter
Bottlenecks finden: Profiling des Backends
Code optimieren / mehr Server-Hardware / bessere Server-Anbindung

16. Aber: Was wollen wir messen?
Wahrgenommene Wartezeit!
= Inhalt ist für den Nutzer sichtbar
= Nutzer denkt, er kann interagieren

17. Performance messen #1
• HTML-Seite generiert und • Definiertes DOM-Element
geladen sichtbar
• DOM-Ready-Event • „Above the Fold“ (AFT)
DOM ist aufgebaut, Inhalt evtl. keine Änderungen mehr am
sichtbar sichtbaren Inhalt
• OnLoad-Event
alle Ressourcen wurden geladen,
Inhalt evtl. sichtbar

18. Performance messen #2
• verschiedene Clients
• verschiedene Locations
• verschiedenen Anbindungen
• Performance kontinuierlich messen

19. 20%
80%

20. Wahrgenommene Ladezeit
einer Webseite
20%
80%

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

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

23. WAS PASSIERT IM BROWSER?

24. Your best friends
• „F12“-Tools
• Firebug
• Yahoo YSlow
• Google PageSpeed
• Speed limiter: Webscarab
• WebPageTest.com
• ShowSlow.com

25. HTML (Server) Ressources (Client)

26. HTTP Requests are expensive!
ANZAHL DER REQUESTS REDUZIEREN

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

28. 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;
}

29. Intelligentes Browser-Caching
Use HTTPs potential!
• Achtung, ETag!
GET File
Server Client
File
GET File, if modified
Server Client
304 not modified
File

30. Intelligentes Browser-Caching
• Besser: Expires-Header
GET File
Server Client
File
Expires 01.01.2012 00:00
Server Client
File

31. Supercache: Gemeinsames CDN
• Google CDN
– //ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
• Aber: Single Point Of Failure
– Asynchron laden
– Lokales Fallback

32. Cache busters
• base-12.js
• styles-67.css
• background-890.png
• 890/background.png
• background.png?890

33. HTTP Requests are expensive!
REQUESTS VERKLEINERN

34. Compression & Minifying
• alles was geht: HTML, CSS, JS, JSON, XML,
…aber keine Bilder, PDFs, SWFs, …
• Komprimieren
– mod_deflate
• Minimieren
– YUICompressor, UglifyJS, ...

36. 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%!

37. Compression & Minifying
laut.fm

38. Compression & Minifying
netflix.com
“Adopting a single optimization,
gzip compression, resulted in a 13-25% speedup
and cut their outbound network traffic by 50%.”
http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/

39. IMAGE
OPTIMIZATION

40. Image Optimization
JPG PNG GIF
Farbanzahl
• Richtige Abmessungen + „Für Web speichern“
• CSS-Sprites

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

42. smushit.com
spiegel.de

43. smushit.com
koeln.de

44. smushit.com
laut.de

45. smushit.com
laut.fm

46. HDM-STUTTGART.DE
-325 KB Compression & Minifying
-97 KB Image Optimization
-422 KB -49%

47. HTTP Requests are expensive!
REIHENFOLGE DER REQUESTS

48. Order of loading ressources
<script> blockiert weitere Downloads
<script> blockiert Rendering
-> Reihenfolge beachten
-> defer/async-Attribute bzw. Loading-Tools nutzen

49. Order of loading ressources
DOM-ready onLoad
Zwingend Sichtbare Ergänzende
CSS notwendige Scripts Pre-/Lazy-Loading
Grafiken Scripts
base.css modernizr.min.js background.jpg dragndrop.js
button.png lightbox.js
<head> <body> Dynamisch per JS

50. PRELOADING

51. Preloading
• Z.B. Loginseite

52. LAZY-LOADING

53. Post-loading

54. Domain sharding / CDN
• Schnellere Antwortzeiten/Übertragungsraten
– Schlanker Webserver
– Cookie-freie Domain
• Parallele Downloads (für ältere Browser)
– nur 2 Requests per Host
s-static.ak.facebook.com

55. Advanced WPO
NOCH NICHT SCHNELL GENUG?

56. Advanced WPO
• Rendering optimieren
– Progressive Rendering / Early Flushing
– Anzahl der DOM-Element reduzieren
– Reflow optimieren
• JS & CSS Optimizations
–…

57. Chrome Speed Tracer

58. Strangeloop Site Optimizer
Fokus auf der vom Nutzer wahrgenommenen Ladezeit.
Analysiert Nutzerverhalten und lädt Ressourcen bereits vor.
http://www.strangeloopnetworks.com/

59. Web Performance Optimization
„IST JA GANZ SCHÖN
AUFWÄNDIG…“

60. Sehr gute Tools verfügbar
• Yahoo YSlow
• Google PageSpeed
• Dynatrace AJAX Edition
• WebPageTest.com

61. Vieles lässt sich automatisieren
Integration in den Deployment/Build-Prozess
– JS/CSS-Dateien kombinieren
– Compression & Minifying
– Caching und Cache busters
– Bildoptimierung
– Verteilung auf CDN

62. Auf dem Server
• On-the-fly
– Mod_deflate
– Mod_pagespeed
– WEBO Site SpeedUp (PHP)

63. Externe (kommerzielle) Services
• On-the-fly in der Cloud
– blaze.io
– strangeloopnetworks.com
– Google Page Speed Service
• Monitoring
– Gomez

64. Multiplexed streams
Request prioritization Server push & hint
HTTP header compression
Was Google hat, was wir nicht haben…
GOOGLE + CHROME use SPDY
An experimental protocol
for a faster web
~50% reduction in page load time

66. Entlastet auch
Enorme die Server
Auswirkungen Basics sind einfach
Von Anfang an Best
Performance
Practices beachten
& ggf. weiter
optimieren
matters!
Direkte Verbesserung Kosten/Nutzen abwägen
für die Nutzer
don‘t fiddle – analyse first
Mobiles Internet
RIA

67. Weiterführend
• Bücher:
– Steve Souders: High Performance Websites
– Steve Souders: Even Faster Websites
• Test-Webseite: http://stevesouders.com/cuzillion
• http://developer.yahoo.com/performance/
• http://code.google.com/intl/de-DE/speed/

68. Developer Convention 2011
Web Performance
Optimization
Jakob Schröter
http://www.jakob-schroeter.de/
http://www.seitenbau.com/