WebPerformance - Autobahn oder Fussgängerzone

WebPerformance Autobahn oder Fußgängerzone Stefan Wintermeyer <[email protected]>

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

Warum muss ich mich mit WebPerformance beschäftigen?

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

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…

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

Seiteneffekt:   Schnelle Webseiten benötigen weniger Server.

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

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

Wie lange dauert es eine einfache Webseite darzustellen?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lorem ipsum</title> <link rel="icon"
</head> <body> <h1>First Heading</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </body> </html> http://demo.amooma.de/webperf/disabledgzip/minimal/minimal.html

href="data:;base64,iVBORw0KGgo="> </head> <body> <h1>First Heading</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </body> </html> http://demo.amooma.de/webperf/disabledgzip/minimal/minimal.html

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

</head> <body> <h1>First Heading</h1> 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. </body> </html> http://demo.amooma.de/webperf/disabledgzip/minimal/minimal-x10.html

href="data:;base64,iVBORw0KGgo="> </head> <body> <h1>First Heading</h1> 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. </body> </html> http://demo.amooma.de/webperf/disabledgzip/minimal/minimal-x10.html

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

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

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

HTTP 1.1 + TCP

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

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

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

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

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

GSM, 3G und 4G/LTE

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/

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/

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

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

Wie wird eine Webseite vom Browser gerendert?

Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

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

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.

Beispiel I

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

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

Avg. Page Load Time: 1.68s

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

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

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

Der Durchschnitt muss immer analysiert werden!

Beispiel II

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

Start Render: 2.201s Visually Complete: 3.7 s

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

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

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

Time to First Byte: Über 1 Sekunde!

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

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 %

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

Vorhersehbare DNS-Abfragen und TCP-Connections

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

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

HTTP/2

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

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

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

Alle evergreen Browser unterstützen HTTP/2 heute.

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

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

Ist WebPerformance wirklich so komplex?

Low-Hanging Fruits

~ 20 s Death by redirect.

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

CSS und JavaScript jeweils zusammenfassen

Graﬁken optimieren Tipp: https://kraken.io/

Umstieg auf HTTP/2

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

www.varnish-cache.org

www.phoenixframework.org

www.webpagetest.org

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

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

WebPerformance - Autobahn oder Fussgängerzone

WebPerformance - Autobahn oder Fussgängerzone

More Decks by Stefan Wintermeyer

Other Decks in Programming

Featured

Transcript