Tweet
Tweet

Slide 1

Slide 1 text

WebPerformance Autobahn oder Fußgängerzone Stefan Wintermeyer

Slide 2

Slide 2 text

Wir erreichen heute nicht den Gipfel! Ich zeige Ihnen nur das Basecamp.

Slide 3

Slide 3 text

Warum muss ich mich mit WebPerformance beschäftigen?

Slide 4

Slide 4 text

Source: https://www.igvita.com/slides/2012/webperf-crash-course.pdf How speed affects bounce rate

Slide 5

Slide 5 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 6

Slide 6 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 7

Slide 7 text

Seiteneffekt: 
 Schnelle Webseiten benötigen weniger Server.

Slide 8

Slide 8 text

Was ist schnell? BTW: Wir sprechen in erster Linie vom Viewport und natürlich von allen Geräten (also auch 3G auf dem Handy).

Slide 9

Slide 9 text

Unter 1.000 ms auf 3G ist Gold. 1-2 Sekunden ist Silber.

Slide 10

Slide 10 text

Wie lange dauert es eine einfache Webseite darzustellen?

Slide 11

Slide 11 text

Lorem ipsum

First Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

http://demo.amooma.de/webperf/disabledgzip/minimal/minimal.html

Slide 12

Slide 12 text

Lorem ipsum

First Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

http://demo.amooma.de/webperf/disabledgzip/minimal/minimal.html

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Start Render Speed Index DOM Elements Frankfurt http://www.webpagetest.org/result/150811_5M_G74/ 0.294s 300 8 San Francisco http://www.webpagetest.org/result/150811_DT_GSK/ 0.494s 500 8 Sydney http://www.webpagetest.org/result/150811_AX_G7Y/ 1.498s 1500 8

Slide 15

Slide 15 text

Lorem ipsum

First Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

http://demo.amooma.de/webperf/disabledgzip/minimal/minimal-x10.html

Slide 16

Slide 16 text

Lorem ipsum

First Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

http://demo.amooma.de/webperf/disabledgzip/minimal/minimal-x10.html

Slide 17

Slide 17 text

Start Render Speed Index DOM Elements Frankfurt http://www.webpagetest.org/result/150811_MT_M2Y/ 0.286s 300 17 San Francisco http://www.webpagetest.org/result/150811_SN_M2Q/ 0.494s 500 17 Sydney http://www.webpagetest.org/result/150811_47_MTS/ 1.497s 1500 17

Slide 18

Slide 18 text

Start Render 8 Dom Elements (1

) 17 Dom Elements (10

) Frankfurt 0.294s 0.286s San Francisco 0.494s 0.494s Sydney 1.498s 1.497s

Slide 19

Slide 19 text

Warum benötigt die zweite Datei nicht mehr Zeit zum Darstellen?

Slide 20

Slide 20 text

HTTP 1.1 + TCP

Slide 21

Slide 21 text

SYN SYN, ACK ACK + GET ACK ACK Client / Browser Server ~14 KB 10 Segmente zu je 1.460 Byte ~28 KB 20 Segmente zu je 1.460 Byte 10 x 2n Segmente

Slide 22

Slide 22 text

SYN SYN, ACK ACK + GET ACK ACK Client / Browser Server ~14 KB ~28 KB 0 ms 40 ms 80 ms 160 ms 240 ms 120 ms 200 ms 280 ms

Slide 23

Slide 23 text

TCP Slow-Start KB 0 55 110 165 220 Roundtrip 1. 2. 3. 4. 214KB 100KB 43KB 14KB 114KB 57KB 29KB 14KB

Slide 24

Slide 24 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 25

Slide 25 text

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

Slide 26

Slide 26 text

GSM, 3G und 4G/LTE

Slide 27

Slide 27 text

Download Mbps 0 2 4 6 8 WLAN 2G 3G 4G LTE 7,5 1,8 0,1 6,1 Quelle: http://opensignal.com/reports/state-of-lte-q1-2014/

Slide 28

Slide 28 text

Time on LTE 0 % 25 % 50 % 75 % 100 % Süd Korea Schweden USA Deutschland Russland 42 % 47 % 67 % 88 % 91 % Quelle: http://opensignal.com/reports/state-of-lte-q1-2014/

Slide 29

Slide 29 text

Von der WebPerformance mit 3G hängt der Erfolg ab. 0 2 4 6 8 WLAN 2G 3G 4G LTE 7,5 1,8 0,1 6,1

Slide 30

Slide 30 text

DNS Lookup TCP Connection HTTP Request 600ms 3G Netzwerk Overhead 200ms 200ms 200ms Bis hier weiß der Webserver noch nichts von der Anfrage.

Slide 31

Slide 31 text

Wie wird eine Webseite vom Browser gerendert?

Slide 32

Slide 32 text

Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

Slide 33

Slide 33 text

Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

Slide 34

Slide 34 text

Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

Slide 35

Slide 35 text

Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

Slide 36

Slide 36 text

Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

Slide 37

Slide 37 text

HTTP/1.1 lädt Dateien seriell. Allerdings öffnet der Browser 6 TCP-Verbindungen zu einer Domain gleichzeitig.

Slide 38

Slide 38 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 39

Slide 39 text

Beispiel I

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

0 2 4 6 8 WLAN 2G 3G 4G LTE 7,5 1,8 0,1 6,1

Slide 42

Slide 42 text

0 2 4 6 8 WLAN 2G 3G 4G LTE 7,5 1,8 0,1 6,1

Slide 43

Slide 43 text

0 2 4 6 8 WLAN 2G 3G 4G LTE 7,5 1,8 0,1 6,1

Slide 44

Slide 44 text

