View
830
Download
0
Category
Preview:
Citation preview
ALL ABOUT PERCEIVED PERFORMANCE
Aakash BapnaUI Engineer flipkartcom
1
2
Arya
Abhilash
Me
I HATE SLOW WEBSITES
3
4
ANYTHING YOU ADD- BROWSERS HAVE TO DOWNLOAD COMPUTE amp
RENDER
5
ANYTHING YOU ADD- BROWSERS HAVE TO DOWNLOAD COMPUTE amp
RENDER
6
Basics Performance Rules
bull CSS on top JS at bottombull Use CDNbull Caching static resourcesbull Minify JS CSS gzipbull hellip Y slow rules
7
8
USERS STILL SAY YOUR SITE IS SLOW
WHAT PERCEIVED PERFORMANCE
9
10
ITS ALL HOW USERS PERCEIVE YOUR PAGE LOAD
whether loads in a flash or takes ages to load
11
YOU HAVE TO MAKE USERS BELIEVE ITS LOADING FAST
12
HOW WE DO THIS
13
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
2
Arya
Abhilash
Me
I HATE SLOW WEBSITES
3
4
ANYTHING YOU ADD- BROWSERS HAVE TO DOWNLOAD COMPUTE amp
RENDER
5
ANYTHING YOU ADD- BROWSERS HAVE TO DOWNLOAD COMPUTE amp
RENDER
6
Basics Performance Rules
bull CSS on top JS at bottombull Use CDNbull Caching static resourcesbull Minify JS CSS gzipbull hellip Y slow rules
7
8
USERS STILL SAY YOUR SITE IS SLOW
WHAT PERCEIVED PERFORMANCE
9
10
ITS ALL HOW USERS PERCEIVE YOUR PAGE LOAD
whether loads in a flash or takes ages to load
11
YOU HAVE TO MAKE USERS BELIEVE ITS LOADING FAST
12
HOW WE DO THIS
13
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
I HATE SLOW WEBSITES
3
4
ANYTHING YOU ADD- BROWSERS HAVE TO DOWNLOAD COMPUTE amp
RENDER
5
ANYTHING YOU ADD- BROWSERS HAVE TO DOWNLOAD COMPUTE amp
RENDER
6
Basics Performance Rules
bull CSS on top JS at bottombull Use CDNbull Caching static resourcesbull Minify JS CSS gzipbull hellip Y slow rules
7
8
USERS STILL SAY YOUR SITE IS SLOW
WHAT PERCEIVED PERFORMANCE
9
10
ITS ALL HOW USERS PERCEIVE YOUR PAGE LOAD
whether loads in a flash or takes ages to load
11
YOU HAVE TO MAKE USERS BELIEVE ITS LOADING FAST
12
HOW WE DO THIS
13
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
4
ANYTHING YOU ADD- BROWSERS HAVE TO DOWNLOAD COMPUTE amp
RENDER
5
ANYTHING YOU ADD- BROWSERS HAVE TO DOWNLOAD COMPUTE amp
RENDER
6
Basics Performance Rules
bull CSS on top JS at bottombull Use CDNbull Caching static resourcesbull Minify JS CSS gzipbull hellip Y slow rules
7
8
USERS STILL SAY YOUR SITE IS SLOW
WHAT PERCEIVED PERFORMANCE
9
10
ITS ALL HOW USERS PERCEIVE YOUR PAGE LOAD
whether loads in a flash or takes ages to load
11
YOU HAVE TO MAKE USERS BELIEVE ITS LOADING FAST
12
HOW WE DO THIS
13
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
ANYTHING YOU ADD- BROWSERS HAVE TO DOWNLOAD COMPUTE amp
RENDER
5
ANYTHING YOU ADD- BROWSERS HAVE TO DOWNLOAD COMPUTE amp
RENDER
6
Basics Performance Rules
bull CSS on top JS at bottombull Use CDNbull Caching static resourcesbull Minify JS CSS gzipbull hellip Y slow rules
7
8
USERS STILL SAY YOUR SITE IS SLOW
WHAT PERCEIVED PERFORMANCE
9
10
ITS ALL HOW USERS PERCEIVE YOUR PAGE LOAD
whether loads in a flash or takes ages to load
11
YOU HAVE TO MAKE USERS BELIEVE ITS LOADING FAST
12
HOW WE DO THIS
13
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
ANYTHING YOU ADD- BROWSERS HAVE TO DOWNLOAD COMPUTE amp
RENDER
6
Basics Performance Rules
bull CSS on top JS at bottombull Use CDNbull Caching static resourcesbull Minify JS CSS gzipbull hellip Y slow rules
7
8
USERS STILL SAY YOUR SITE IS SLOW
WHAT PERCEIVED PERFORMANCE
9
10
ITS ALL HOW USERS PERCEIVE YOUR PAGE LOAD
whether loads in a flash or takes ages to load
11
YOU HAVE TO MAKE USERS BELIEVE ITS LOADING FAST
12
HOW WE DO THIS
13
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
Basics Performance Rules
bull CSS on top JS at bottombull Use CDNbull Caching static resourcesbull Minify JS CSS gzipbull hellip Y slow rules
7
8
USERS STILL SAY YOUR SITE IS SLOW
WHAT PERCEIVED PERFORMANCE
9
10
ITS ALL HOW USERS PERCEIVE YOUR PAGE LOAD
whether loads in a flash or takes ages to load
11
YOU HAVE TO MAKE USERS BELIEVE ITS LOADING FAST
12
HOW WE DO THIS
13
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
8
USERS STILL SAY YOUR SITE IS SLOW
WHAT PERCEIVED PERFORMANCE
9
10
ITS ALL HOW USERS PERCEIVE YOUR PAGE LOAD
whether loads in a flash or takes ages to load
11
YOU HAVE TO MAKE USERS BELIEVE ITS LOADING FAST
12
HOW WE DO THIS
13
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
WHAT PERCEIVED PERFORMANCE
9
10
ITS ALL HOW USERS PERCEIVE YOUR PAGE LOAD
whether loads in a flash or takes ages to load
11
YOU HAVE TO MAKE USERS BELIEVE ITS LOADING FAST
12
HOW WE DO THIS
13
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
10
ITS ALL HOW USERS PERCEIVE YOUR PAGE LOAD
whether loads in a flash or takes ages to load
11
YOU HAVE TO MAKE USERS BELIEVE ITS LOADING FAST
12
HOW WE DO THIS
13
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
ITS ALL HOW USERS PERCEIVE YOUR PAGE LOAD
whether loads in a flash or takes ages to load
11
YOU HAVE TO MAKE USERS BELIEVE ITS LOADING FAST
12
HOW WE DO THIS
13
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
YOU HAVE TO MAKE USERS BELIEVE ITS LOADING FAST
12
HOW WE DO THIS
13
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
HOW WE DO THIS
13
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
14
Skeleton screens- Homepage (below fold)
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
Progressively enhanced MotoG page
15
SLOW CONNECTION FAST CONNECTION
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
16
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
Other Techniques 1 Show precise progress loader when it
takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now
17
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
MEASURING PERCEIVED PERFORMANCE
HARD
18
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
SYNTHETIC MONITORING
19
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how
page loaded3 CPU network utilisation4 Filmstrips 5 etchellip
20
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
21
Frames
Waterfall
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT
22
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
Problem with WPT
bull Inconsistent results for load times on every run
bull Probably due to network conditions in India
23
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST
IS SEEING
24
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
REAL USER MONITORING
25
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very
early4 This is the bare minimum you should
record
26
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
27
NAVIGATION TIMING API
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
28
NAVIGATION TIMING API
Server Time Very less for big sites
Client Time Very HighNEED MOAR DETAILS
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM
REAL USERS
and reconstruct picture
29
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
Resource Timing API
bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available
when cross origin headers are setbull under documented
30
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
NAVIGATION TIMING API + RESOURCE TIMING API =
WINDOWONLOAD
complete end to end picture of network performance
31
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS
32
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
33
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
34
Requests Waterfall from RUM
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
35
Identify critical requests
Requests Waterfall from RUM
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
36
Above the fold load time aim for getting this as low as possible
Requests Waterfall from RUM
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
Findings (what was fast)
bull CSS JS are heavily cached over requests median under 100ms
bull Cleaning up CSSJS would hardly move metrics
bull Although CSS load times are less its a blocking resource and need to keep a check on its size
37
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
Findings (what was slow)
bull Google Analytics Omniture tracking calls were taking 500ms (median)
bull Redirectsbull HTML document itself taking too long
to loadbull Images
38
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
CRITICAL REQUESTS
Let browser handle make them discoverable to browsers as soon as possible via
markup itself
39
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
NON-CRITICAL BELOW FOLD
Lazy load images lazy load modules via Ajax at DOM Ready
40
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
3RD PARTY CODE SHARE BUTTONS
You donrsquot have control over these start at post onload
41
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
42
All in all data by Resource Timing APIs is a gold mine There is lots to discover from it
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
FIXING IMAGES
43
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo
DESIGNER ldquoOKAY HOW SMALLrdquo
DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)
44
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
DONrsquoT GUESS USE DATA
use data from Resource Timing APIs
45
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
46
Example730px x 300px
50kb 380ms to load
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
FIXING CAROUSELS
47
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
48
An example carousel on site
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
49
3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three
Wrong way
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
50
Median load time 380ms
Right way
Load via javascript after critical requests end
Load via ltimg src=rsquorsquordquo gt as a critical resource
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
IMAGE REUSE
51
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
52
Browse Page Product Page
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
53
Browse Page Product Page
Same cached image from previous page upscaled and used as placeholder while big image loads
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
THEMING
All developers hate it
54
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
55
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
Progressive festival theming1 Theme is non-critical should load after all
critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM
ready
56
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
FIXING HTML SIZE
Important as affects discovery on critical requests
57
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
Our huuuge Nav menu
58
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
MENU ON SLOW CONNECTION
59
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
60
lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
HTML caching
bull Over 40 of our markup is flyout menu
bull Persisted on clientside with localStorage for 10 mins
bull Drastically reduced payload which was transferred for every request
bull 200ms improvement over median
61
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
REDIRECTS
very costly
62
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
IT ALL STARTS WITH A SHORTCUT
if (some condition) redirect()
63
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON
64
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
PREFER ONE URL BETWEEN MOBILEDESKTOP
wwwflipkartcom - goodwwwflipkartcomm - bad
65
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
MOBILE SITE PERFORMANCE
66
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
Mobile perf highlights
bull Much of users(~50) still come from 2G connections in India
bull Use touchStart event instead of click(~300ms delay)
bull AB tested heavily to find right mix of content
67
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
TO SUSTAIN
Performance is a moving target
68
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye
on whats being checked in
69
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
THE FUTUREPrefetching
70
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
NATIVE APPS ARE CHEATING WITH PREFETCHING
71
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
NATIVE APP 85MB WEB VIEW 0 BYTES
72
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
Food for thought
bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers
[W3C proposal] bull Prefetching on hovertouchStart http
instantclickio
73
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
THANK YOU
connecttwitter _aakash
mail aakashflipkartcom
74
Recommended