Improving Mobile Performance - Simple Tips and Tricks

"As mobile device usage has skyrocketed in recent years, mobile applications have emerged as the key engagement channel for businesses to connect with their most valuable customers. Mobile app usage represents more than 85% of total mobile device time, and users now spend more time with apps than they do with television. This make it only mandatory to think from a mobile-first perspective to ensure a consistent user experience.In this class, you will learn some simple techniques to enhance mobile performance. Some of the features we will cover are:

— Performance Benefits of IPv6
— Benefits of Image Optimization
— Mobile App Performance SDK
— Next Gen protocols (H2)"""

Transcript

1. © AKAMAI - EDGE 2017 Improving Mobile Performance – simple tips and tricks Senior Lead Service Architect Bhagirath Gaonkar Technical Project Manager ll Saili Shaha
2. © AKAMAI - EDGE 2017 Improving Mobile Performance – simple tips and tricks Saili Shaha and Bhagirath Gaonkar
3. © AKAMAI - EDGE 2017 Name Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean. Name Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean. Name Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean. Name Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean. Meet the Presenters Bhagirath Gaonkar Senior Lead Service Architect Saili Shaha Technical Project Manager ll
4. © AKAMAI - EDGE 2017 Agenda The importance of Mobile Performance to Business 1 Network Protocols 2 Mobile App Performance 3 Image Optimizations 4 Miscellaneous Improvements 5
5. © AKAMAI - EDGE 2017 of visits to mobile sites are abandoned after 3 seconds according to research from Google's DoubleClick. 53% drop in page views for a 4 second delay that Optimizely added via an artificial latency to the Telegraph 11% increase in conversions for every 1 second of improvement in load time. Every 100ms improvement also resulted in up to a 1% increase in revenue. 2% drop in revenue for a 1 second delay in Bing results. Two second delay results in 4.3% drop. 2.8% drop in revenue for a 100ms delay in load time at Amazon 1% Performance Impacts Business Metrics https://wpostats.com
6. © AKAMAI - EDGE 2017 Recent Data Validates What We Already Know
7. © AKAMAI - EDGE 2017 Mobile Web Desktops Mobile Apps Conversions 1.5X Mobile users spend more money 2X
8. © AKAMAI - EDGE 2017 Mobile users have a lower tolerance for delays
9. © AKAMAI - EDGE 2017 Development & Deployment Complexity It’s Never Been Harder to Deliver Great Mobile Experiences Unreliable Internet & Data Center Infrastructure User Fragmentation across Devices, Sites, & Apps Unpredictable Cellular Connectivity End-to-End Challenges Easier to Develop and Deliver Great Experiences Harder to Develop and Deliver Great Experiences Internet
10. © AKAMAI - EDGE 2017 Network Protocols
11. © AKAMAI - EDGE 2017 Why IPv6? Gartner Says 8.4 Billion Connected "Things" Will Be in Use in 2017 http://www.warwicknet.com/blog/introduction-ipv6
12. © AKAMAI - EDGE 2017 IPv6 Benefits for Mobile Websites and Applications
13. © AKAMAI - EDGE 2017 Mobile App Performance
14. © AKAMAI - EDGE 2017 49% of users expect a mobile app to respond in 2 seconds or less HP Enterprise, “What’s your FunDex?” 80% will use a problematic app three times or less TechBeacon, “2015 Mobile App Usage and Abandonment Survey”, 2015 Mobile App Users are Extremely Sensitive to Performance 40% uninstall apps based on a prior unsatisfactory experience Marketing Profs, “Mapping a Mobile App User’s Journey From Discovery to Purchase” Infographic, 2016
15. © AKAMAI - EDGE 2017 Edge Servers Extend Akamai all the way to the device (SDK) Akamaized Route (TODAY) Extend Akamai to the device
16. © AKAMAI - EDGE 2017 Network Awareness Adapt resources and app behavior based on network quality SureRoute for Cellular Identify the fastest path through the mobile network to the Akamai Edge Contextual Pre-Positioning Instantaneous app views and seamless browsing, even offline Mobile User Analytics App insight into changing network & device conditions Mobile Application Performance SDK Universal Cache Enables caching of resources within the mobile app
17. © AKAMAI - EDGE 2017 Network Awareness Send hints to Akamai to optimize images and content Augment server side responses based on client side congestion SDK Automatically hints Akamai Server about Network Quality
18. © AKAMAI - EDGE 2017 { do lean-app()}; { do everything()}; If n/w quality == LOW If n/w quality == HIGH Tailor the app experience Tailor experience to network conditions
19. © AKAMAI - EDGE 2017 Tailor the app experience Tailor the cached content If n/w quality == LOW If n/w quality == HIGH 9 KB 99 KB AIC Tailor experience to network conditions
20. © AKAMAI - EDGE 2017 If n/w quality == LOW If n/w quality == HIGH Origin Tailor the app experience Tailor the cached content Tailor the origin content Return 5 searches Return 48 searches Tailor experience to network conditions
21. © AKAMAI - EDGE 2017 ISP region 1 ISP region 2 Selects the closest and the “fastest” server for your request Test results have shown ~20% improvement over cellular SureRoute for Cellular
22. © AKAMAI - EDGE 2017 Contextual Pre-Positioning Define what content to push and to whom and when Select Network Type (wifi or cellular or both) Set Download limits (MB/device/day) Set Time Windows (hr:min) Content Hold Time (hr:min)
23. © AKAMAI - EDGE 2017 Better visibility into real user performance
24. © AKAMAI - EDGE 2017 50% see pages in 2 seconds over cellular!
25. © AKAMAI - EDGE 2017 Image Optimizations
26. © AKAMAI - EDGE 2017 Image Optimizations for Mobile - Why Worry?
27. © AKAMAI - EDGE 2017 Image Optimizations for Mobile – Image Manager Screen Size: 315 x 420 900 x 1200 1.2MB 450 x 600 185KB Automatic Resize for Mobile (viewport) Format Size vs. JPEG Browser Support JPEG N/A All WebP -35% JPEG XR -30% JPEG 2000 -30% Convert to Optimal Format for Software/Browser/File Example Policy: Watermark with Breakpoints Resize: § Thumbnail: Mobile, Tablet, Desktop § Main: Mobile, Tablet, Desktop § Zoom Image: Mobile, Tablet, Desktop Quality: Perceptual Medium-High Watermark: Lower left corner, watermarkimage.jpg Policy Driven Artistic & Technical Transformations <img src=“http://example.com/img/model-black-car- headlight.jpg?policy=zoom”> Original Automatic Perceptual Quality Automatic Perceptual Quality Algorithm Q = 85 61KB Q = 75 48KB
28. © AKAMAI - EDGE 2017 What is the impact of using Image Manager Improvement in page load time overall
29. © AKAMAI - EDGE 2017 Miscellaneous Improvements
30. © AKAMAI - EDGE 2017 Miscellaneous Tips Time out detection and fail-over Enable HTTP/2 Optimum cache- fragmentation for higher cache-hit ratio Smart balancing in cloud using Cloudlets
31. © AKAMAI - EDGE 2017 When you master mobile, customers are more likely to: Browse more pages Spend more time on Apps Engage more often Spend more money on products Share positive experiences with family, friends, and on social media
32. © AKAMAI - EDGE 2017
33. © AKAMAI - EDGE 2017 Appendix
34. © AKAMAI - EDGE 2017
35. © AKAMAI - EDGE 2017 Name Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean. Name Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean. Name Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean. Name Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean.
36. © AKAMAI - EDGE 2017 Image Optimizations for Mobile - Adaptive Image Compression
37. © AKAMAI - EDGE 2017 By 2020, 4 out of 5 people worldwide will own a smartphone. That’s a total of roughly 6.1 billion mobile users. Many of these users will never have used a desktop computer or landline. [source] Mobile shoppers are more engaged than desktop shoppers. 57% of tablet users conduct product searches at least once a week, compared to 37% of desktop users. [source] Mobile users shop more. 35% of tablet and smartphone users make at least one online purchase per week via mobile, compared to just 15% of desktop users. [source] M-Commerce is on the rise In the US, currently only about 15% of online transactions take place via mobile devices. In Japan, South Korea, and the UK, that number is approaching — or in the case of Japan, exceeding — 50%. [source] Mobile users spend more The Importance of Mobile Performance https://www.soasta.com/blog/23-stats-mobile-web-performance-monitoring/
38. © AKAMAI - EDGE 2017 Mobile Application Performance SDK Excellent Good Poor • Display highest quality images and videos • Reduce image compression levels to reduce server side processing time • Enable instant content within apps via segment based pre-positioning • Optimize dynamic content and TTFB with Multipath/ SureRoute for Cellular • Increase image compression to reduce transport latency • Dynamically decrease image resolution • Reduce API calls and replace with static content requests • Maximize image compression • Minify query responses to reduce the payload • Default to intelligently pre-positioned content for offline availability • Monitor and report on actual app performance We provide network quality awareness and situational performance optimizations for mobile app developers so they can provide the highest quality experience to their end users
39. © AKAMAI - EDGE 2017 Mobile Content
40. © AKAMAI - EDGE 2017 Image Optimizations for Mobile – Image Manager Leverage Image Manager to deliver an optimal image to each device automatically • Browser specific formats can be automatically leveraged for WebView initiated requests • Deliver optimal image size (viewport) • Chroma Subsampling reduces memory footprint on device • Perceptual Quality results in faster images
41. © AKAMAI - EDGE 2017 User Engagement For Mobile Web vs Apps
42. © AKAMAI - EDGE 2017 22 5.7 Products viewed per user Percentage added to basket 24% 13% Percentage of transactions 54% 44% Apps Mobile Web How do we help solve it ? Preload rich and personalized content to the right users ahead of time • Identify the fastest and optimal cellular region for dynamic transactions • Make real time optimization decision based on network quality Measure events within the app that are critical for conversion and help unearth poor performance areas within your app RETAIL Apps on an average have more conversions than mobile web Source: wall street journal, April 2016, shoppers flock to apps shaking up retail What does this mean for an app ? More rich content requested per second through a congested network Failure of dynamic transactions leads to cart abandonment and reduces conversion rates Lack of visibility into app performance issues will lead to lower user retention rates.