WebPerformance - Autobahn oder Fussgängerzone

FrOSCon 2015 Vortrag.

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!
    stefan.wintermeyer@amooma.de
    @wintermeyer
    Folien => http://www.amooma.de
    

    View Slide