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
   

   View Slide

2. Primäres
   Bewertungskriterium
   einer Webseite?
   

   View Slide

3. Conversion Rate
   

   View Slide

4. Source: http://en.wikipedia.org/wiki/Conversion_marketing#Conversion_rate
   

   View Slide

5. Schnelle Ladegeschwindigkeiten
   sollen zu einer besseren
   Conversion Rate führen?
   

   View Slide

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…
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. Source: https://www.igvita.com/slides/2012/webperf-crash-course.pdf
   

   View Slide

10. Every second = 0.65
    increase in bounce rate
    Source: https://www.igvita.com/slides/2012/webperf-crash-course.pdf
    

    View Slide

11. Anonymes Beispiel
    

    View Slide

12. DIE Ladegeschwindigkeit
    zu messen ist nicht trivial.
    

    View Slide

13. Besucher haben
    unterschiedliche
    • Browser 

    (z.B. IE, Chrome, Safari, Opera, …)
    • Netzwerkanbindung
    • CPU und RAM
    • usw.
    

    View Slide

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
    

    View Slide

15. Wichtig:
    Verstand einschalten
    

    View Slide

16. Wie kann man
    Ladegeschwindigkeit
    verbessern?
    

    View Slide

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)
    

    View Slide

18. PageSpeed Optimierung
    ist ein Full-Stack Problem.
    

    View Slide

19. Low Hanging Fruits
    Sie haben drei Wünsche frei.
    

    View Slide

20. Netzwerk Latenz
    Wenn Sie an nur einer Schraube drehen können, dann entscheiden
    Sie sich bitte immer für eine geringere Netzwerk Latenz!
    

    View Slide

21. Die Latenz zwischen Server und Client wird
    hauptsächlich von der Länge der Strecke
    dazwischen beeinflusst.
    Lichtgeschwindigkeit ist der Flaschenhals.
    

    View Slide

22. http://amooma.de/2014/10/08/lichtgeschwindigkeit-bleibt-lichtgeschwindigkeit.html
    Beispiel amooma.de
    Falkenstein, Deutschland Sydney, Australien
    

    View Slide

23. Warum ist Latenz 

    so essentiell?
    

    View Slide

24. TCP
    Source: http://en.wikipedia.org/wiki/Transmission_Control_Protocol
    Latenz
    

    View Slide

25. TCP Slow-Start
    KB
    0
    55
    110
    165
    220
    Roundtrip
    1. 2. 3. 4.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

28. Bei HTTP zählt nur Latenz!
    Bandbreite ist irrelevant!
    

    View Slide

29. http://amooma.de/2014/10/08/lichtgeschwindigkeit-bleibt-lichtgeschwindigkeit.html
    Beispiel amooma.de
    Falkenstein, Deutschland Sydney, Australien
    

    View Slide

30. Weniger Dateien
    

    View Slide

31. Beispiel
    abiturma.de
    

    View Slide

32. Wasserfall
    

    View Slide

33. View Slide

34. Die Anzahl der Dateien ist bei
    HTTP/1.x ein Bottleneck. Es
    werden von einer Domain nur x
    Dateien auf einmal geladen.
    

    View Slide

35. Können wir das nicht mit
    „Domain shard“ lösen?
    

    View Slide

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.
    

    View Slide

37. HTTP Cache
    

    View Slide

38. View Slide

39. Wichtig: Es gibt keine
    zweite Chance für einen
    ersten Eindruck.
    

    View Slide

40. Was ist mit HTTP/2?
    BTW: HTTP/2 != SPDY
    

    View Slide

41. Latenz bleibt auch bei
    HTTP/2 Priorität.
    

    View Slide

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
    

    View Slide

43. Server Support
    • Keine ETA für Apache oder Nginx
    • nghttp2 unterstützt HTTP/2
    

    View Slide

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.
    

    View Slide

45. Ist Webperformance wirklich so kompliziert?
    

    View Slide

46. Es ist noch
    viel
    komplizierter!
    Ich habe heute nur die
    einfachsten Themen
    angesprochen.
    Mein Lese-Tipp:
    

    View Slide

47. !
    

    View Slide

48. Fragen? Fragen!
    stefan.wintermeyer@amooma.de
    @wintermeyer
    

    View Slide