Mobile Web Performance Optimization Tips and Tricks

Mobile Web Performance Optimization
Guy Podjarny, CTO

Agenda
Why Web Performance Matters
And why Mobile Web Performance Matters
Web Performance Optimization
How Mobile is different than Desktop
Mobile Optimization Techniques
Measuring Mobile Performance
Summary

Why Web Performance Matters
Site Speed Impacts Revenue
Increases conversions and reduces abandonment, across industries
Site Speed Impacts Google Page Rank
Assumed to affect other search engines as well
3
Shopzilla: 5s load time improvement
KISSMetrics: Page Abandonment vs. Load Time

Why Mobile Web Performance Matters
Mobile Browsing is Exploding
Expected to pass desktop browsing by 2014
4
Mobile Users are Impatient
58% Except faster or equal speeds to desktop
Only 11% accept real delays

Front-End vs. Back-End Performance
Back-End Performance
Time to generate page
10% of page load time
Front-End Performance
Network Time
Browser Time
90% of page load time
5
Source: http://blog.newrelic.com

Front-End Optimization
FEO: Front-End Optimization
Addresses 90% of the problem
Keys to FEO:
Reduce Requests
Reduce Bytes
Do More in Parallel
6

FEO in Mobile vs. Desktop
Mobile Browsing has unique challenges
Different types of Mobile WPO techniques
Unique to mobile
More important on mobile
Tuned for mobile
Equally important on desktop and mobile
We’ll take a holistic approach instead
Describe the mobile challenges
Describe the solutions, using all of the above
7

Mobile front end optimization
8

Mobile Web Performance Traits
Challenges:
Slower & Asymmetric network
Different Connection Model
Weaker CPU
Smaller Caches
Form Factor vs. Platform Compatibility
Opportunities:
Smaller screen size
Broad HTML5 Support
Relatively new browsers (no IE6 equivalent…)
9

Slower & Asymetric Network
Download Speed 3x slower than DSL/Cable
Upload Speed 5x slower than Cable
Similar properties to DSL
Low Reliability
17% of connections fail to maintain reasonable speed
High initial connection cost
Average 2.5 seconds
Blaze study shows:Number of reqs is the top slowdown factor on mobile
Total number of bytes the top factor on desktop
10

Slow Network Solution: Reduce Reqs
Consolidate CSS & JS Files
Inline small CSS & JS
Download size impact is minor after gzip
Especially useful for light mobile sites
Embed CSS Images into CSS
Using data URIs (data:image/png;base64,…)
Data URIs supported by all major mobile browsers
Only load images as they scroll into view
Highest impact on smaller screens
11

Slow Network Solution: Reduce Bytes
Resize images to screen size
Desktop resolution: 85% are over 1024x768
Recent mobile resolution: 480x360(Torch), 800x480 (Nexus S), 960x640(iPhone 4),
Shouldn’t send the same image to both
Properly compress images
Enable lossless compression, drop metadata
Avoid excessive image quality, it doesn’t show
Enable gzip Compression
All mobile browsers that matter support gzip
12

Different Connection Model
Small Max # Connections
Android, Blackberry, Nokia
Less max conn on IE Mobile
HTTP Pipelining on Android
Only browser to do so?
Expensive Connections
Slower Hardware
Slower Network
13

Different Connection Model: Solutions
Reduce domain sharding
2-3 shards on iOS
No sharding on other devices
Reduce 304 responses
Wasteful requests, wasteful connections
Use versioning with far future expiration
Verify support for HTTP Pipelining
Most major web servers support it today
14

Weaker CPU = Slower JavaScript
Results of SunSpider JavaScript benchmark
Measured in duration, lower is better
Impacts evaluation of JavaScript too
Estimated at 1ms per KB
Seems to slow down image rendering as well
Seen in Blaze Study, still being verified
15

Weaker CPU Solutions
Make JavaScript Async to Page Load
Download, eval and exec block page load
Async JS avoids delays to rest of page
Remove unused code
browser-specific code, full 3rd party libraries, Flash…
Defer evaluation of JS not needed for load
Fetch via XHR
Fetch via Iframe
Serve in HTML comment, eval on-demand
16

Smaller Caches
Persistent Cache Sizes
After Browser Process Restart
iOS Memory Cache varies (20-100 MB for iOS 4.3)
Average mobile page size is ~400KB
Mobile users browse for 74 mins/day on average
Desktop users visit 88 sites/day, mobile likely similar
Your page not likely to be in the cache tomorrow
17

More Mobile Cache Problems
Older phones strongly limit individual file size
iOS 3.2 only caches pages under 25KB unzipped
Cache eviction policy not simple
Not a simple Least-Recently-Used
Seem to prefer far-future expiry dates
Android cacheability depends on device
Above and beyond the version
Cache eviction policy may change as well
18

