A case study of how we re-built Flipkart.com's desktop website as a progressive web app while dealing with the unique challenges of scaling to a new ecosystem without compromising on performance.
Typical SPA • Serve empty HTML from server • Client downloads JS bundle • Shows loaders, makes API calls • Renders full page • Subsequent navigations are client-side
Typical SPA • Serve empty HTML from server • Client downloads JS bundle • Shows loaders, makes API calls • Renders full page • Subsequent navigations are client-side Pros: • Easy to implement • Fast navigations • Cheap server processing • Low server QPS
Update #2 - Server Render • Render full page on server for first request • Client loads JS, makes API calls • Re-renders complete page Pros: • First paint is meaningful • SEO is solved!
Update #3 - Universal app Pros: • Lesser load on server • Better SEO, smaller HTML • Header/Footer can load quicker :: Perceived perf! Cons: • First paint still slow • No organic content in first- paint • JS file is still huge
#5 - Route based chunking • Break JS bundle into parts based on routes • Only load JS required for the current page • Subsequent JS can be loaded when needed
#7 - HTML streaming • Some parts of html are independent of page type/ url. Send those first to start resource download • Smart use of preload, prefetch and defer!
Pros: • CSS and JS resources can start downloading within milliseconds of request • Page is ready to render as soon as HTML is downloaded Cons: • Server has to keep connection open with client until download completes • Client can download limited number of resources at a time
Track custom perf events • Existing browser events like DOMContentLoaded and Load are not sufficient • Track real first-paint using RAF and User Timing API • More custom metrics?
Key Take-aways • Problems and solutions are different for Mobile and Desktop • Treat performance as a feature • You can’t optimise what you can’t measure • You can split JS bundles into smaller chunks • Smart preloading of chunks goes a long way • RUM is important. Synthetic testing can only do so much.