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

A framework-less zoomsquare.com

A framework-less zoomsquare.com

Why we moved zoomsquare.com away from client side frameworks and
JS stuff we use to make our user experience instant!

Bernd Artmüller

September 27, 2017
Tweet

Other Decks in Technology

Transcript

  1. None
  2. 2 Why we moved zoomsquare.com away from client side frameworks

    and JS stuff we use to make our user experience instant!
  3. 3 Frontend Dev, Product Manager, SEO Guy BERND ARTMÜLLER bernd@zoomsquare.com

    @berndartmueller
  4. 4

  5. 5

  6. 6 Real estate search engine & platform in AT &

    DE Social media Focus more on new developments
  7. Tech Stack Evolution Early 2017 Mid 2017 2016 2014

  8. 8

  9. •Angular 2 + RxJS •Redux Stores •Webpack •Server Side Rendering

    •JiT & AoT Compilation •Async Routes & Code Splitting 9 Previous Stack
  10. •Build very slow •Complexity & „Magic“ behind the scenes •Server-side

    rendering •Lazy Loaded components flicker •Huge JS payload sent to client 10 Problems
  11. 11

  12. 12

  13. 13

  14. Webpack 2 Node.JS & Express Pug Templates Custom micro client-side

    framework (Size Budget ~30kb) - UmbrellaJS Turbolinks - AJAX page loading Self-written components ServiceWorker Redis Caching 14 Rewrite everything
  15. 15

  16. • Progressive enhancement • Page navigation with Ajax • Graceful

    degradation if JS disabled • Hybrid Apps using native navigation controls 16 Turbolinks
  17. 17 Custom Container Class

  18. 18 Custom Container Class

  19. 19 Preloading

  20. 20 Rendering Pre-compiled Pug Templates with webpack -> 1-2ms render

    time
  21. 21 Custom Pug Components (Mixins)

  22. 22 Custom Pug Components (Mixins)

  23. • Node.js + Redis Service • Caches all submitted pages

    (~25.000) • Re-generate every 6 hours 23 Caching
  24. 24

  25. 25 Client JS Payload 631kb ~25kb Before After

  26. 26 2400ms ~700ms Before After +342% *Above the fold rendering

    Speed Index*
  27. 27 Pages / Session Organic Traffic +56% Leads +57% +30%

  28. 28

  29. 29 Takeaway Think carefully if your website is a SPA

    or needs a framework!!
  30. Questions?