Tödliche Langsamkeit - ux congress 2014

Warum man sich mit dem Thema Webperformance beschäftigen muss und drei einfache Tipps für schnellere Webseiten. Das Video zu diesem Vortrag finden Sie auf http://youtu.be/MT5S9T0DWrs

Transcript

1. Tödliche Langsamkeit stefan.wintermeyer@amooma.de @wintermeyer
2. Primäres Bewertungskriterium einer Webseite?
3. Conversion Rate
4. Source: http://en.wikipedia.org/wiki/Conversion_marketing#Conversion_rate
5. Schnelle Ladegeschwindigkeiten sollen zu einer besseren Conversion Rate führen?
6. Jakob Nielsen’s book „Usability Engineering“ from 1993 Delay User reaction 0 - 100 ms Instant 100 - 300 ms Feels sluggish 300 - 1000 ms Machine is working… 1 s+ Mental context switch 10 s+ I’ll come back later…
7. Web Search Delay Experiment Type of Delay Delay (ms) Duration (weeks) Impact on Avg. Daily Searches Pre-header 100 4 -0.20 % Pre-header 200 6 -0.59% Post-header 400 6 0.59% Post-ads 200 4 0.30% Source: https://www.igvita.com/slides/2012/webperf-crash-course.pdf
8. Web Search Delay Experiment • The cost of delay increases over time and persists • Delays under half a second impact business metrics Source: https://www.igvita.com/slides/2012/webperf-crash-course.pdf
9. Source: https://www.igvita.com/slides/2012/webperf-crash-course.pdf
10. Every second = 0.65 increase in bounce rate Source: https://www.igvita.com/slides/2012/webperf-crash-course.pdf
11. Anonymes Beispiel
12. DIE Ladegeschwindigkeit zu messen ist nicht trivial.
13. Besucher haben unterschiedliche • Browser 
 (z.B. IE, Chrome, Safari, Opera, …) • Netzwerkanbindung • CPU und RAM • usw.
14. Beispiel - 3.19 sec. Browser Avg. Page Load Time (sec.) Iron 1.40 Internet Explorer 2.50 Firefox 3.06 Chrome 3.11 Amazon Silk 3.71 Safari 3.76 Maxthon 5.31 Opera 5.49 BlackBerry 6.34 Safari (in-app) 6.79
15. Wichtig: Verstand einschalten
16. Wie kann man Ladegeschwindigkeit verbessern?
17. Optimierungspotential • Server- und Programmgeschwindigkeit erhöhen • Netzwerkbandbreite des Servers erhöhen • Latenz zum Client verringern • Anzahl der Dateien verringern • Grösse der Dateien verringern (z.B. anderes Grafikformat) • Besseres Caching • LOC HTML, CSS und JavaScript reduzieren • Andere Protokolle (z.B. HTTP/2 oder quic)
18. PageSpeed Optimierung ist ein Full-Stack Problem.
19. Low Hanging Fruits Sie haben drei Wünsche frei.
20. Netzwerk Latenz Wenn Sie an nur einer Schraube drehen können, dann entscheiden Sie sich bitte immer für eine geringere Netzwerk Latenz!
21. Die Latenz zwischen Server und Client wird hauptsächlich von der Länge der Strecke dazwischen beeinflusst. Lichtgeschwindigkeit ist der Flaschenhals.
22. http://amooma.de/2014/10/08/lichtgeschwindigkeit-bleibt-lichtgeschwindigkeit.html Beispiel amooma.de Falkenstein, Deutschland Sydney, Australien
23. Warum ist Latenz 
 so essentiell?
24. TCP Source: http://en.wikipedia.org/wiki/Transmission_Control_Protocol Latenz
25. TCP Slow-Start KB 0 55 110 165 220 Roundtrip 1. 2. 3. 4.
26. Download einer 58 kB Datei von einem US Ostküstenserver nach Frankfurt. Roundtrip Time: 80 ms Zeit client server 0 ms SYN --> <-- SYN,ACK 80 ms ACK --> GET --> <-- 10 TCP Segmente (14.600 Bytes) 160 ms ACK --> <-- 20 TCP Segmente (29.200 Bytes) 240 ms ACK --> <-- 40 TCP Segmente (15.592 Bytes) 320 ms ACK --> Downloadzeit einer 58 kB Datei: 320 ms
27. blink-dev thread • Cable profile (5Mbps / 28 ms RTT) • Main thread attribution in Blink o Measured via Telemetry • 69.5% of time blocked on network • 6.6% of time blocked JavaScript • 5.1% blocked on Layout • 4.5% blocked on Paint • ... No surprises here... First page load is network (latency) bound! Top 1M Alexa sites... +Ilya Grigorik @igrigorik
28. Bei HTTP zählt nur Latenz! Bandbreite ist irrelevant!
29. http://amooma.de/2014/10/08/lichtgeschwindigkeit-bleibt-lichtgeschwindigkeit.html Beispiel amooma.de Falkenstein, Deutschland Sydney, Australien
30. Weniger Dateien
31. Beispiel abiturma.de
32. Wasserfall
34. Die Anzahl der Dateien ist bei HTTP/1.x ein Bottleneck. Es werden von einer Domain nur x Dateien auf einmal geladen.
35. Können wir das nicht mit „Domain shard“ lösen?
36. Domain shard… all the things! 6 connections per origin
 just add more origins, right? Duplicate (spurious) data packets due to oversharding http://perf.fail/post/96104709544/zealous-sharding-hurts-etsy- performance Optimal number of shards? There is no such thing. Depends on particular page, device + network + network weather. Most sites overshard, and hurt themselves… Causing congestion, retransmissions, etc.
37. HTTP Cache
39. Wichtig: Es gibt keine zweite Chance für einen ersten Eindruck.
40. Was ist mit HTTP/2? BTW: HTTP/2 != SPDY
41. Latenz bleibt auch bei HTTP/2 Priorität.
42. Browser Support • Chrome M39 enthält HTTP/2 (draft 14) • Firefox 34 enthält HTTP/2 (draft 14) • IE supportet HTTP/2 auf Windows 10 Technical Preview • Safari supportet SPDY aber noch nicht HTTP/2
43. Server Support • Keine ETA für Apache oder Nginx • nghttp2 unterstützt HTTP/2
44. HTTP/2 ist noch nicht da und es ist es keine Wundermedizin. So bald es für alle verfügbar ist, wird sich allerdings wieder viel verändern. Dann ist z.B. die Anzahl der Dateien egal.
45. Ist Webperformance wirklich so kompliziert?
46. Es ist noch viel komplizierter! Ich habe heute nur die einfachsten Themen angesprochen. Mein Lese-Tipp:
47. !
48. Fragen? Fragen! stefan.wintermeyer@amooma.de @wintermeyer