Post on 27-Nov-2014
description
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?
WHO CARES IF VISITS ARE SLOW?
WHY ARE VISITS SLOW?
PRE-FETCHING: Making Visit Faster
RESULTS & DISCUSSION
3
Peter McLachlanchief architect & co-founder of Mobify
4
HUGE IMAGE WHERE I INTRODUCE
MYSELF
5
6
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?
WHO CARES IF VISITS ARE SLOW?
WHY ARE VISITS SLOW?
PRE-FETCHING: Making Visit Faster
RESULTS & DISCUSSION
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
73% of mobile internet users say they’ve encountered a website that was too slow to load.
Data source: kissmetrics.com
Loading...
13
73% of mobile internet users say they’ve encountered a website that was too slow to load.
Data source: kissmetrics.com
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.
Data source: kissmetrics.com
14
15%
16%
16%
20%
30%
3%
16-20 seconds
1-5 seconds
11-15 seconds
20+ seconds
6-10 seconds
> One second
Data source: kissmetrics.com
PATIENCE OFMOBILE WEBUSER
15
WHO AM I?
WHO CARES IF VISITS ARE SLOW?
WHY ARE VISITS SLOW?
PRE-FETCHING: Making Visit Faster
RESULTS & DISCUSSION
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
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?
WHO CARES IF VISITS ARE SLOW?
WHY ARE VISITS SLOW?
PRE-FETCHING: Making Visit Faster
RESULTS & DISCUSSION
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 hello@mobify.com
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
HOW SHOULD I IMPLEMENT PRE-FETCHING?
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)
HOW SHOULD I IMPLEMENT PRE-FETCHING?
• 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)
HOW SHOULD I IMPLEMENT PRE-FETCHING?
• 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)
HOW SHOULD I IMPLEMENT PRE-FETCHING?
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
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
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?
WHO CARES IF VISITS ARE SLOW?
WHY ARE VISITS SLOW?
PRE-FETCHING: Making Visit Faster
RESULTS & DISCUSSION
50
51
52
53
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 | hello@mobify.com
@b1tr0t peter@mobify.com
57
Image credit: XKCD - “relativistic baseball”
No problem, we’ll make the speed of light faster
58