Building abof.com

Slides for my talk at JSFoo about building the new version of abof.com from scratch using React.

More info at https://blog.alarisprime.com/e-commerce-case-study-building-faster-listing-pages-on-abof-com-part-1-cb99231a1e8a

Transcript

1. building abof.com ankur sethi ankur@alarisprime.com
6. >20 seconds before something showed up on the screen on a 3g connection
8. time to first paint
10. abof’s numbers
11. time to first paint on 3g time in seconds 0 5 10 15 20 before after 2.6s 20s
12. page load time on 3g time in seconds 0 7 14 21 28 before after 9.4s 27s
13. http://bit.ly/2bBESNF
14. three principles
15. be impatient start painting to the screen as early as possible
16. be lazy do as little work on the device as possible
17. set quotas for payload size, number of requests, memory use pretty much all your computing resources
18. tech stack
19. speed payload tooling server rendering people react ✅ ⚠ ✅ ✅ ✅ angular2 ✅ ⚠ vue ✅ ✅ ⚠ ⚠ riot ✅ ✅ ⚠ ⚠
20. redux webpack babel gulp and others
21. architecture
23. page load strategy http://www.abof.com/women/clothing/dresses
24. stage 1: html
26. stage 2: javascript which then loads images, account information, etc. asynchronously
30. stage 3: everything else third party scripts, analytics, etc.
32. stage 1: html
33. why?
34. perception of speed
36. first 12 products measure to discover what works best for you
37. how?
38. universal rendering or isomorphic rendering
42. react-dom
43. react-native
44. renderToString()
45. stage 2: javascript which then loads images, account information, etc. asynchronously
46. why?
47. prioritize user intent user wants to look at dresses, not account information
48. how?
49. first react takes over
55. then it fills in the blanks • product images • account information • loved products • bag items • site footer
56. stage 3: everything else third party scripts, analytics, etc.
57. why?
58. progressive enhancement and good old fashioned respect
59. analytics
60. queue analytics events
61. redux middleware
64. phew
66. app performance talk to me!
67. testing load times webpagetest, pagespeed insights, and your eyeballs get drunk on 12th main
68. testing app performance test on real devices
69. questions?
70. ankur@alarisprime.com
71. hi@alarisprime.com