O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions

Mobile Performance Trends and Predictions
Joshua Bixby

Agenda

Market
Why is faster better?
Measuring performance
Visualizing performance
How does data work on a mobile network?
Best practices in action
Evolution
Strangeloop study: State of Mobile Ecommerce
Performance

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2

Growth of Smartphone Sales
(as % of total mobile phone sales)


Traffic from Mobile Devices (2011)


Customer Profile

Top 200 Internet retailer, US based
Target geography: US and Europe
$3B in revenue
30,000 employees


Page Views by Mobile Device


Experiment

Induce delay on HTML
200msec, 500msec, 1000msec
Apply to small percentage of traffic
12 weeks
Monitor impact on key business metrics


Results


Impact on Bounce Rate


Impact on Returning Visitors


More Details

http://www.webperformancetoday.com/
2011/11/23/case-study-slow-page-load-mobile-
business-metrics/
http://velocityconf.com/velocityeu/public/
schedule/detail/21632


Performance Measurement

Measuring Page Speed on Mobile Devices


Measurement

Mobile measurement is still a challenge
• There are some tools out there
• Still pretty manual
• Less about performance and more about functionality
• Lots of simulation

More complicated because of the number of
different platforms and devices that we may need
to cover
Things are getting better


Chrome Remote Debugging (ICS)

A USB connection lets us see activity of mobile
Chrome on desktop Chrome
https://developers.google.com/chrome/mobile/
docs/debugging


iWebInspector

Web Inspector, but for iOS Simulator
http://www.iwebinspector.com/


Weinre (Web Inspector Remote)

Remote debugging from the desktop for what the
phone is doing
http://people.apache.org/~pmuellr/weinre/
docs/latest/Home.html


Aardwolf

Remote JavaScript debugging (all platforms)
http://lexandera.com/aardwolf/


Mobile Perf Bookmarklet

More focus on performance
http://stevesouders.com/mobileperf/
mobileperfbkm.php
Super bookmarklet with lots of
tools built in


PCAP2HAR

Turn packet captures to waterfalls
http://pcapperf.appspot.com/


Real User Monitoring (RUM)

RUM tools are increasing in availability
• Google Analytics
• New companies and solutions emerging
RUM tools are increasing in availability
• Google Analytics
• New companies and solutions emerging
Measurement on actual devices, for real users
Need lots of data to draw conclusions
• And must have a way to deal with outliers
Navigation Timing (only in Chrome for Android right
now)


WebPagetest


WebPagetest’s Mobile Agent

Based on the recently open-sourced Mobitest
agent
Interacts with the server just like a standard
desktop agent
Available for Android and iOS
• Still in the early stages, but key metrics are reported
• Some features (like scripting) don’t work
• Cold cache tests and videos are working fine
• For iOS, it uses UIWebView rather than Safari
Even with the limitations, still the best tool for
getting a feel for mobile performance


Visualizing Performance


How does data work on a mobile network?


Stepwise Acceleration
Accelerating a Real Site


Methodology


Setup

All testing done on 3G from Vancouver
• Nexus S with WPT agent
• Rogers Network

Traffic flows through Strangeloop service
• We apply optimizations in the path
• Used host file entries since DNS overwrite isn’t
available on the agent

The phone does everything else


Setup


A Few Points of Clarification

We’re only choosing oreilly.com for fun
We’re using it only to show what some
performance problems are – this doesn’t mean
the site has these problems
The real site is somewhere in the middle of this
blue bar


Summary of Key Metrics


Performance Problems

Too many connections
Too many bytes
No CDN
Too many round trips
Poor caching (more on this later)
3rd party calls (marketing tags, analytics, etc)
Similar to desktop, but impact is different on
mobile devices


What Does It Look Like?

http://www.youtube.com/watch?v=jo4zxzv3USg
Text


Key Metrics – Original Site


Let’s Fix it!


What Are We Going To Do?

Stepwise acceleration
• We’ll accelerate the page in multiple steps
• We’ll add techniques at each step and evaluate the
performance impact

We’ll start with the easy stuff and get more
advanced with each step
Try to make the page as fast as possible


Step 1: Low Hanging Fruit


Step 1: Optimizations

Add keep-alive connections
• Address the problem with too many connections
• Lessen the impact of TCP connection setup

Add HTTP compression
• One way to reduce bytes, and an easy one
• We’ll compress the text-based content (HTML, CSS,
JS, etc)


Keep-alive Connections


HTTP Compression


Step 1: What Should We Expect

Fewer total connections
Fewer bytes
Impact to performance metrics
• Fewer bytes to onload
• No change to roundtrips
• Better document complete time
• Better start render


Before and After


What We Helped

Connection Count
• 83 connection  30 connection

Key metrics


Step 1: Improvements



http://www.youtube.com/watch?v=qMGAOqQQqvw


Pros and Cons

Pros
• Really easy to do
• Usually a single configuration option on servers,
proxies, or load balancers
• Great bang for the buck

Cons
• It’s still slow!
• These are, by themselves, just not enough


Step 2: CDN


CDN


CDN

Static resources are served from locations near
the requesting client (mobile or otherwise)
Shorter distance between client and content
means smaller TTFB


What Should We Expect

Faster average time to first byte for the objects
on the page
• No change to round trips
• No change to byte count
• Better start render time


Before and After


