BD Conf: Visit speed - Page speed is only the beginning

Page Speed is Only the BeginningVISIT-SPEED

1

WHO AM I?

WHO CARES IF VISITS ARE SLOW?

WHY ARE VISITS SLOW?

PRE-FETCHING: Making Visit Faster

In this presentation:

RESULTS & DISCUSSION

2

WHO AM I?





3

Peter McLachlanchief architect & co-founder of Mobify

4

HUGE IMAGE WHERE I INTRODUCE

MYSELF

5

WHAT IS VISIT-SPEED?

7

• More than just a single metric.

• How your visitors interact with your website.

• We’re talking about all the waiting time that exists:

1. within pages, while visitors wait for interactive elements to finish loading.

2. between pages, such as when visitors traverse a checkout flow.

VISIT-SPEED IS...

8

THERE’S A LOT MORE TO USER ENGAGEMENT THAN PAGE SPEED!

User engagement is about the experience.

• experience crosses the page boundary!

We need a heck of a lot more UX research on this subject.

• but you’re not here for a UX talk!

For now, an appeal to intuition: doesn’t it seems intuitive that

people care about the speed of the entire experience?

• first load is just one step along the way.

• rough guess: I’d say it’s 1/3rd of the puzzle or less.

9

WHO AM I?





10

You do. You just don’t know how much yet.

11

If your users spend 8s waiting for a page to

load instead of 2, here is the impact:

1,992 hours/yr

19,920 hours/yr

199,200 hours/yr

How many pageviews do you get in a month?

100,000?

1,000,000?

10,000,000?

... or about a quarter of a human lifetime

12

73% of mobile internet users say they’ve encountered a website that was too slow to load.

Loading...

13


Data source: kissmetrics.com

Loading...

13



Loading...

27% of internet users are

LIARS

13

A 1 second delay in page response can result in a 7% reduction in conversions.If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.

14

A 1 second delay in page response can result in a 7% reduction in conversions.If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.


14

15%

16%

16%

20%

30%

3%

16-20 seconds

1-5 seconds

11-15 seconds

20+ seconds

6-10 seconds

> One second


PATIENCE OFMOBILE WEBUSER

15

WHO AM I?





16

