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

Web Performance As An Essential Part Of The User Experience - BEC 17

Ca901ddcea38854b9783781c91fc87c9?s=47 Thijs Feryn
October 05, 2017

Web Performance As An Essential Part Of The User Experience - BEC 17

Slides for my web performance talk at the Belgian E-commerce Conference 2017 in Antwerpen.

Presentation details: https://feryn.eu/speaking/web-performance-essential-part-user-experience/

Ca901ddcea38854b9783781c91fc87c9?s=128

Thijs Feryn

October 05, 2017
Tweet

Transcript

  1. By Thijs Feryn Web performance as an essential part of

    the user experience
  2. Slow websites suck

  3. Web performance is an essential part of the user experience

  4. Slow ~ Down

  5. Saturated market

  6. None
  7. None
  8. None
  9. Hi, I’m Thijs

  10. I’m @ThijsFeryn on Twitter

  11. I’m an Evangelist At

  12. None
  13. Infrastructure

  14. Code

  15. Slow database

  16. Slow API call

  17. Browser rendering

  18. User location

  19. Time To First Byte

  20. DNS TCP TLS Request Response TTFB Render

  21. CODE + INFRA

  22. Identify slowest parts

  23. None
  24. None
  25. Reduce the impact of the code on the server

  26. Response times at increased concurrency Response times 0 35 70

    105 140 Concurrency 10 50 100 150 200 250 300 350 400 450 500 Page 1 Page 2 Hypothetical example
  27. Not just raw speed

  28. Stable speed under increasing load Response times 0 10 20

    30 40 Concurrency 10 50 100 150 200 250 300 350 400 450 500
  29. Refactor slow code Write fast code

  30. Optimize database

  31. Improve the API call

  32. Optimize runtime

  33. After a while you hit the limits

  34. E-commerce context

  35. Platforms Frameworks

  36. Mo money Mo servers

  37. High A vailability

  38. Recurring cost

  39. CAPEX

  40. None
  41. Cache

  42. Optimize database Optimize runtime A void A void

  43. Don’t recompute if the data hasn’t changed

  44. 3 x 2 = ?

  45. What can you cache? Byte code Database output External services

    Files from disk Pages
  46. Caching is not a compensation for poor code

  47. Caching is an essential architectural strategy

  48. Varnish

  49. Normally User Server

  50. With Varnish User Varnish Server

  51. Leverage HTTP for caching

  52. Cache-Control: public, max-age=500, s-maxage=3600 Vary: Accept-Encoding, Accept-Language ETag: 7ECE8823114E4155A2A72657BB2682D0 Surrogate-Control:

    key=ESI/1.0 Content-Encoding: deflate Transfer-Encoding: chunked
  53. None
  54. E-commerce context

  55. Platform integration for Varnish, Memcached, Redis

  56. Combine Varnish & Redis

  57. Browser rendering

  58. Time To First Paint

  59. Time To First Meaningful Paint

  60. DNS TCP TLS Request Response TTF(M)P Render

  61. JPG PNG CSS ICO JS Sum of individual loading/rendering times

    WOFF JPG JPG PNG CSS CSS JS
  62. #Round Trips x Round Trip Time

  63. Reduce Round Trips

  64. Reduce Response Sizes

  65. ✓ Compress images ✓ Illustrations in SVG format ✓ Inline

    images, CSS, JS ✓ CSS sprites ✓ Use “srcset” to get the right image size ✓ Uglify CSS/JS ✓ Combine CSS/JS files Reduce Response Sizes & Round Trips
  66. ✓ Avoid blocking Javascript ✓ Chunked Transfer-Encoding ✓ Gzip compression

    for non-binary data ✓ Domain sharding for static assets ✓ HTTP/2 Reduce Response Sizes & Round Trips
  67. JPG PNG CSS JS HTML JPG JPG PNG CSS CSS

    JS domain.ext img.domain.ext static.domain.ext HTTP/1.1 domain sharding
  68. JPG PNG CSS JS HTML JPG JPG PNG CSS CSS

    JS domain.ext HTTP/2
  69. ✓ Multiplexing requests over single connection ✓ Header compression ✓

    Server push HTTP/2
  70. User location

  71. Network latency

  72. ✓ Trans Atlantic: 75 ms ✓ Europe: 11 ms ✓

    North America: 39 ms ✓ Trans Pacific: 102 ms ✓ Latin America: 133 ms ✓ EMEA to Asia Pacific: 131 ms Network latency
  73. 3G & EDGE

  74. Content Delivery Network

  75. http://www.metacdn.com/

  76. Reverse caching proxies all over the world

  77. None
  78. ✓ Less latency ✓ Caching ✓ Serve stale data if

    origin site is down ✓ Output optimization ✓ Anti-DDoS measures CDN benefits
  79. Web performance is a discipline in its own

  80. https://feryn.eu https://twitter.com/ThijsFeryn https://instagram.com/ThijsFeryn

  81. None
  82. None