Meta Refresh 2014

ALL ABOUT PERCEIVED
PERFORMANCE
Aakash Bapna

UI Engineer, flipkart.com

!1

ANYTHING YOU ADD- BROWSERS HAVE TO
DOWNLOAD, COMPUTE &
RENDER

!5

ANYTHING YOU ADD- BROWSERS HAVE TO
DOWNLOAD, COMPUTE &
RENDER

!6

Basics Performance Rules

•
•
•
•
•

CSS on top, JS at bottom.

Use CDN.

Caching static resources.

Minify JS, CSS, gzip.

… Y! slow rules

!7

USERS STILL SAY YOUR SITE IS
SLOW
!8

WHAT PERCEIVED
PERFORMANCE?

!9

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

Skeleton screens- Homepage
(below fold)

!14

Progressively enhanced MotoG page

SLOW CONNECTION

FAST CONNECTION
!15

Other Techniques
1.
2.
3.

Show precise progress loader when it
takes time (gmail)

Optimistic actions. (Instagram)

Paint what they are seeing right now.

!16

Other Techniques
1.
2.
3.

Show precise progress loader when it
takes time (gmail)

Optimistic actions. (Instagram)

Paint what they are seeing right now.

!17

MEASURING PERCEIVED
PERFORMANCE
HARD!

!18

WEBPAGETEST
1.
2.
3.
4.
5.

Shows load times.

Shows waterfall of requests of how
page loaded.

CPU, network utilisation.

Filmstrips.

etc…

!20

“Why is it taking 715ms to download a 5kb
image?” - A developer after running WPT.

!22

Problem with WPT

•
•

!

Inconsistent results for load times on
every run.

Probably due to network conditions in
India.

!23

BIGGER QUESTION- HOW OFTEN ARE
USERS SEEING THE PAGE WEBPAGETEST
IS SEEING?

!24

window.onload
1.
2.
3.
4.

so Web 1.0.

Doesn’t tell you how page loaded.

Above the fold might complete very
early.

This is the bare minimum you should
record.

!26

NAVIGATION TIMING API
Client Time:
Very High.

NEED MOAR
DETAILS!

Server Time:
Very less for
big sites.

!28

WHAT IF YOU COULD EXPORT
REQUESTS WATERFALL FROM
REAL USERS?
and reconstruct picture.

!29

Resource Timing API.

•
•
•
•

window.performance.getEntries()

Supported: latest Chrome, IE10!

DNS/TCP connect times available
when cross origin headers are set.

under documented.

!30

NAVIGATION TIMING API +
RESOURCE TIMING API =
WINDOW.ONLOAD
complete end to end picture of network performance.

!31

WE EXPORTED DATA FROM BROWSERS,
RAN HADOOP JOBS TO PROCESS THIS.

!32

Requests Waterfall from RUM

!34

Identify critical requests

!35

Above the fold load time,
aim for getting this as
low as possible

!36

Findings (what was fast) :

•
•
•

CSS, JS are heavily cached over
requests, median under 100ms.

Cleaning up CSS/JS would hardly
move metrics.

Although CSS load times are less, its a
blocking resource and need to keep a
check on its size.

!37

Findings (what was slow) :

•
•
•
•

Google Analytics, Omniture tracking
calls were taking 500ms (median)

Redirects.

HTML document itself taking too long
to load.

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 don’t have control over these, start at post onload.

!41

All in all, data by Resource Timing APIs is a
gold mine. There is lots to discover from it.

!42

DEVELOPER: “THIS IMAGE IS HUGE, GIMME A SMALLER ONE”

!

DESIGNER: “OKAY, HOW SMALL?”

!

DEVELOPER: (CONFUSED, MAKES A RANDOM GUESS…)

!44

DON’T GUESS, USE DATA.

use data from Resource Timing APIs

!45

Example:

730px x 300px
50kb
380ms to load

!46

An example carousel on site.

!48

Wrong way

3 x 50kb images in parallel

!

Median load time of each: 832ms

!

BUT we are showing only one image, why load all three?

!49

Right way

Median load time: 380ms

Load via <img src=’’” >
as a critical resource

Load via javascript after
critical requests end.

!50

Same cached image from previous
page upscaled and used as
placeholder while big image loads.

Browse Page

Product Page
!53

THEMING

All developers hate it.

!54

Progressive festival theming
1.
2.
3.
4.
5.
6.

Theme is non-critical, should load after all
critical requests complete.

All functionality should work with base skin.

Limited to colours, background images.

No new DOM elements, use :before, :after.

Packed in single theme.css file.

Theme CSS file is loaded asyncly on DOM
ready.
!56

FIXING HTML SIZE

Important as affects discovery on critical requests.

!57

<html>

<head>

<!— css —>

</head>

<body>

<div class=“header”>

<!— search bar —>

<!— navigation menu and big fat submenus —>
…….

.……

</div>

<img src=“…” />
<img src=“…” />
…

</body>

!60

HTML caching

•
•
•
•

Over 40% of our markup is flyout
menu.

Persisted on clientside with
localStorage for 10 mins.

Drastically reduced payload which was
transferred for every request.

200ms improvement over median.

!61

IT ALL STARTS WITH A
SHORTCUT
if (some condition) redirect();

!63

DECIDE URL STRATEGY BETWEEN
MOBILE/DESKTOP EARLY ON.

!64

PREFER ONE URL BETWEEN
MOBILE/DESKTOP
www.flipkart.com - good

www.flipkart.com/m - bad

!65

Mobile perf. highlights

•
•
•

Much of users(~50%) still come from
2G connections in India.

Use touchStart event instead of
click(~300ms delay).

A/B tested heavily to find right mix of
content.

!67

TO SUSTAIN
Performance is a moving target.

!68

To sustain
1.
2.
3.

Have a performance team.

Measure key performance metrics.

Use webpagetest in CI to keep an eye
on what's being checked in.

!69

NATIVE APPS ARE CHEATING
WITH PREFETCHING

!71

NATIVE APP: 8.5MB

WEB VIEW: 0 BYTES

!72

Food for thought

•
•
•

Prefetching autosuggest, next pages…

Going offline with ServiceWorkers
[W3C proposal]

Prefetching on hover/touchStart http://
instantclick.io/

!73

THANK YOU!
connect:

twitter: @_aakash

mail: aakash@flipkart.com
!74

Meta Refresh 2014

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Meta Refresh 2014

Similar to Meta Refresh 2014 (20)

Recently uploaded

Recently uploaded (20)

Meta Refresh 2014

Editor's Notes