Two words for you: Ilya Grigorik (https://twitter.com/igrigorik)

• http://www.igvita.com/2013/01/15/faster-websites-crash-course-

on-web-performance/

But let me briefly recap:

1. Too many HTTP requests

2. High request latency

3. Too many bytes

4. Poor resource cache settings

5. Laggy interactions

LETS START WITH THIS: WHAT MAKES PAGES SLOW? (especially on mobile)

17

https://twitter.com/igrigorik

https://twitter.com/igrigorik

http://www.igvita.com/2013/01/15/faster-websites-crash-course-on-web-performance/




0Mbps

20Mbps

40Mbps

60Mbps

80Mbps

3Mbps

21Mbps

42Mbps

75Mbps

3G HSPA+ HSPA+ LTE

What’s interesting about this

18

0Mbps

20Mbps

40Mbps

60Mbps

80Mbps

3Mbps

21Mbps

42Mbps

75Mbps

3G HSPA+ HSPA+ LTE

What’s interesting about this

ABSOLUTELYNOTHING

19

AND HERE’S WHY ...

Source: Ilya Grigorik

0

1000

2000

3000

4000

1mbps 3mbps 5mbps 7mbps 9mbps0

1000

2000

3000

4000

240ms 200ms 160ms 120ms 80ms 40ms 0

Page load time (ms) aslatency (RTT) decreases

Page load time (ms) asbandwidth increases

20

Why do we care a lot about latency on mobile?

21

Mobile phone radio behaviour

22

WHO AM I?





23

Pre-fetch verb \preeˈfech\

To fetch web related resources before they are required, the activity of which is to be accomplished while the web browser is not otherwise occupied, outside of the critical rendering path of the page.

24

•When other performance optimizations have already been applied

•When your site has a flow

•When you use different resources on different pages of your site

• Of course this implies that you DON’T bundle all your JS into a single

file and deliver it in one go to the visitor

WHEN TO PRE-FETCH

25

Here’s what we need to think about

How should I implement

pre-fetching?

What should I pre-fetch?

PRE-FETCHING?

Do’s, Don’ts andTest results

26

WHAT SHOULDI PRE-FETCH?

27

PRE-FETCHINGWhat should we pre-fetch?There are a number of assets available to choose from: HTML, Images, CSS & JavaScript

HTML, ImagesMost large sites have thousands or tens of thousands of pages & images. Hard problem to solve, bad worst case scenario behavior

DNS, JavaScript & CSSThis makes a lot of sense. Most sites have just a few CSS files and less than 100 externally referenced JavaScript

28

HTML & IMAGES

• HTML

• would be great to pre-fetch - but many sites have uncacheable content

embedded in page HTML or poor caching rules

• complexity of overcoming CMS / eComm platform defaults prohibitive

• Images

• Most sites have lots of them

• Images are 65% of bytes on the average web page

• Seems like a great target, but which ones should you send to the visitor?

• Machine learning may help us here

• But you better have great data on your site usage

• Maybe there’s lower hanging fruit...

29

DNS

• DNS is great to pre-fetch

• There’s usually less than 50 DNS entries to resolve for an

entire website

• The OS will cache these entries

• All DNS entries are cacheable, at least a little bit• Not many sites with < 1 minute DNS cache times, most are

considerably longer

• There’s even a nice easy bit of markup we an use to do it:• <link rel="dns-prefetch" href=”...”>

30

CSS & JAVASCRIPT• CSS is blocking

• Definitely great to pre-fetch it!

• But a lot of sites use a single CSS file anyway

• So just make sure you have good caching rules on this

• If you do have multiple CSS files for different parts of your flow: definitely pre-fetch them

• JavaScript: often this is also blocking• I think JavaScript is the “holy grail” of pre-fetching

• With JS pre-fetch we have the possibility of significantly unblocking

parts of a visit flow

• You shouldn’t have too many JS files in your site (right?)

31

The winners: DNS, CSS & JAVASCRIPT

• OK, now how to select which items to pre-fetch?

• For DNS and CSS you can probably just “get all the things”

• DNS resolution is cheap with good caching behavior

• CSS should be relatively small

• JavaScript: you need a short list of items most likely to be useful during normal visit flows

32

mobify.com @mobify [email protected]

Pre-fetching

33

HOW SHOULDI IMPLEMENT

PRE-FETCHING?

34

HOW SHOULD I IMPLEMENT PRE-FETCHING?

Fully integrated into webapp•You can fully integrate pre-fetching into your platform / app

•An introspection service can analyze log data, URL visits

•Inject pre-fetching directives directly into the HTML

35

Pros

•You can introspect your environment

•Data sources: filesystem, web server

log files, content database, platform

(CMS, ecomm etc) APIs

•Lots of CPU power at your disposal


Fully integrated into webapp

Cons

• If you have a complex environment

with a CDN, multiple caching layers,

databases, web platforms, this is a

serious undertaking.

•Requires integration directly into your

platform, typically this means risk and

cost.

36

Client side generic ( With servier-side service)


• What if I want to create a completely generic service

• It has no knowledge of my specific app or platform

• But it can still make good recommendations

• In this model clients:

• collect information about resources they see and report back

• inject requests for resources during periods of low activity

37

Client side generic (With server-side service)


• What if I want to create a completely generic service

• It has no knowledge of my specific app or platform

• But it can still make good recommendations

• In this model clients:

• collect information about resources they see and report back

• inject requests for resources during periods of low activity

38

Client side generic ( With servier-side service)


Pros

• You get accurate information on

what resources visitors are

actually using

• Server-side service is

independent of all the rest of

your architecture, plays nicely

with SoA

• If it breaks, your site still works

Cons

• We’ll get to this!

39

DO’S, DON’TS AND TEST RESULTS

40

PRE-FETCHING: THE DETAILS

• Caching:• Divining cache content

• Aging out pre-fetched items

• edge cases

• Recommendation engine• Considerations

• Mystery time!

• What I’m working on

41

CACHING: DIVINING CACHE CONTENTS

Unfortunately we cannot inspect the browser’s cache

• (yes, there are ways to make guesses)

But we can just use localStorage directly, especially for JavaScript and CSS that have relatively few bytes.

42

CACHING: DIVINING CACHE CONTENTS

Unfortunately we cannot inspect the browser’s cache

• (yes, there are ways to make guesses)

But we can just use localStorage directly, especially for JavaScript and CSS that have relatively few bytes.

... uh-oh ....

How fast is localStorage? Doesn’t it:

• block the rendering thread?

• have unbounded worst case performance?

42

Yes, and you should use it anyway.

Details at: http://www.mobify.com/blog/smartphone-localstorage-outperforms-browser-cache/

43

http://www.mobify.com/blog/smartphone-localstorage-outperforms-browser-cache/

http://www.mobify.com/blog/smartphone-localstorage-outperforms-browser-cache/

CACHING & AGING

• You will need a mechanism to manage cache

eviction

• LRU looks to be a good simple algorithm to

implement here

• Perhaps augmented to provide preferential

treatment for smaller objects

44

CACHING: EDGE CASES

• Whoops. You just did a full site refresh...

• Dynamically generated resources:

• susan.js, bill.js, steve.js, candace.js ...

45

RECOMMENDATION ENGINE• Could use a very simple algorithm:

• Collect all the things

• Return truncated list based on frequency seen

• How big a list?

• “empirically derived” = “make wild assed guess”

• ... and test.

• Site wide / global

• More sophisticated modifications:

• ML algorithm such as K-nearest neighbor

• Weight by inverse resource size

• Resources must decay

• simplest solution is probably correct

46

MYSTERY TIME!Who can tell me what else we should worry about with

pre-fetching?

47

SO, WHAT ARE YOU WORKING ON?

• Service will provide:

• a data collection endpoint for resources to generate recommendations

• a recommendation engine for resources

• As visitors browse your site, refines preferences for which resources to pre-load

• The pre-fetch library provides client-side support for

• collecting information about the page

• recommendation engine

• auto optimizing JSONP resource retrieval service

• auto-caching system using localStorage with correct cache eviction behavior

Pre-fetching recommendation as a service

48

WHERE AM I AT?

• Beginning “clinical trials”

• Recommendation engine still under consideration

• Testing hand-curated recommendations in field trials on production sites

49

WHO AM I?





50

ETHICAL CONSIDERATIONS

54

• Network bandwidth, CPU & battery are all resources with scarcity on

mobile

• So don't use them recklessly

• That's a good reason to focus on JS & CSS

• if your site has megs and megs of JS and CSS...

• what the heck are you doing!? Stop!

• limit your pre-fetching to one or two steps ahead

• Remember that using the radio when it's warm and then letting it sleep is

going to be better for battery than waking it up repeatedly

PRE-FETCHING CONSUMES RESOURCES

55

• Prefetching for HTML, images

• Much harder problems

• But solving them will have significant payoffs

WHAT’S NEXT?

56

@mobify | mobify.com | [email protected]

@b1tr0t [email protected]

57

http://mobify.com

http://mobify.com

mailto:[email protected]






Image credit: XKCD - “relativistic baseball”

No problem, we’ll make the speed of light faster

58

BD Conf: Visit speed - Page speed is only the beginning

Technology

Transcript of BD Conf: Visit speed - Page speed is only the beginning