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

WebPerformance für Reiseblogger

WebPerformance für Reiseblogger

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

Stefan Wintermeyer

April 14, 2018
Tweet

More Decks by Stefan Wintermeyer

Other Decks in Technology

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. [email protected]
    last name | twitter | github
    e-mail

    View Slide