Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebPerformance - Autobahn oder Fussgängerzone

Ad005fac83baa60843ddf2bc3bc8fe93?s=47 Stefan Wintermeyer
August 22, 2015
Programming
1
380

WebPerformance - Autobahn oder Fussgängerzone

FrOSCon 2015 Vortrag.

Ad005fac83baa60843ddf2bc3bc8fe93?s=128

Stefan Wintermeyer

August 22, 2015
Tweet

More Decks by Stefan Wintermeyer

See All by Stefan Wintermeyer
The Greener Gras
Ad005fac83baa60843ddf2bc3bc8fe93?s=48 wintermeyer
0
56
Rails vs. Phoenix vs. Hanami
Ad005fac83baa60843ddf2bc3bc8fe93?s=48 wintermeyer
0
970
RubyConfBy 2018 talk about WebPerformance with Rails 5.2
Ad005fac83baa60843ddf2bc3bc8fe93?s=48 wintermeyer
3
170
WebPerformance für Reiseblogger
Ad005fac83baa60843ddf2bc3bc8fe93?s=48 wintermeyer
0
83
WebPerformance with Rails 5.2
Ad005fac83baa60843ddf2bc3bc8fe93?s=48 wintermeyer
5
660
FrOSCon 2017 talk about vutuv
Ad005fac83baa60843ddf2bc3bc8fe93?s=48 wintermeyer
0
280
Elixir Mini Introduction for Zürich Meetup
Ad005fac83baa60843ddf2bc3bc8fe93?s=48 wintermeyer
0
97
Lonestar ElixirConf 2017 talk about vutuv and Phoenix
Ad005fac83baa60843ddf2bc3bc8fe93?s=48 wintermeyer
1
270
WebPerformance Meetup in Cologne (Feb. 2017)
Ad005fac83baa60843ddf2bc3bc8fe93?s=48 wintermeyer
1
130

Other Decks in Programming

See All in Programming
Improving Developer Experience Through Tools and Techniques 2022
A6942d4cbda185db86d1323f837ad2de?s=48 krzysztofzablocki
0
1k
git on intellij
1a51f443c6d75a0576428792b0da05f2?s=48 hiroto_kitamura
0
170
Scrum Fest Osaka 2022/5年で200人になったスタートアップの アジャイル開発の歴史とリアル
F0a8d07597a19192791bf663504d2a17?s=48 atamaplus
1
920
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
240
リアルタイムボイスチェンジャーMMVCとVITSの紹介
A5f618dd37c9f9866423579247cb3fb0?s=48 stealthinu
0
110
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
79fc33e55cacc42beef647541de24d58?s=48 yasuakiomokawa
2
470
Amazon ECSのネットワーク関連コストの話
D4d93646eedaaf5a9551cfc0ccd5b020?s=48 msato
0
650
Springin‘でみんなもクリエイターに！
000064025fd47aaaeda16b914f44cc79?s=48 ueponx
0
220
Licences open source : entre guerre de clochers et radicalité
323bb1cb39e6478e559b6e13d2fdf518?s=48 pylapp
2
510
Jetpack Compose, 어디까지 알고 있을까?
4d4d46ec84935e69f6f63b011873335d?s=48 jisungbin
0
120
データ分析やAIの "運用" について考える
5b1f54cf0af2f41f7c1bf93ce0f0debf?s=48 mmorito
0
140
クックパッドマートの失敗したデータ設計 Before / After 大放出
0be62f7ac4cc32f37f02a98aaeb86f5f?s=48 mokuzon
0
170

Featured

See All Featured
Web development in the modern age
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
197
9.3k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
Principles of Awesome APIs and How to Build Them.
B47b288784fda77a94aeb234ca743c24?s=48 keavy
113
15k
Designing Experiences People Love
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
130
22k
Fontdeck: Realign not Redesign
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
39
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
119
28k
Easily Structure & Communicate Ideas using Wireframe
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
15k
Building an army of robots
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
299
40k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.7k
Designing for Performance
245cee81a9c424266e5e401d844ea881?s=48 lara
597
63k
The MySQL Ecosystem @ GitHub 2015
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
11k

