Tödliche Langsamkeit - ux congress 2014

Slide 1

Slide 1 text

Tödliche Langsamkeit [email protected] @wintermeyer

Slide 2

Slide 2 text

Primäres Bewertungskriterium einer Webseite?

Slide 3

Slide 3 text

Conversion Rate

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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…

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Anonymes Beispiel

Slide 12

Slide 12 text

DIE Ladegeschwindigkeit zu messen ist nicht trivial.

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Wichtig: Verstand einschalten

Slide 16

Slide 16 text

Wie kann man Ladegeschwindigkeit verbessern?

Slide 17

Slide 17 text

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 Graﬁkformat) • Besseres Caching • LOC HTML, CSS und JavaScript reduzieren • Andere Protokolle (z.B. HTTP/2 oder quic)

Slide 18

Slide 18 text

PageSpeed Optimierung ist ein Full-Stack Problem.

Slide 19

Slide 19 text

Low Hanging Fruits Sie haben drei Wünsche frei.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Warum ist Latenz   so essentiell?

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Weniger Dateien

Slide 31

Slide 31 text

Beispiel abiturma.de

Slide 32

Slide 32 text

Wasserfall

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

HTTP Cache

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Latenz bleibt auch bei HTTP/2 Priorität.

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

Ist Webperformance wirklich so kompliziert?

Slide 46

Slide 46 text

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