$30 off During Our Annual Pro Sale. View Details »

WebPerformance - Autobahn oder Fussgängerzone

WebPerformance - Autobahn oder Fussgängerzone

FrOSCon 2015 Vortrag.

Stefan Wintermeyer

August 22, 2015
Tweet

More Decks by Stefan Wintermeyer

Other Decks in Programming

Transcript

  1. WebPerformance
    Autobahn oder Fußgängerzone
    Stefan Wintermeyer

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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…

    View Slide

  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

    View Slide

  7. Seiteneffekt: 

    Schnelle Webseiten
    benötigen weniger Server.

    View Slide

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

    View Slide

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

    View Slide

  10. Wie lange dauert es eine
    einfache Webseite
    darzustellen?

    View Slide





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

    View Slide





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

    View Slide

  13. View Slide

  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

    View Slide





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

    View Slide





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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  20. HTTP 1.1 + TCP

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  26. GSM, 3G und 4G/LTE

    View Slide

  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/

    View Slide

  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/

    View Slide

  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

    View Slide

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

    View Slide

  31. Wie wird eine Webseite
    vom Browser gerendert?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  39. Beispiel I

    View Slide

  40. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. Google Analytics 

    und der 

    Durchschnitt
    www.amooma.de GA Daten (01.07. - 31.07.15)

    View Slide

  45. Avg. Page Load Time:
    1.68s

    View Slide

  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

    View Slide

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

    0.75s

    View Slide

  48. View Slide

  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

    View Slide

  50. Der Durchschnitt muss
    immer analysiert werden!

    View Slide

  51. Beispiel II

    View Slide

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

    View Slide

  53. View Slide

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

    View Slide

  55. View Slide

  56. View Slide

  57. Unnötiger Redirect auf

    http://www.froscon.de/startseite/

    View Slide

  58. 5 CSS Dateien die wertvolle TCP
    Verbindungen blockieren.

    Zu einer Datei zusammenfassen!

    View Slide

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

    View Slide

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

    View Slide

  61. Grafiken Optimieren. 

    z.B. lossless mit https://kraken.io/ 

    Kleinvieh macht auch Mist!

    View Slide

  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 %

    View Slide

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

    View Slide

  64. View Slide


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

    View Slide

  66. Vorhersehbare DNS-Abfragen
    und TCP-Connections

    View Slide


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

    View Slide

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

    View Slide

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

    View Slide

  70. HTTP/2

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  77. Ist WebPerformance wirklich so komplex?

    View Slide

  78. Low-Hanging Fruits

    View Slide

  79. ~ 20 s
    Death by redirect.

    View Slide

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

    View Slide

  81. gzip

    View Slide

  82. CSS und JavaScript
    jeweils zusammenfassen

    View Slide

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

    View Slide

  84. Umstieg auf HTTP/2

    View Slide

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

    View Slide

  86. www.varnish-cache.org

    View Slide

  87. www.phoenixframework.org

    View Slide

  88. www.webpagetest.org

    View Slide

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

    View Slide

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

    View Slide