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

vonreventlow@yahoo.com+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 www.twitter.com through wireless

1.5 seconds peak delay

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.