Transcript

  1. WebPerformance Autobahn oder Fußgängerzone Stefan Wintermeyer <stefan.wintermeyer@amooma.de>

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

    das Basecamp.

  3. Warum muss ich mich mit WebPerformance beschäftigen?

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

  5. 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…

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

  7. Seiteneffekt: 
 Schnelle Webseiten benötigen weniger Server.

  8. Was ist schnell? BTW: Wir sprechen in erster Linie vom

    Viewport und natürlich von allen Geräten (also auch 3G auf dem Handy).

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

    Silber.

  10. Wie lange dauert es eine einfache Webseite darzustellen?

  11. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lorem ipsum</title> <link rel="icon"

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

  12. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lorem ipsum</title> <link rel="icon"

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

  14. 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

  15. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lorem ipsum</title> <link rel="icon"

    </head> <body> <h1>First Heading</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </body> </html> http://demo.amooma.de/webperf/disabledgzip/minimal/minimal-x10.html

  16. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lorem ipsum</title> <link rel="icon"

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

  17. 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

  18. Start Render 8 Dom Elements (1 <p>) 17 Dom Elements

    (10 <p>) Frankfurt 0.294s 0.286s San Francisco 0.494s 0.494s Sydney 1.498s 1.497s

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

  20. HTTP 1.1 + TCP

  21. 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

  22. 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

  23. TCP Slow-Start KB 0 55 110 165 220 Roundtrip 1.

    2. 3. 4. 214KB 100KB 43KB 14KB 114KB 57KB 29KB 14KB

  24. 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

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

  26. GSM, 3G und 4G/LTE

  27. 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/

  28. 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/

  29. 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

  30. DNS Lookup TCP Connection HTTP Request 600ms 3G Netzwerk Overhead

    200ms 200ms 200ms Bis hier weiß der Webserver noch nichts von der Anfrage.

  31. Wie wird eine Webseite vom Browser gerendert?

  32. Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

  33. Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

  34. Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

  35. Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

  36. Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

  37. HTTP/1.1 lädt Dateien seriell. Allerdings öffnet der Browser 6 TCP-Verbindungen

    zu einer Domain gleichzeitig.

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

  39. Beispiel I

  40. None

  41. 0 2 4 6 8 WLAN 2G 3G 4G LTE

    7,5 1,8 0,1 6,1

  42. 0 2 4 6 8 WLAN 2G 3G 4G LTE

    7,5 1,8 0,1 6,1

  43. 0 2 4 6 8 WLAN 2G 3G 4G LTE

    7,5 1,8 0,1 6,1

  44. Google Analytics 
 und der 
 Durchschnitt www.amooma.de GA Daten

    (01.07. - 31.07.15)

  45. Avg. Page Load Time: 1.68s

  46. 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

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

  48. None

  49. 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

  50. Der Durchschnitt muss immer analysiert werden!

  51. Beispiel II

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

  53. None

  54. Start Render: 2.201s Visually Complete: 3.7 s

  55. None
  56. None

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

  58. 5 CSS Dateien die wertvolle TCP Verbindungen blockieren.
 Zu einer

    Datei zusammenfassen!

  59. Auch diese 5 JavaScript Dateien sollten besser zu einer Datei

    zusammengefasst werden.

  60. Time to First Byte: Über 1 Sekunde!

  61. Grafiken Optimieren. 
 z.B. lossless mit https://kraken.io/ 
 Kleinvieh macht

    auch Mist!

  62. 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 %

  63. Network HTML DOM CSS CSSOM JavaScript Render tree Layout Paint

    Wissen über die Webseite anwenden
  64. None

  65. <link rel="prefetch" href="// www.froscon.de/kopfbild1.jpg" as="image"> Prefetch siehe http://w3c.github.io/resource-hints/#prefetch

  66. Vorhersehbare DNS-Abfragen und TCP-Connections

  67. <link rel="preconnect" href="//xyz.com"> Preconnect siehe http://w3c.github.io/resource-hints/#preconnect

  68. Mit 1 PT Aufwand wäre ein Verbesserung um 1 Sekunde

    möglich.

  69. Mit etwas mehr Aufwand wäre das 1.000ms Ziel auch auf

    einer 3G Verbindung erreichbar.

  70. HTTP/2

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

  72. HTTP/2 kann mehrere Dateien parallel übertragen und benutzt nur noch

    eine TCP-Verbindung. Dadurch wird die Bandbreite optimal ausgenutzt.

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

  74. Alle evergreen Browser unterstützen HTTP/2 heute.

  75. Leider unterstützen heute weder Apache noch Nginx HTTP/2. Für Nginx

    gibt es eine Alpha Version.

  76. Viele HTTP/1.1 Optimierungen machen unter HTTP/2 keinen Sinn mehr. Man

    fängt oft wieder bei Null an.

  77. Ist WebPerformance wirklich so komplex?

  78. Low-Hanging Fruits

  79. ~ 20 s Death by redirect.

  80. Nie mehr als 100 Dateien pro Webseite. BTW: Der TCP

    keepalive_requests Default ist 100.

  81. gzip

  82. CSS und JavaScript jeweils zusammenfassen

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

  84. Umstieg auf HTTP/2

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

  86. www.varnish-cache.org

  87. www.phoenixframework.org

  88. www.webpagetest.org

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

  90. Fragen? Fragen! stefan.wintermeyer@amooma.de @wintermeyer Folien => http://www.amooma.de