User Experience on Mobile Device Dantong Dong, Yunfan Hua Overview Proxy Optimization Motivation 01 04 NutShell: Scalable Whittled Proxy Execution Special Topic: Autonomous Key Challenges 02 05 Driving Caching and Rendering Edge Computing Optimization Optimization Google’s AMP approach: 03 06 Low latency offloading to achieve caching and pre-rendering high accuracy Mobile Devices V.S. Personal Phone Autonomous Vehicle & Fast Rendering Virtual Reality Good Responsiveness Mission Critical Compromisable High Accuracy Fast Tracking 1. Motivation - “Mobile First” - More websites have been loaded on smartphones and mobile devices than on desktop computers - Users spend up to three times more hours browsing on smartphones than on other devices - Each 2 second delay in page loading result in 4.3% of revenue loss 02. Key Challenges - Most webpage are developed targeting laptop as its native computing framework - As a result Webpage loading in personal mobile device is very slow 03. Caching and Rendering Optimization: Google’s AMP 03. Caching and Rendering Optimization: Google’s AMP becomes 03. Caching and Rendering Optimization: Google’s AMP Simplifies HTML Tag Lazy Caching/Loading Pre-rendering AMP simplify the original AMP adopts lazy loading of Some of the result in HTML content by replacing certain object and leverage Google search(hot words/ it with its own HTML tag for Google AMP’s CDN for news) will be pre-rendered faster processing caching and ready to view 03. Caching and Rendering Optimization: Google’s AMP Key Optimization Happen between Red line and Green line, naming HTML Tag simplification 03. Caching and Rendering Optimization: Google’s AMP User: App Independent Dev: No extra effort Does not depend on any Developer can develop web application or infrastructure page normally and all the on user side. “click and see” optimization is on Google. approach No extra effort involved Caching: Good Idea, Bad Approach AMP page is not persistent. After a time, the cached page is not viewable and have to redirect to original URL 03. Caching and Rendering Optimization: Other Products Facebook’s Instant Article Amazon Silk Opera Mini Speed up article load speed Specialized Web browser to Similar to Amazon Silk, it’s by leverage Facebook’s speed up web page loading a specialized mobile mobile app format and on mobile phone. Only browser but OS infrastructure works on Amazon products independent. All of Them Are App Dependent Extra Development Effort OS Dependent 04. Proxy Optimization: What Is Proxy in The Context of Mobile App? A standard web page consists of HTML, CSS, JavaScript. Proxies executes Web page JavaScript (JS) and push objects needed by the client - Proxies needs to be scalable, need to execute JS for many concurrent users - Proxy optimization can make the web page more responsive with less latency 04. Proxy Optimization: Nutshell NutShell: Scalable Whittled Proxy Execution for Low-Latency Web over Cellular Networks. NutShell can sustain 27% more user requests per second than a traditional proxy execution Whittled Proxy Execution a technique to identify and execute in the proxy only the JS code necessary to identify and push the objects required for the client page load, while skipping other code. 04. Proxy Optimization: Nutshell - JS Execution 04. Proxy Optimization: Nutshell - Outcome 04. Proxy Optimization: Nutshell - Novelty Different From Caching And Rendering Optimization Cellular Network focused Deployed Learning Technique JS execution Optimization Proxy optimization relies on Utilized Learning instead of vs. HTML/CSS component Cellular Network, and need traditional method to Loading Optimization to consider scalability identify JS code 05. Special Topic: Autonomous Driving 05. Special Topic: Autonomous Driving - Some mobile device, such as autonomous driving device and augmented reality(AR) device, requires low latency loading on mobile device to achieve high detection accuracy - Without optimization, executing large networks on such mobile devices is difficult - Mission critical devices, requires low end-to-end latency 06. Edge Computing Optimization Traditional Computation: Offloading and rendering happens sequentially 06. Edge Computing Optimization Edge Assisted Real-time Object Detection for Mobile Augmented Reality Uses fast object tracking method to maintain detection accuracy Low Latency Offloading Decouples the rendering pipeline from the offloading pipeline 06. Edge Computing Optimization Reference ● Edge Assisted Real-time Object Detection for Mobile Augmented Reality, Mobicom 2019 ● AMP up your Mobile Web Experience: Characterizing the Impact of Google's Accelerated Mobile Project, Mobicom 2019 ● NutShell: Scalable Whittled Proxy Execution for Low- Latency Web over Cellular Networks, Mobicom 2017 CREDITS This is where you give credit to the ones who are part of this project. ● Presentation template by Slidesgo ● Icons by Flaticon ● Infographics by Freepik ● Images created by Freepik ● Author introduction slide photo created by Freepik ● Text & Image slide photo created by Freepik Q&A.