Google Analytics 
 und der 
 Durchschnitt www.amooma.de GA Daten (01.07. - 31.07.15)

Slide 45

Slide 45 text

Avg. Page Load Time: 1.68s

Slide 46

Slide 46 text

0 10 20 30 40 Norwegen Schweden Finland Pakistan Slovakia China 30,59 16,75 16,52 0,46 0,46 0,44 Avg. Page Load Time in Sekunden

Slide 47

Slide 47 text

Avg. Page Load Time für Deutschland:
 0.75s

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Avg. Page Load Time - Sekunden Sachsen-Anhalt 0,51 Rheinland-Pfalz 0,52 Sachsen 0,55 Brandenburg 0,59 Baden-Würthemberg 0,60 Saarland 0,62 Bayern 0,72 Hessen 0,76 Berlin 0,79 NRW 0,83 Niedersachsen 0,93 Hamburg 1,01 Schleswig-Holstein 1,07 Mecklenburg-Vorpom. 1,27 Thüringen 1,52 Bremen 1,65

Slide 50

Slide 50 text

Der Durchschnitt muss immer analysiert werden!

Slide 51

Slide 51 text

Beispiel II

Slide 52

Slide 52 text

http://www.webpagetest.org/result/150818_90_H8T/

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Start Render: 2.201s Visually Complete: 3.7 s

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Unnötiger Redirect auf
 http://www.froscon.de/startseite/

Slide 58

Slide 58 text

5 CSS Dateien die wertvolle TCP Verbindungen blockieren.
 Zu einer Datei zusammenfassen!

Slide 59

Slide 59 text

Auch diese 5 JavaScript Dateien sollten besser zu einer Datei zusammengefasst werden.

Slide 60

Slide 60 text

Time to First Byte: Über 1 Sekunde!

Slide 61

Slide 61 text

Grafiken Optimieren. 
 z.B. lossless mit https://kraken.io/ 
 Kleinvieh macht auch Mist!

Slide 62

Slide 62 text

Dateiname Original kraken.io % Savings gb.gif 1.03 KB 1.03 KB 0 % froscon_logo.png 5.39 KB 4.02 KB 25.38 % icon_retweet.gif 84 B 84 B 0 % logo_fh_rhein-sieg.png 3.93 KB 3.65 KB 7.03 % logo_luusa.png 4.83 KB 4.60 KB 4.87 % csm_HEG_Logo_1cacd1631b.png 6.61 KB 4.68 KB 29.08 % mitp__4c_dax_96dpi.jpg 24.54 KB 2.87 KB 88.29 % google-plus.png 1.47 KB 1.26 KB 14.65 % twitter.png 2.17 KB 1.28 KB 40.97 % facebook.png 1.01 KB 900 B 12.71 % kopfbild1.jpg 96.42 KB 94.00 KB 2.51 % Summe 147.48 KB 118.36 KB 19.75 %

Slide 63

Slide 63 text

Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint Wissen über die Webseite anwenden

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Prefetch siehe http://w3c.github.io/resource-hints/#prefetch

Slide 66

Slide 66 text

Vorhersehbare DNS-Abfragen und TCP-Connections

Slide 67

Slide 67 text

Preconnect siehe http://w3c.github.io/resource-hints/#preconnect

Slide 68

Slide 68 text

Mit 1 PT Aufwand wäre ein Verbesserung um 1 Sekunde möglich.

Slide 69

Slide 69 text

Mit etwas mehr Aufwand wäre das 1.000ms Ziel auch auf einer 3G Verbindung erreichbar.

Slide 70

Slide 70 text

HTTP/2

Slide 71

Slide 71 text

HTTP/2 baut auf dem von Google erfundenen SPDY Protokoll auf.

Slide 72

Slide 72 text

HTTP/2 kann mehrere Dateien parallel übertragen und benutzt nur noch eine TCP-Verbindung. Dadurch wird die Bandbreite optimal ausgenutzt.

Slide 73

Slide 73 text

Im Schnitt werden per HTTP/2 abgerufene Seiten 20% schnell dargestellt.

Slide 74

Slide 74 text

Alle evergreen Browser unterstützen HTTP/2 heute.

Slide 75

Slide 75 text

Leider unterstützen heute weder Apache noch Nginx HTTP/2. Für Nginx gibt es eine Alpha Version.

Slide 76

Slide 76 text

Viele HTTP/1.1 Optimierungen machen unter HTTP/2 keinen Sinn mehr. Man fängt oft wieder bei Null an.

Slide 77

Slide 77 text

Ist WebPerformance wirklich so komplex?

Slide 78

Slide 78 text

Low-Hanging Fruits

Slide 79

Slide 79 text

~ 20 s Death by redirect.

Slide 80

Slide 80 text

Nie mehr als 100 Dateien pro Webseite. BTW: Der TCP keepalive_requests Default ist 100.

Slide 81

Slide 81 text

gzip

Slide 82

Slide 82 text

CSS und JavaScript jeweils zusammenfassen

Slide 83

Slide 83 text

Grafiken optimieren Tipp: https://kraken.io/

Slide 84

Slide 84 text

Umstieg auf HTTP/2

Slide 85

Slide 85 text

Statischer Content ist immer am schnellsten! Tipp: http://jekyllrb.com/

Slide 86

Slide 86 text

www.varnish-cache.org

Slide 87

Slide 87 text

www.phoenixframework.org

Slide 88

Slide 88 text

www.webpagetest.org

Slide 89

Slide 89 text

WebPerformance Literatur http://www.heise.de/ix/inhalt/2015/8/102/ http://chimera.labs.oreilly.com/books/1230000000545

Slide 90

Slide 90 text

Fragen? Fragen! [email protected] @wintermeyer Folien => http://www.amooma.de