1. Mobile Web Performance Optimization Guy Podjarny, CTO

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

4. Assumed to affect other search engines as well3 Shopzilla: 5s load time improvement KISSMetrics: Page Abandonment vs. Load Time

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

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

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

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

9. Mobile front end optimization 8

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

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

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

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

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

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

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

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

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

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

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

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

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

23. Measuring mobile web perf 22

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

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

26. Different Devices 25

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

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

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

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

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

32. 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/