WebPerformance für Reiseblogger

Vortrag den ich auf https://reisebloggercamp.de 2018 gehalten habe.

Transcript

1. W E B P E R F F Ü R R E I S E B L O G S
   S T E FA N W I N T E R M E Y E R
   Mt. Everest
   

   View Slide

2. Ich beschäftige mich
   seit über 20 Jahren
   mit Tourismus und
   Webseiten.
   Achtung: Gleich kommt ein Screenshot von 1996.
   

   View Slide

3. Stefan Wintermeyer
   • 1993 - 1998: SW Reisedienst
   • 1998 - 2001: SuSE Linux AG
   • 2001 - 2003: Lufthansa AG
   • 2003 - 2005: OTRS GmbH
   • 2005 - 2017: amooma GmbH
   • Ab 2017: Wintermeyer Consulting
   

   View Slide

4. Meine erste kommerzielle Webseite: 1996
   

   View Slide

5. Heute verdiene ich
   mein Geld mit
   Consulting und Training
   rund um
   WebPerformance, Rails
   und Phoenix.
   Aber das Thema Reisen beschäftigt mich immer noch.
   

   View Slide

6. Aber das Thema Reisen beschäftigt mich immer noch.
   reisepassnummer.de
   mehr-schulferien.de
   

   View Slide

7. mehr-schulferien.de
   

   View Slide

8. Warum sind schnelle
   Webseiten wichtig?
   

   View Slide

9. Yo ho ho and a few billion pages of RUM
   How speed affects bounce rate
   @igrigorik
   

   View Slide

10. Usability Engineering 101
    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...
    Stay under 250
    ms to feel "fast".
    Stay under 1000
    ms to keep users
    attention.
    @igrigorik
    

    View Slide

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

12. For many, mobile is the one and only internet
    device!
    Country Mobile-only users
    Egypt 70%
    India 59%
    South Africa 57%
    Indonesia 44%
    United States 25%
    onDevice Research
    @igrigorik
    

    View Slide

13. < 1.000 ms Page Loading Time on
    G3 ist der Mount Everest.
    

    View Slide

14. The (short) life of our 1000 ms budget
    3G (200 ms
    RTT)
    4G(80 ms RTT)
    Control plane (200-2500 ms) (50-100 ms)
    DNS lookup 200 ms 80 ms
    TCP Connection 200 ms 80 ms
    TLS handshake (200-400 ms) (80-160 ms)
    HTTP request 200 ms 80 ms
    Leftover budget 0-400 ms 500-760 ms
    Network overhead
    of one HTTP
    request!
    @igrigorik
    

    View Slide

15. SEO
    

    View Slide

16. Grundregel:
    Google bevorzugt
    schnelle Webseiten.
    

    View Slide

17. Aber: Wenn man eine
    Webseite mit den Lottozahlen
    der nächsten Woche hat,
    dann kann diese Seite noch
    so langsam sein. Sie hätte
    immer ein gutes Ranking.
    

    View Slide

18. Ein Reiseblog über New
    York muss schnell sein.
    Ein Reiseblog über
    Mandang in Papua
    Neuguinea nicht
    zwingend.
    

    View Slide

19. Webpage Rendering
    Basics
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. The rendering process
    takes a minimum of 100 ms
    which we have to subtract
    from the 1,000 ms.
    

    View Slide

26. Download a file with
    HTTP/TCP
    

    View Slide

27. Latency
    client
    Zeit
    0 ms
    80 ms
    160 ms
    240 ms
    320 ms
    10 TCP Segmente (14.600 Bytes)
    20 TCP Segmente (29.200 Bytes)
    40 TCP Segmente (15.592 Bytes)
    server
    SYN
    ACK
    ACK
    GET
    SYN,ACK
    ACK
    ACK
    

    View Slide

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

    View Slide

29. Waterfall
    www.webpagetest.org
    https://reisebloggercamp.de
    

    View Slide

30. 3G Run => https://www.webpagetest.org/result/
    180413_KR_013db9231a7322fbf13cc121f0893d40/
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. LTE Run => https://www.webpagetest.org/result/
    180413_7R_b2d5c2a1dab34bda18ba79ea15d9d4e6/
    

    View Slide

35. View Slide

36. View Slide

37. Was ist technisch
    in Deutschland
    machbar?
    

    View Slide

38. LTE run => https://www.webpagetest.org/result/
    180316_5B_de436fb724593d7b746b9c1f89ff3c2d/
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. HTTP/1.2 vs. HTTP/2
    

    View Slide

43. HTTP/2 provides an average
    WebPerformance improvement
    of 20%.
    It’s a no-brainer.
    You have to use it!
    

    View Slide

44. CDNs and HTTP/2
    

    View Slide

45. Long story short:

    In many cases where a CDN made
    sense with HTTP/1.1 it doesn’t
    make sense any more. Try to
    deliver everything from your
    server.
    

    View Slide

46. Apache vs. Nginx
    

    View Slide

47. It doesn’t matter!

    Use the one you like most.
    

    View Slide

48. Brotli vs. gzip
    

    View Slide

49. Always offer both.
    Brotli can be used to
    save bandwidth and
    CPU-Resources.
    

    View Slide

50. P R E L O A D I N G U N D
    P R E F E T C H I N G
    

    View Slide

51. P R E L O A D I N G U N D P R E F E T C H I N G
    DNS pre-resolution
    TCP pre-connect
    prefresh
    preloader
    

    View Slide

52. M A N U A L D N S - P R E F E T C H
    
    http://www.chromium.org/developers/design-documents/dns-prefetching
    „Most common names like google.com and yahoo.com are resolved so
    often that most local ISP's name resolvers can answer in closer to 80-120ms.
    If the domain name in question is an uncommon name, then a query may
    have to go through numerous resolvers up and down the hierarchy, and the
    delay can average closer to 200-300ms.“
    

    View Slide

53. P R E F E T C H
    
    http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch
    „The prefetch keyword indicates that preemptively fetching and caching the
    specified resource is likely to be beneficial, as it is highly likely that the user
    will require this resource.“
    T I P P : " A C C E P T - R A N G E S : B Y T E S “ H E A D E R
    

    View Slide

54. P R E R E N D E R
    
    

    View Slide

55. Y O U C A N T E L L N G I N X T O
    P U S H T H O S E F I L E S V I A H T T P / 2 .
    

    View Slide

56. AMP
    

    View Slide

57. www.ampproject.org
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. The Most
    Important Tool?
    

    View Slide

62. Set a Time Budget!
    If you run out of your time budget you have to
    cancel features on your website.
    

    View Slide

63. Is WebPerformance really so hard?
    

    View Slide

64. The WebPerf Bible. => https://hpbn.co
    

    View Slide

65. http://www.heise.de/ix/inhalt/2015/8/102/
    

    View Slide

66. @wintermeyer
    

    View Slide

67. Kann ich mir das
    einkaufen?
    

    View Slide

68. Wordpress
    und wenig Geld?
    https://www.fiverr.com/gigs/amp
    

    View Slide

69. Wordpress
    und gerne alles auf
    Deutsch?
    http://www.richertproduction.de
    

    View Slide

70. sw@wintermeyer-consulting.de
    last name | twitter | github
    e-mail
    

    View Slide