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/

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
9. Hi, I’m Thijs
10. I’m @ThijsFeryn on Twitter
11. I’m an Evangelist At
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
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
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
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
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