Tödliche Langsamkeit - ux congress 2014

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

Ad005fac83baa60843ddf2bc3bc8fe93?s=128

Stefan Wintermeyer

November 11, 2014
Tweet

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

  33. None
  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

  38. None
  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