Impact on TTFB


What We Helped



http://www.youtube.com/watch?v=aiViEjuVb_g


Pros and Cons

Pros
• CDNs are always a good way to reduce TTFB
• Physics!
• Well-established industry; lots and lots of vendors

Cons
• Can sometimes be costly
• Why wasn’t it faster?


CDN and speed


Step 3: Mobile Front End Optimization


Mobile FEO

Consolidation of resources
• Images
• CSS
• JavaScript

Image Compression
Minification
• JavaScript
• CSS

Optimal use of localStorage (more on this later)


Mobile FEO



Fewer round trips will mean the TTFB problem
should get a lot better
Fewer bytes will mean better performance
• Images (from image compression)
• CSS/JS (from minification)

Impact on performance metrics
• Reduction in round trips
• Reduction in byte count (on top of HTTP
Compression)


Before and After


What We Helped



http://www.youtube.com/watch?v=J_gU2Z_b-6I


Pros and Cons

Pros
• Noticeable and significant benefit over easier
techniques
• The mobile form factor lets us be more aggressive
with some of the techniques
• Smart use of localStorage

Cons
• It’s not easy!
• Techniques must survive site changes (regression)


Step 4: More Mobile FEO


More Mobile FEO

Deferral
• Analytics
• Marketing tags
• Ads
• Etc.


3rd Party Calls



Deferral of round trips to after onload
• Fewer round trips to onload
• Fewer bytes to onload


Before and After


What We Helped



http://www.youtube.com/watch?v=e0oFr0pSRn8


Pros and Cons

Pros
• Gives you the control that your marketing team may
have given away!
• Solves a very difficult problem, resulting in
improvements to all key metrics
• Much better visual experience

Cons
• Again, not easy!
• Must understand what the purpose of each 3rd party
call is


Quick Summary of Stepwise Acceleration


Overall Improvements


Mobile Caching


Stating the Obvious

Caching is good!!!


First View of a Page


Repeat View with Terrible Caching


Repeat View with Validations Only


Repeat View with Good Caching


Mobile Caching

The primary issues with mobile caching
• Where to put the objects
• The size of the cache
Some good reading
• Device Cache Sizes
- Wink toolkit study: http://www.winktoolkit.org/blog/204/
- YUI study: http://www.yuiblog.com/blog/2010/06/28/mobile-
browser-cache-limits/
- Blaze study: http://www.guypo.com/mobile/understanding-mobile-
cache-sizes/
• Individual Files
- Steve Souders: http://www.stevesouders.com/blog/2010/07/12/
mobile-cache-file-sizes/
- More from YUI: http://www.yuiblog.com/blog/2010/07/12/mobile-
browser-cache-limits-revisited/


Mobile Cache Sizes

Cache sizes are much smaller than desktop
• Android (2.x) about 5-7MB
• iOS is larger (>50MB)
We need to think about:
• Total cache size limit
• Individual object size limit
• HTML pages

User behavior may affect what’s served from
cache
Things are getting better, but not at the pace we
want


Some More Findings

Android
• Firefox and Opera (Gingerbread): ~10MB
• Stock browser in ICS: 25MB
• Chrome on ICS: much larger and based on amount of
space available
• http://gent.ilcore.com/2012/02/chrome-fast-for-android.html

Android and iOS
• When there’s room available, saw aggressive caching
behavior


Comparison to Desktop

IE
• http://blogs.msdn.com/b/ie/archive/2011/03/17/
internet-explorer-9-network-performance-
improvements.aspx
• Defaults
• IE 6/7/8 1/32 of disk, cap of 50MB
• IE9  1/256 of disk (bigger disks), cap of 250MB

Chrome
– Spot checked: >300MB
Firefox
– Spot checked: >700MB
From Steve: http://stevesouders.com/cache.php


HTML5 localStorage

W3C’s Web Storage Spec:
– http://dev.w3.org/html5/webstorage/
Per domain storage
• Key/value pairs
• ~2.5MB
• Test it: http://dev-test.nemikor.com/web-storage/
support-test/
Programmable
• It can be used for whatever you want
• This includes acting as a programmable object cache!


Evolution


Evolution: Mobile Networks


The Phone matters


Browsers: Slow and Steady Growth


Responsive Images


Make Full Site Available


Full Site Matters


Enhance with Javascript


State of Mobile Ecommerce Performance
How fast do leading m-commerce sites load for real users
on 3G?


Report: Key Areas of Exploration

• Speed
– How fast are web pages on a 3G connection?

• Devices
– What is faster: Android or iPhone?
– What is faster: iPad or Android tablet?

• Usability
– Do companies have mobile-specific sites?
– Who do they serve them to?
– Do they let people view the full site from a mobile
site?

© 2012 Strangeloop Networks
2011 Strangeloop. Faster Websites. Automatically.
Strangeloop. Faster Websites. Automatically. 116

© 2012 Strangeloop Networks
2011 Strangeloop. Faster Websites. Automatically.
Strangeloop. Faster Websites. Automatically. 117

O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions

Recommended

Recommended

More Related Content

Similar to O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions

Similar to O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions (20)

More from Strangeloop

More from Strangeloop (7)

Recently uploaded

Recently uploaded (20)

O'Reilly webcast: Joshua Bixby on Mobile Performance Trends and Predictions

Editor's Notes