Why we moved zoomsquare.com away from client side frameworks and JS stuff we use to make our user experience instant!
View Slide
2Why we moved zoomsquare.com away from client side frameworks andJS stuff we use to make our user experience instant!
3Frontend Dev, Product Manager, SEO GuyBERND ARTMÜLLER[email protected]@berndartmueller
4
5
6Real estate search engine & platform in AT & DESocial mediaFocus more on new developments
Tech Stack EvolutionEarly 2017 Mid 201720162014
8
•Angular 2 + RxJS•Redux Stores•Webpack•Server Side Rendering•JiT & AoT Compilation•Async Routes & Code Splitting9Previous Stack
•Build very slow•Complexity & „Magic“ behind the scenes•Server-side rendering•Lazy Loaded components flicker•Huge JS payload sent to client10Problems
11
12
13
Webpack 2Node.JS & ExpressPug TemplatesCustom micro client-side framework (Size Budget ~30kb)- UmbrellaJSTurbolinks - AJAX page loadingSelf-written componentsServiceWorkerRedis Caching14Rewrite everything
15
• Progressive enhancement• Page navigation with Ajax• Graceful degradation if JS disabled• Hybrid Apps using native navigation controls16Turbolinks
17Custom Container Class
18Custom Container Class
19Preloading
20RenderingPre-compiled Pug Templates with webpack -> 1-2ms render time
21Custom Pug Components (Mixins)
22Custom Pug Components (Mixins)
• Node.js + Redis Service• Caches all submitted pages (~25.000)• Re-generate every 6 hours23Caching
24
25Client JS Payload631kb ~25kbBefore After
262400ms ~700msBefore After+342%*Above the fold renderingSpeed Index*
27Pages / Session Organic Traffic+56%Leads+57%+30%
28
29TakeawayThink carefully if your website is a SPA or needs a framework!!
Questions?