WebPerformance Meetup in Cologne (Feb. 2017)

WebPerformance Meetup in Cologne (Feb. 2017)

At the WebPerformance Meetup in Cologne I presented this talk about how we tackle WebPerformance at https://www.vutuv.de

https://www.meetup.com/de-DE/cologne-germany-high-performance-website-optimization-group/events/236635872/

Ad005fac83baa60843ddf2bc3bc8fe93?s=128

Stefan Wintermeyer

February 02, 2017
Tweet

Transcript

  1. stefan.wintermeyer@amooma.de

  2. I’m not going to cover all the basics. I’m going

    to cherry pick 4 topics. To cover the basics:
 http://hpbn.co
  3. vutuv differentiates itself from other business networks by speed.

  4. Fully Loaded: 700 ms (DSL in Germany)

  5. We jump through hoops to achieve this. Make no mistake:

    This is not easy. Spoiler alert: We don’t use JavaScript.
  6. Why is speed important?

  7. 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…
  8. 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
  9. None
  10. None
  11. Network latency is paramount. Why?

  12. TCP Source: http://en.wikipedia.org/wiki/Transmission_Control_Protocol Latenz

  13. Download a 58 kB file from a US east cost

    server to a client in Frankfurt. Protocol: HTTP Roundtrip Time: 80 ms Zeit client server 0 ms SYN --> <-- SYN,ACK 80 ms ACK --> GET --> <-- 10 TCP Segmente (14.600 Bytes) 160 ms ACK --> <-- 20 TCP Segmente (29.200 Bytes) 240 ms ACK --> <-- 40 TCP Segmente (15.592 Bytes) 320 ms ACK --> Time to download a 58 kB file: 320 ms
  14. TCP Slow-Start KB 0 55 110 165 220 Roundtrip 1.

    2. 3. 4. 213 99 42 14 114 57 28 14
  15. SSL adds at least 
 one roundtrip.
 
 HTTP/2.0 needs

    SSL.
  16. HTTPS KB 0 50 100 150 200 Roundtrip 1. 2.

    3. 4. 199 85 28 0 114 57 28 14 SSL
  17. Above the fold target: 28 KB KB 0 50 100

    150 200 Roundtrip 1. 2. 3. 4. 199 85 28 0 114 57 28 14 SSL
  18. Latency is king! Bandwidth is not important for normal websites.

  19. Frankfurt, Germany Sydney, Australia Sydney: https://www.webpagetest.org/result/170130_3H_S13/
 Frankfurt: https://www.webpagetest.org/result/170130_YJ_SRS/ DSL

  20. Frankfurt, Germany Sydney, Australia Frankfurt: https://www.webpagetest.org/result/170131_CX_B7D/
 Sydney: https://www.webpagetest.org/result/170131_XZ_B7P/ 3G

  21. None
  22. Dulles, VA, USA https://www.webpagetest.org/video/compare.php?tests=170131_QQ_BHG,170131_9F_BHH,170131_49_BHJ DSL

  23. How it’s done?

  24. Set a time budget and stick to it! Our time

    budget is 1 second for Germany.
  25. Start Render Document Complete

  26. Important: We can not control the network!

  27. What we can control: • Transfer Protocol (e.g. HTTP/1.1 vs.

    HTTP/2.0) • Compression (e.g. gzip vs. zopfli vs. brotli) • Amount of files • File size • Time the server needs to generate the HTML • Content (e.g. HTML, CSS, JavaScript, Images)
  28. None
  29. File size Time on the server

  30. The Server

  31. We use the Phoenix Framework. 
 www.phoenixframework.org

  32. Phoenix is about 
 10 times faster 
 than Ruby

    on Rails or Django. The functional programming language Elixir has a lot of more advantages, but today I’m only talking about speed.
  33. We avoid serving freshly generated HTML when not needed. Hard

    Drives are much cheaper than CPU.
  34. /var/www/vutuv/ cache - index.html - index.html.gz users - xyz.html -

    xyz.html.gz No Cookie = Static Content
  35. 1,000,000 users x 28 KB = 26 GB

  36. Rendering a user’s profile: 50 ms. Serving a static file:

    less than 1 ms.
  37. The Avatars

  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. guetzli -quality 75 a.jpg /tmp/q75-a.jpg convert a.jpg /tmp/q75-a.jpg -fx 'hypot(65-i,

    65-j) < 65 ? u : v' new_a.jpg https://github.com/google/guetzli
  45. By that we save 15-20% of file size. BTW: We

    optimize during off peak times.
  46. Compression

  47. /var/www/vutuv/ cache - index.html - index.html.gz users - xyz.html -

    xyz.html.gz Always provide a compressed version of a static file.
  48. html-minifier --case-sensitive --collapse-boolean-attributes --collapse-whitespace --remove-comments --remove-optional-tags --remove-tag-whitespace --sort-attributes --sort-class-name --collapse-inline-tag-whitespace

    --conservative-collapse a.html > b.html Optimize before compress
  49. Use zopfli instead of gzip. https://github.com/google/zopfli

  50. For live content use brotli. https://github.com/google/brotli

  51. Inlining

  52. HTTP caching is good but for our time budget not

    good enough.
  53. We inline a lot.

  54. We inline all the CSS.

  55. We inline many images.

  56. None
  57. None
  58. Fill the Steps KB 0 50 100 150 200 Roundtrip

    1. 2. 3. 4. 199 85 28 0 114 57 28 14 SSL
  59. Prefetch

  60. Analyse your workflow and prefetch stuff that you’ll need in

    the next step.
  61. None
  62. We’re never done with optimizing vutuv.de

  63. Q&A stefan.wintermeyer@amooma.de Please join us at https://www.vutuv.de