Building abof.com

58ee5dea31e2728e65099cc03c694d8e?s=47 Ankur Sethi
September 15, 2016

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

58ee5dea31e2728e65099cc03c694d8e?s=128

Ankur Sethi

September 15, 2016
Tweet

Transcript

  1. building abof.com ankur sethi ankur@alarisprime.com

  2. None
  3. None
  4. None
  5. None
  6. >20 seconds before something showed up on the screen on

    a 3g connection
  7. None
  8. time to first paint

  9. None
  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

  22. None
  23. page load strategy http://www.abof.com/women/clothing/dresses

  24. stage 1: html

  25. None
  26. stage 2: javascript which then loads images, account information, etc.

    asynchronously
  27. None
  28. None
  29. None
  30. stage 3: everything else third party scripts, analytics, etc.

  31. None
  32. stage 1: html

  33. why?

  34. perception of speed

  35. None
  36. first 12 products measure to discover what works best for

    you
  37. how?

  38. universal rendering or isomorphic rendering

  39. None
  40. None
  41. None
  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

  50. None
  51. None
  52. None
  53. None
  54. None
  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

  62. None
  63. None
  64. phew

  65. None
  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