WebPerformance für Reiseblogger

WebPerformance für Reiseblogger

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

Ad005fac83baa60843ddf2bc3bc8fe93?s=128

Stefan Wintermeyer

April 14, 2018
Tweet

Transcript

  1. 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
  2. 2.

    Ich beschäftige mich seit über 20 Jahren mit Tourismus und

    Webseiten. Achtung: Gleich kommt ein Screenshot von 1996.
  3. 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
  4. 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.
  5. 9.

    Yo ho ho and a few billion pages of RUM

    How speed affects bounce rate @igrigorik
  6. 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
  7. 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
  8. 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
  9. 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
  10. 15.

    SEO

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

    Ein Reiseblog über New York muss schnell sein. Ein Reiseblog

    über Mandang in Papua Neuguinea nicht zwingend.
  13. 25.

    The rendering process takes a minimum of 100 ms which

    we have to subtract from the 1,000 ms.
  14. 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
  15. 28.

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

    2. 3. 4. 214KB 100KB 43KB 14KB 114KB 57KB 29KB 14KB
  16. 31.
  17. 32.
  18. 33.
  19. 35.
  20. 36.
  21. 39.
  22. 40.
  23. 41.
  24. 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.
  25. 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
  26. 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 <link rel="dns-prefetch"... <link rel="prefetch"... <link rel="prerender"... DNS pre-resolution TCP pre-connect prefresh preloader
  27. 52.

    M A N U A L D N S -

    P R E F E T C H <link rel="dns-prefetch" href="//abc.com"> 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.“
  28. 53.

    P R E F E T C H <link rel="prefetch"

    href=„http://abc.com/important.js"> 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
  29. 54.

    P R E R E N D E R <link

    rel="prerender" href=„http://abc.com/faq.html“>
  30. 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 .
  31. 56.

    AMP

  32. 58.
  33. 59.
  34. 60.
  35. 62.

    Set a Time Budget! If you run out of your

    time budget you have to cancel features on your website.