Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebPerformance für Reiseblogger

WebPerformance für Reiseblogger

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

Stefan Wintermeyer

April 14, 2018

More Decks by Stefan Wintermeyer

Other Decks in Technology


  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. Ich beschäftige mich seit über 20 Jahren mit Tourismus und

    Webseiten. Achtung: Gleich kommt ein Screenshot von 1996.
  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. Meine erste kommerzielle Webseite: 1996

  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.
  6. Aber das Thema Reisen beschäftigt mich immer noch. reisepassnummer.de mehr-schulferien.de

  7. mehr-schulferien.de

  8. Warum sind schnelle Webseiten wichtig?

  9. Yo ho ho and a few billion pages of RUM

    How speed affects bounce rate @igrigorik
  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
  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
  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
  13. < 1.000 ms Page Loading Time on G3 ist der

    Mount Everest.
  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
  15. SEO

  16. Grundregel: Google bevorzugt schnelle Webseiten.

  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.
  18. Ein Reiseblog über New York muss schnell sein. Ein Reiseblog

    über Mandang in Papua Neuguinea nicht zwingend.
  19. Webpage Rendering Basics

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

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

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

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

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

  25. The rendering process takes a minimum of 100 ms which

    we have to subtract from the 1,000 ms.
  26. Download a file with HTTP/TCP

  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
  28. TCP Slow-Start KB 0 55 110 165 220 Roundtrip 1.

    2. 3. 4. 214KB 100KB 43KB 14KB 114KB 57KB 29KB 14KB
  29. Waterfall www.webpagetest.org https://reisebloggercamp.de

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

  31. None
  32. None
  33. None
  34. LTE Run => https://www.webpagetest.org/result/ 180413_7R_b2d5c2a1dab34bda18ba79ea15d9d4e6/

  35. None
  36. None
  37. Was ist technisch in Deutschland machbar?

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

  39. None
  40. None
  41. None
  42. HTTP/1.2 vs. HTTP/2

  43. HTTP/2 provides an average WebPerformance improvement of 20%. It’s a

    no-brainer. You have to use it!
  44. CDNs and HTTP/2

  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.
  46. Apache vs. Nginx

  47. It doesn’t matter!
 Use the one you like most.

  48. Brotli vs. gzip

  49. Always offer both. Brotli can be used to save bandwidth

    and CPU-Resources.
  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
  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
  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.“
  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
  54. P R E R E N D E R <link

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

  57. www.ampproject.org

  58. None
  59. None
  60. None
  61. The Most Important Tool?

  62. Set a Time Budget! If you run out of your

    time budget you have to cancel features on your website.
  63. Is WebPerformance really so hard?

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

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

  66. @wintermeyer

  67. Kann ich mir das einkaufen?

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

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

  70. [email protected] last name | twitter | github e-mail