Measuring Mobile Web Performance v2
•Als PPTX, PDF herunterladen•
6 gefällt mir•3,550 views
Measuring Mobile Web Performance presentation at the London Ajax Mobile Conference 2nd July 2011. Covers the basics of web performance measurement and looks specifically at the measurement of page load speed from mobile devices.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ă„hnlich wie Measuring Mobile Web Performance v2
Ă„hnlich wie Measuring Mobile Web Performance v2 (20)
Mehr von Stephen Thair
Mehr von Stephen Thair (12)
KĂĽrzlich hochgeladen
KĂĽrzlich hochgeladen (20)
Measuring Mobile Web Performance v2
- 1. Stephen Thair, Seriti Consulting, @TheOpsMgr London Web Performance Meetup Group, @LDNWebPerf Measuring mobile performance 02/07/2011 © Seriti Consulting 1
- 2. Before we start… 3 Things to keep in mind 02/07/2011 © Seriti Consulting 2
- 3. Desktop ≠Mobile 02/07/2011 © Seriti Consulting 3
- 4. A Java app calling a java app calling a C++ app using JNI to call a java app…. 02/07/2011 © Seriti Consulting 4 http://assets.en.oreilly.com/1/event/60/Analyzing%20the%20Performance%20of%20Mobile%20Web_%20Challenges%20and%20Techniques%20Presentation.pdf
- 5. Wifi ≠Mobile 02/07/2011 © Seriti Consulting 5
- 6. WiFivs HSDPA Performance 02/07/2011 © Seriti Consulting 6
- 7. Mobile ≠Mobile 02/07/2011 © Seriti Consulting 7
- 8. Different Phones = Different Performance 02/07/2011 © Seriti Consulting 8 http://www.anandtech.com/show/4144/lg-optimus-2x-nvidia-tegra-2-review-the-first-dual-core-smartphone/8
- 9. Different operating systems 02/07/2011 © Seriti Consulting 9
- 10. Different Browsers… 02/07/2011 © Seriti Consulting 10 http://www.webdevelopersnotes.com/articles/mobile-web-browsers-list.php
- 11. Different network types… 02/07/2011 © Seriti Consulting 11 http://developer.android.com/reference/android/telephony/TelephonyManager.html
- 12. Mobile Performance is location-dependent 02/07/2011 © Seriti Consulting 12 http://mytests.3pmobile.com/context/?WyIyUFVDZHlWV2ErZHFISmxCSWFXRENnPT0iLCJEYnFYVVp3SEN4MD0iXQ%3D%3D
- 13. HSDPA… on a #!%&$@*ing train 02/07/2011 © Seriti Consulting 13 Max RTT = 20266ms http://blog.davidsingleton.org/mobiletcp
- 14. Page Load times (along the thames) 02/07/2011 © Seriti Consulting 14 Off the chart (2m36s)
- 15. How many ways are there to measure web performance? And how useful are they on Mobile? 02/07/2011 © Seriti Consulting 15
- 16. 6 02/07/2011 © Seriti Consulting 16
- 17. 6Browser plug-ins 02/07/2011 © Seriti Consulting 17 As used in HTTPWatch, DynatraceAjax Edition etc But only some mobile browsers support plug-ins…
- 18. 5Proxy Timing 02/07/2011 © Seriti Consulting 18 E.g. Fiddler Proxy (http://www.fiddler2.com/Fiddler2/version.asp) There is no proxy settings in Android unless you root your phone (http://android-proxy.blogspot.com/) Only useful for WiFi… Beware the “observer effect”
- 19. 4Web Server Module 02/07/2011 © Seriti Consulting 19 As used by many APM solutions e.g. Dynatrace, New Relic Install mod_ or ISAPI filter Measure the RTT between web server and DB/Application tier Great for measuring your back-end performance Not much good for front end…
- 20. 3JavaScript Timing 02/07/2011 © Seriti Consulting 20 As used in Boomerang, Episodes, GA, WebTuna etc OK for web pages, better with new WebTiming and NavigationTiming APIs not that mobile browsers support them… Relies on JavaScript and Cookies… which is problematic…
- 21. 2 Network level Timing 02/07/2011 © Seriti Consulting 21 As used by PCAPPerf and by Atomic Labs Pion, Tealeaf, Coradiant PCAPPERF limited to over WiFi (otherwise you can’t capture the packets)* Pion, Tealeaf etc require network tap…
- 22. 1 Custom browser 02/07/2011 © Seriti Consulting 22 As used by 3PMobile.com (on the phone) and synthetic agents (by active monitoring providers e.g. Site Confidence) At present this is the only way to get real OTA performance data.
- 23. 02/07/2011 © Seriti Consulting 23 So what to use?
- 24. 02/07/2011 © Seriti Consulting 24 Depends on your needs
- 25. 02/07/2011 © Seriti Consulting 25 Development vs “Real World”
- 26. 02/07/2011 © Seriti Consulting 26 Network perspective vsBrowser Perspective?
- 27. PCAPPerf Testing 02/07/2011 © Seriti Consulting 27 WiFi Connection to PC PC acting as Wifi hotspot and capturing packets with Wireshark Upload pcap file to pcapperf.appspot.com And View the waterfall Upload http://code.google.com/p/pcaphar/wiki/CaptureMobileTraffics
- 28. Mobitest – blaze.io/mobile 02/07/2011 © Seriti Consulting 28 “PCAPPerfas SaaS” + some on-device event capture + screenshots WiFi only Tethered machines in Ottawa, DC, Amsterdam
- 29. Mobitest / PCAPPerf waterfall 02/07/2011 © Seriti Consulting 29
- 30. 3PMobile.com “Browser2” 02/07/2011 © Seriti Consulting 30 Android Native Browser code instrumented for performance measurement Test Anywhere Full Mobile context – device & location & network Browser-level perspective Screenshots Automated Testing
- 31. Device Context 02/07/2011 © Seriti Consulting 31
- 32. 02/07/2011 © Seriti Consulting 32 Location Context
- 33. 02/07/2011 © Seriti Consulting 33 Network Context
- 34. 3PMobile.com “Browser2” Waterfall 02/07/2011 © Seriti Consulting 34 New “detail mode” hybrid waterfall
- 35. 02/07/2011 © Seriti Consulting 35
- 36. 3pMobile Open Beta 02/07/2011 © Seriti Consulting 36 Register at www.3pmobile.com Download the APK & install Test away! The results from the tests shown today are available Username = ajaxmobile@seriticonsulting.com Password = ajaxmobile Feel free to take a look (but please don’t delete any tests not your own)
- 37. 02/07/2011 © Seriti Consulting 37 So what else is there?
- 38. TCP Dump on Rooted phone 02/07/2011 © Seriti Consulting 38 http://www.vbsteven.be/blog/android-debugging-inspectin-network-traffic-with-tcpdump/
- 39. JavaScript Bookmarklets 02/07/2011 © Seriti Consulting 39 Steve Souder’s Mobile Performance Bookmarlet http://stevesouders.com/mobileperf/mobileperfbkm.php None of these measure performance per se, but they can give you more information about the page (but beware of a strong “observer effect”)
- 40. Keynote MITE (Emulation) 02/07/2011 © Seriti Consulting 40 The free Keynote MITE emulator Webkit-based emulation based on device profiles
- 41. Debugging tools 02/07/2011 © Seriti Consulting 41 Most SDK’s include debugging tools and profilers that can help you understand what’s going on But you are tethered to your PC (normally)
- 42. Watchmouse“IAM” library 02/07/2011 © Seriti Consulting 42 In-App Monitoring (IAM) is a set of libraries to help instrument your web apps. Currently iPhone only. Replace your app WebView calls with IAMWebView It will gather the performance data and beacon it out for you https://bitbucket.org/watchmouse/iam/
- 43. 02/07/2011 © Seriti Consulting 43 And that’s all I’ve got…
- 44. 02/07/2011 © Seriti Consulting 44 Questions? Stephen Thair, Seriti Consulting, @TheOpsMgr Stephen.thair@seriticonsulting.com www.seriticonsulting.com/blog London Web Performance Meetup Group, @LDNWebPerf Monthly Meetups in Central London (near Bank) http://www.meetup.com/London-Web-Performance-Group/
Hinweis der Redaktion
- Forget what you thought you knew…
- Here is one reason why a mobile browser isn’t the same as a desktop browser….(on Android) the “web browser” is a Java App calling a C/C++ app which calls another C app…
- Different bandwidthDifferent latencyDifferent network layer entirely (Backhaul probably isn’t even IP-based…)
- And if you throw in CyanogenMod you can get even better performance…
- And if you throw in CyanogenMod you can get even better performance…
- What type of network is it connected to?
- I was on the Thames Clipper on my way back from the O2 after a concert. So I ran some automated testing and this graphs my results… Average32.859Median12.071Std Deviation45.691Min9.275Max156.520
- “Snakes… on a motherf**king plane!” Network latency varies enormously…. What can we see here?The connection is relatively good at sending and receiving data. The green crosses represent packets that were actually lost which only happened for 75 of 1000.There are some crazy-high round trip times. The minimum round trip time was 107ms (which would put my home cable connection to shame) and even the median is pretty awesome at 239ms but the maximum was a whopping 20226 ms - that's more than 20 seconds!
- Test MarkerTime (Sec)Signal Strength (ASU)19.2753212.681339.68274156.52018512.071969.28513752.86814810.1849923.1658Average32.859Median12.071Std Deviation45.691
- 1.JavaScript timing e.g. WebTuna, Boomerang, Episodes2.Browser plug-in e.g. HTTPwatch3.Custom browser variant e.g. A Webkit-build (often used as a monitoring agent)4.Proxy timing e.g. Fiddler proxy5.Web Server Module e.g. APM solutions like AppDynamics, Dynatraceetc6.Network-level e.g. Atomic Labs Pion, Tealeaf, Coradiant
- 2.Browser plug-in e.g. HTTPwatchBut only some mobile browsers have a plug-in architecture… and exactly what timing info that would provide… I have no idea…
- 4.Proxy timing e.g. Fiddler proxy or Charles ProxyObserver Affect #1 = http://www.fiddler2.com/fiddler/perf/PerfMeasure.aspObserver Affect #2= http://insidehttp.blogspot.com/2005/06/using-fiddler-for-performance.html
- 5.Web Server Module e.g. APM solutions like AppDynamics, Dynatraceetc
- 1.JavaScript timing e.g. WebTuna, Boomerang, EpisodesYou can also use YUI Profiler I believe http://developer.yahoo.com/yui/profilerI have seen JavaScript warnings appear due to “excessive time in the onBeforeUnload event” – so keep in mind that JavaScript is a lot slower in mobile devices and hence the observer effect is larger (and the timing more accurate).
- Network tap based solutions are great for measuring your own site, not so great for measuring 3rd party sites.PCAPPerf is limited to WiFi… which isn’t anything like the real “mobile” experience. The mobile network stack is NOT the same as the desktop stack, and the client side delay is larger also. *In theory you can use tcpdump on a rooted phone. More on that later…
- The mobile network stack is NOT the same as the desktop stack, and the client side delay is larger also.
- Is a tethered, rooted phone over wifi adequate to your needs?
- Is knowing what’s happening “on the wire” enough, or do you want to understand what’s happening at the browser level?And the “mobile context” …So lets look at a few in detail…
- Flexible solution (in theory works with every WiFi enabled phone)But WiFi isn’t mobile…And it’s a faff…
- Essentially the PCAPPerf approach as SaaSBut it does support iPhone and Android.
- Currently Android only but PoC code for Blackberry and iPhone exists. iPhone client in 90 to 120 days, all being well.
- Rooted and Tethered, again…
- Even a PC-based version of Webkit isn’t the same as webkit running on a mobile device. But useful none the less. Lots of other features and unsurprisingly there is a (expensive) Pro version “The MITE Pro annual user license is $5,000 and includes 100 hours of free remote testing. To learn more about single- and multiple-license purchases, please contact us today.”
- The mobile network stack is NOT the same as the desktop stack, and the client side delay is larger also.