Tweet
Tweet

Slide 1

Slide 1 text

The Next-Gen Web Abhinav Rastogi @_abhinavrastogi A case study of how we re-built Flipkart.com

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Flipkart Lite Service Worker, App Shells Progressive Web App

Slide 4

Slide 4 text

Probably the first
 mobile -> desktop migration!

Slide 5

Slide 5 text

Significant Differences Mobile vs Desktop

Slide 6

Slide 6 text

Requirements User Behaviour Network Conditions Device Capabilities Browser Fragmentation

Slide 7

Slide 7 text

Typical SPA • Serve empty HTML from server • Client downloads JS bundle • Shows loaders, makes API calls • Renders full page • Subsequent navigations are client-side

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

First Paint + Full Render

Slide 10

Slide 10 text

Cons: • Empty page for a long time • SEO jeopardised • JS bundle is huge

Slide 11

Slide 11 text

Upgrade #1 - App Shells Initial HTML renders ‘loading state’
 (Build-time rendering)

Slide 12

Slide 12 text

Upgrade #1 - App Shells Initial HTML renders ‘loading state’
 (Build-time rendering) Pros: • No more empty page!

Slide 13

Slide 13 text

Full Render with content First Paint (Loading state)

Slide 14

Slide 14 text

Cons: • Stuck in “Loading” state • First-paint is not meaningful content

Slide 15

Slide 15 text

Update #2 - Server Render • Render full page on server for first request • Client loads JS, makes API calls • Re-renders complete page

Slide 16

Slide 16 text

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!

Slide 17

Slide 17 text

Client Render + Interactive First Paint + Full Render

Slide 18

Slide 18 text

Cons: • Significant increase in server load • HTML download size increased • Response time increased • JS file is still huge

Slide 19

Slide 19 text

Update #3 - Universal app • Render only SEO-critical content on server • Client continues to work as normal • React is able to reconcile the DOM

Slide 20

Slide 20 text

Update #3 - Universal app

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Update #4 - First-fold Render above-the-fold content also on the server

Slide 23

Slide 23 text

Update #4 - First-fold Progressive Images!

Slide 24

Slide 24 text

Update #4 - First-fold Pros: • Making API calls from server is better • Organic content in first paint! • Send api data as part of HTML

Slide 25

Slide 25 text

#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

Slide 26

Slide 26 text

#5 - Route based chunking

Slide 27

Slide 27 text

Break JS bundle? • Define “split-points” • Replace “import” with “require.ensure” • Webpack & React-Router take care of the rest!

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

(as of [email protected])

Slide 30

Slide 30 text

Full Render with content

Slide 31

Slide 31 text

Typical HTML page

Slide 32

Slide 32 text

Update #6 - PRPL • Push critical resources for the initial route. • Render initial route. • Pre-cache remaining routes. • Lazy-load and create remaining routes on demand.

Slide 33

Slide 33 text

Basic Preloading

Slide 34

Slide 34 text

#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!

Slide 35

Slide 35 text

Basic Streaming using Express.js

Slide 36

Slide 36 text

Static resource download starts in milliseconds First paint with meaningful content Full page render

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Chunking + Streaming + Preload (PRPL) Real first-paint First-paint event?

Slide 39

Slide 39 text

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?

Slide 40

Slide 40 text

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.

Slide 41

Slide 41 text

@_abhinavrastogi Thank you!