2 seconds are the page load speed limits for an acceptable user experience. This presentation shows measurement results for mobile web sites, content delivery network and the impact of the wireless network. Conclusion is: work is required to speed things up. Architecture considerations for fast web apps and pages using LAMP (Linux, Apache, mySQL and PHP) are presented. Design rules for mobile web pages get described. And how to build pages that render great on many mobile devices and PC's. Plus tools get presented that help developers to optimize their apps and web pages. Lastly the impact of the cloud gets discussed. On average 8 different hosts are involved in the presentation of a singe page. As a consequence the challenge of load speed gets bigger, not less.

1. 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

2. 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.

3. 2 seconds page load is the limit for acceptable user experience How long a user will wait for a pageto load before navigating away Time/sec Year Source: http://www.webperformancetoday.com/2010/07/01/the-best-graphs-of-velocity/ Source: http://www.techpresentations.org/Performance_Related_Changes_and_their_User_Impact Source: Akamai

4. Page load Speed through wired connections

5. Metrics applied to the speed of various mobile web pages connected through fixed internet Rating Source: http://www.blaze.io/mobile/

6. Metrics applied to cloud service providers, Monday morning view connection cable modem (Comcast)

7. Metrics applied to content delivery networks. 7 day view. Cable modem connection through Comcast Note: Outliersare removed…

8. Delay of a mobile wireless HSPA connection (HTC Hero) on AT&T Wirelessmeasured in New Jersey, USA, in AT&T home Country at 11pm ET. Compared to wired connection through Comcast Cable Modem

9. Baseline: Ping to www.google.com through Cable

10. Ping to www.google.com through wireless

11. Baseline: Ping to www.twitter.com through cable

12. Ping to www.twitter.com through wireless 1.5 seconds peak delay

13. Ping to Amazon S3 docs through wireless Beyond 1 second peak delay

14. Ping east coast home to west coast home through wireless. 4 Seconds peak delay

15. Ping east coast to west coast home long term view through wireless 4 Seconds peak delay

16. East coast home to Japan on cable. Going global can add further 300ms

17. 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

18. 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.

20. 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. Dual Tree Architecture for High Availability Masters Slaves Sideline Caching Source: Scalable Web Architectures by Cal Henderson

21. 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

22. 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

23. 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

24. Example: Building Applications using Phone Gap and WURFL WURFL = Wireless Universal Resource File"ambitious" configuration file that contains info about all known Wireless devices on earth. Phone GAPJavaScript Open Source apps Development environment across plattforms Source: Native vs Web vs Hybrid by Jason Grigsby Source: http://wurfl.sourceforge.net/backgroundinfo.php by Luca Passani

25. Speed? Lots of data get downloaded to a mobile device, and are not rendered Source: Rethinking the mobile web by Yiibu

26. How to speed up.. Don’t forget they pipeline. And use multipledomains forparallel requests. No more then 1 external CSS and 1 JS. Use CSS spritesif supported.CSS not table layouts. Zero or one Cookie as up- Loaded with Each request. DNS lookupis blocking.2-4 domainsbest due toconcurrent Download. Encourage Caching and test it works. Can give up to 75% compression. Source: Going Fast on Mobile Web by Yibuu Source: Native vs Web vs Hybrid by Jason Grigsby

27. And test the result with Yslow or Safari Web inspector Source: Going Fast on Mobile Web by Yibuu

28. 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 ImadMouline and Brian Green

29. And more work is required to deliver a great user experience Performance Differences Across Browsers and Devices Source: Gomez Real-User Monitoring Real users around the world Broadband connections only 466 million page measurements 200+ sites Source: Performance testing – put cloud customers back in the driver seat by ImadMouline and Brian Green

30. 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.