User Experience of cloud based mobile systems (V2)
Christian von Reventlow(VP for new Products at Avaya)
Note this presentation represents my observations and opinions – and not the views of my employer Avaya
[email protected]+1 201 259 5973
User Experience of cloud based mobile systems – key questions.
• Many of the readers of my blog asked - could i please compile the relevant research with references? And answer the questions:– What are the speed, latency or page load time limits required for a good user experience in
cloud based system?– What is the actual performance achieved today?– What are the architecture choices for a scalable infrastructure?– How to cope with this tremendous variety of mobile devices with all the different screen
sizes?– How to speed up web based mobile applications?– And what is the impact of the cloud delivery model – meaning many hosts involved in a
single transaction?
– And … so what does this mean for cloud based mobile applications and the mobile web going forward.
Here you go. Note the following slides present my opinions. They are not the view of my employer Avaya.
2 seconds page load is the limit for acceptable user experience
Server Delay Revenue/User
Increase of time to next click
200 ms No loss 500 ms
500 ms -1.2% 1200 ms
1000 ms -2.8% 1900 ms
2000 ms -4.3% 3100 ms
2000 2005 200902468
10Time/sec
Year
How long a user will wait for a pageto load before navigating away
Source: http://www.techpresentations.org/Performance_Related_Changes_and_their_User_ImpactSource: http://www.webperformancetoday.com/2010/07/01/the-best-graphs-of-velocity/
Source: Akamai
PAGE LOAD SPEED THROUGH WIRED CONNECTIONS
Metrics applied to the speed of various mobile web pages connected through fixed internet
Source: http://www.blaze.io/mobile/
Rating
Metrics applied to cloud service providers, Monday morning view connection cable modem (Comcast)
Metrics applied to content delivery networks. 7 day view. Cable modem connection through Comcast
Note: Outliersare removed…
DELAY OF A MOBILE WIRELESS HSPA CONNECTION (HTC HERO) ON AT&T WIRELESS
MEASURED IN NEW JERSEY, USA, IN AT&T HOME COUNTRY AT 11PM ET.
COMPARED TO WIRED CONNECTION THROUGH COMCAST CABLE MODEM
Baseline: Ping to www.google.com through Cable
Ping to www.google.com through wireless
Baseline: Ping to www.twitter.com through cable
Ping to Amazon S3 docs through wireless
Beyond 1 second peak delay
Ping east coast home to west coast home through wireless.
4 Seconds peak delay
Ping east coast to west coast home long term view through wireless
4 Seconds peak delay
East coast home to Japan on cable. Going global can add further 300ms
Summary of Measurements. User Experience of cloud based mobile systems.• Very few web pages have load times below the 2 seconds limit for a good
user experience.• Cloud service providers deliver response times in the 3 - 4 seconds range
through wired connections.• Content from content delivery networks leads to load times in the 8 seconds
range through wired connections.• Wireless HSPA adds between 100 and 400ms in delay, however with
occasional peak delays in the 1 to 4 seconds range.
• Revenue losses beyond 5% and landing rate conversion loss beyond 30% seem to be the norm and not the exception.
• Wireless HSPA adds to the issue.
=> Load times and latency continue to be a key issue
Speed up load times of mobile web:Choose the right architecture
• Typical architecture LAMP (Linux, Apache, MySQL, PHP)
• Sessions: Avoid them. – Store userID and login status in a cookie. – Needing more: pull account row from DB cache.
• Scaling web apps, image conversion, audio and video conversion is easy – they scale horizontally.
• Scaling the Database and content is more tricky.
Load balancing for scalability. Asynchronous systems for peak periods
• Load balancing• Hardware in front – • followed by Software
– Wackamole with mod_backhand, – Pound, Perbal and Apache with
mod_proxy
• Queuing is – great to cope with peak demand.– Put a limit to it. Why: if a page is
down users will return. If its slow people are disappointed.
– Example Black Friday:• Macy’s load time of 21 seconds but
always up• JC Penny 7sec and site being down for 6
hours.
Source: http://www.webperformancetoday.com/2010/11/30/downtime-versus-slow-page-speed/.
Source: Scalable Web Architectures by Cal Henderson
Most tricky is database scalability• Carl Henderson’s advice: Avoid - go for a
bigger box with more Ram if possible• DB Replication
– Read/write ratio of web apps is 80/20.– Use MySQL Master Slave replication.– High availability Master-Master replication– Need more: Ring, MySQL Cluster
• Memcaching makes scaling cheaper. – Use sideline cache as Danga– Requires code - manual invalidating cache.
• And add more scale, data federation: – divide tables in sets that are never joint
and move to different clusters– Federate data by user, with a global lookup
cluster, where you look up users.– Shards: Partition horizontally. Rows of
database are held separately.
Source: Scalable Web Architectures by Cal Henderson
Dual Tree Architecture for High Availability
Masters
Slaves
Sideline Caching
Serving Files• Keeping many copies of data in
sync is hard. – Use caching reverse proxies.
Squid, Mod_proxy & mod_cache.– Invalidation: change URL of
modified resources. Old ones drop out of cache over time.
• Authentication options– Use perlbl to validate tokens
(preferred) or cookies. Perbl redirects file lookup
– Or: Auth as part of URL, then auth done on webapp server.
• Connect storage stateless with HTTP
Source: Scalable Web Architectures by Cal Henderson
Example: Flickr Architecture
• Load Balancing• Squid for file caching
front-ending NetApps.• App servers with
Memcaching• Two types of HA for the
DB– Master Master Shards– Dual tree central
database
Source: Scalable Web Architectures by Cal Henderson
How to cope with these many devices all having different screens..
• Mobile first: Start with a mobile only page.
• Begin with a default stylesheet• Progressively enhance using
Javascript and @media query• And @media query resolving in
“false” is the first media query..• Adapt content as images for each
device you want to support• Use CSS instead of Javascript for
animations.• Compress content. And avoid
sending data that will never rendered on the screen.
Source: Rethinking the mobile web by Yiibu
Example: Building Applications using Phone Gap and WURFL
Source: http://wurfl.sourceforge.net/backgroundinfo.php by Luca Passani
WURFL = Wireless Universal Resource File
"ambitious" configuration file that contains info about all known Wireless devices on earth.
Phone GAP
JavaScript Open Source apps Development environmentacross plattforms
Source: Native vs Web vs Hybrid by Jason Grigsby
Speed? Lots of data get downloaded to a mobile device, and are not rendered
Source: Rethinking the mobile web by Yiibu
How to speed up..
Source: Native vs Web vs Hybrid by Jason Grigsby
Don’t forget they pipeline.And use multipledomains forparallel requests.
Source: Going Fast on Mobile Web by Yibuu
Can give upto 75% compression.
No more then 1 external CSS and 1 JS.Use CSS spritesif supported.CSS not table layouts.
EncourageCaching andtest it works.
DNS lookupis blocking.2-4 domainsbest due toconcurrentDownload.
Zero or oneCookie as up-Loaded with Each request.
And test the result with Yslow or Safari Web inspector
Source: Going Fast on Mobile Web by Yibuu
With the cloud things get more complicated: On average 8 hosts are involved in any transaction
Source: Performance testing – put cloud customers back in the driver seat by Imad Mouline and Brian Green
Chrome 3
Chrome 4
Chrome 5
FireF
ox3
FireF
ox3.6 IE6 IE7 IE8
Opera 10
Safar
i4
Safar
i5
iPad Sa
fari
iPhone Safa
ri0
5
10
15
20
25
Load Time Perceived Render
Seco
nds
And more work is required to deliver a great user experience
Source: Gomez Real-User MonitoringReal users around the worldBroadband connections only
466 million page measurements200+ sites
Source: Performance testing – put cloud customers back in the driver seat by Imad Mouline and Brian Green
Performance Differences Across Browsers and Devices
Conclusions
• The quest for page load speed and low latency will continue.
• Many organizations will need to invest in optimizing their mobile web experience.
• All types of mobile applications – fat mobile applications, hybrid applications downloading data from the cloud and web based applications will continue to be around.
• Let’s see how HTML 5 with resident data will impact the game.