Smaller Cache Solution: localStorage
Use HTML5 persistent storage for caching
Called localStorage
Available on all major mobile platforms
Doesn’t expire
Survives browser reset and power cycle
Size limit is usually ~5MB
Most useful for caching JavaScript & CSS files
Using for images will quickly consume the 5MB
Implementation Tips
Ensure proper version control and clear old items
Handle case of not enough space
Ideally create a Least-Recently-Used Cache
In addition, use far-future expiry dates
19

Optimizing for Form Factor vs OS
Mobile OSes impose technical limitations
Notably having no or poor Flash support
Simplifying site to match smaller screen helps
Mobile sites are usually simpler and faster
Tablets carry the same limitations
But take away the “mobile site” solution
Result: Tablets force us to truly improve perf
But a mobile site for phones can still help usability
20

Form Factor vs OS: Solutions
Don’t just minimize content – fix performance
Mobile websites are for usability, not perf
Create an adaptive website
E.g. Determine image size by client width
Download code on-demand
E.g. Don’t download desktop JS in mobile site
Progressive Design helps address usability
We focus on performance…
21

Measuring mobile web perf
22

Mobitest
Mobile Web Performance Measurement
Free Online Service: http://blaze.io/mobile/
23

Different Locations
3 Locations
Ottawa
Amsterdam
Dulles
Sponsored Non-Ottawa Locations
Aaron Peters
Patrick Meenan(WebPageTest)
Interested in hosting a location?
24

Different Devices
25

Measures Page Load
Measures Load Time & Page Size
Supports Video Visualization
Calculates Load Time Percentiles
Based on past results, per device
26

Details Results Per Run
Supports Multiple Runs
WPT Waterfalls
Detailed HAR Viewer
27

Mobile FEO – Summary
Reduce Requests
Consolidate CSS & JS
Embed CSS images in CSS
Inline small CSS & JS files
Load images only when visible
Reduce Bytes
Resize images to screen size
Properly compress images
Enable gzip Compression
Minimize Connections
Manage domain sharding by client
Reduce 304 responses
Verify support for HTTP Pipelining
Defer and minimize JavaScript
Download and Execute JavaScript asynchronously
Remove unused code
Defer evaluation of JS not required during page load
Cache using localStorage
Primarily for CSS & JS Files
Use far-future expiry dates
Measure your changeshttp://blaze.io/mobile/
28

Blaze Automated Front-End Optimization
Blaze automates Front-End Optimization
No Software, Hardware or Code Changes needed
All the pitfalls and complexities taken care of
Blaze optimizes Mobile & Desktop Websites
Applying the right optimizations for each client
Contact us for a free reporton how much faster yourmobile site can be at contact@blaze.io
29

30
Questions?
Contact us at
contact@blaze.io
Thank You!

External Sources
31
http://www.mobile-broadband-reviews.com/us-cellular-3g-speed.html
http://www.google.com/events/io/2011/sessions/use-page-speed-to-optimize-your-web-site-for-mobile.html
http://www.pcworld.com/zoom?id=167391&page=1&zoomIdx=1
http://www.blaze.io/mobile/13-of-top-websites-return-mobile-content-to-android-tablet/
http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/
http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/
http://blog.flurry.com/bid/63907/Mobile-Apps-Put-the-Web-in-Their-Rear-view-Mirror
http://blog.newrelic.com/wp-content/uploads/infog_061611.png
http://blog.kissmetrics.com/loading-time/

http://econsultancy.com	3166
http://feeds.feedburner.com	297
http://www.blaze.io	166
http://plutecki.net	41
http://marketing-digital.wsimarketingeninternet.com	35
https://pramati.qontext.com	26
http://apps.synaptive.net	18
http://g.dev.gree.jp	13
http://translate.googleusercontent.com	10
http://www.hanrss.com	5
http://core.traackr.com	4
http://www.encarolina.com	3
http://www.newsblur.com	2
http://ebulletin.collected.info	2
http://www.diffbot.com&_=1356882943067 HTTP	1
http://www.diffbot.com&_=1356882926160 HTTP	1
http://www.diffbot.com&_=1356882912428 HTTP	1
http://131.253.14.250	1
http://electrosmart.com	1
http://us-w1.rockmelt.com	1
http://www.portalos.pl	1

Mobile Web Performance Optimization Tips and Tricks

by Blaze Software Inc.

Accessibility

Categories

Upload Details

Usage Rights

21 Embeds 3,795

Statistics

Mobile Web Performance Optimization Tips and Tricks Presentation Transcript