Cdn-Summit-2012-mocospace-and-yottaa
Download as PPTX, PDF0 likes1,250 views
The document discusses Yottaa's mobile optimization solutions aimed at improving user experience on mobile web platforms, particularly for gaming and social interactions. It highlights key challenges related to mobile connectivity, hardware limitations, and the importance of front-end optimization techniques such as reducing HTTP requests and page size. The document emphasizes the effectiveness of Yottaa's CDN and customized optimizations to enhance mobile performance without code changes.
Cdn-Summit-2012-mocospace-and-yottaa
- 1. P L AY G A M E S . MAKE FRIENDS. Using CDN and Front-End Optimization To Deliver a Good Mobile Experience Yottaa Inc. 101 Summer St Boston, MA http://www.yottaa.com @Yottaa © 2012 Yottaa Inc. All Rights Reserved.
- 2. M O C O S PA C E I S A D E S T I N AT I O N We are the best place to play games, make friends, and stay connected on the mobile Web. Over 25 Million 60 Million Minutes Spent Daily Members Largest Catalog Of Free- to-play HTML5 Games 1st and 3rd party games from over 2 dozen developers 2 © 2012 Yottaa Inc. All Rights Reserved.
- 3. Mobile: Key Challenges • Mobile networks are slowww.... • High packet loss – High noise environment • Connections made ad-hoc – Dropped to preserve spectrum, battery • Latency, Latency, Latency – >300ms via 3G vs <50ms on broadband 3 © 2012 Yottaa Inc. All Rights Reserved.
- 4. Mobile: Key Challenges • Mobile hardware – CPU 10x slower than desktop – Script parsing slow • 1-10ms / KB • Mobile software – Fragmentation – Limited persistent and in-memory caching • 0-25 MB on mobile vs 75-250 MB on desktop • Android – only 4 MB! • Average page size ~400KB mobile vs ~800KB desktop 4 © 2012 Yottaa Inc. All Rights Reserved.
- 5. Front-End Optimization • Front-end: 90% of page load time – Network time – Browser time • Optimization techniques 1. Reduce HTTP requests 2. Reduce page size 3. Optimize page render time 5 © 2012 Yottaa Inc. All Rights Reserved.
- 6. Yottaa Solution for Mobile Acceleration • Front-End Optimizations – Reduce HTTP requests – Reduce page size – Optimize page render time • Plus Global CDN • Customize optimizations through online control panel • No installs , No code changes • Support for HTTPS 6 © 2012 Yottaa Inc. All Rights Reserved.
- 7. Reduce HTTP Requests • # requests has highest correlation to load time • Inline images (Data URI), scripts, CSS • Combine JavaScript + CSS requests • Leverage browser cache with far-future TTLs • Leverage HTML5 local storage (5 MB) • Lazy load resources – On demand images for those below the fold • Sprite images 7 © 2012 Yottaa Inc. All Rights Reserved.
- 8. NumberMash • Removed 18 image requests using dataURI • <img class="coinImage" src="data:image/png;bas e64,iVBORw0KGgo… • Images are instantly displayed for better experience. 8 © 2012 Yottaa Inc. All Rights Reserved.
- 9. Reduce Page Size • Less to download, better load time • Minify HTML, JavaScript, CSS content • GZIP all JavaScript and CSS content • Image optmization – Remove extra data and meta-data (lossless) – Dynamic downsizing 9 © 2012 Yottaa Inc. All Rights Reserved.
- 10. HappyFarm • CDN uses reduces response time on asset delivery • Compression used to reduces bandwidth • Override cache behavior of developer to improve client-side cache usage 10 © 2012 Yottaa Inc. All Rights Reserved.
- 11. Optimize Page Render Time • Edge caching • Place CSS as high as possible • Async script execution – Place scripts as low as possible – Avoid blocking • Parallelize requests – Pre-emptively load assets in parallel before the browser asks for them 11 © 2012 Yottaa Inc. All Rights Reserved.
- 12. Mocospace • Global Audience – 25 million registered users – 60 million minutes online everyday • Global Developer Network – 2 dozen plus game developers – Hosting their games in unknown locations 12 © 2012 Yottaa Inc. All Rights Reserved.
- 13. Thank you • Jamie Hall CTO – Mocospace – jamie@corp.mocospace.com • Bob Buffone CTO - Yottaa – bbuffone@yottaa.com • Twitter • @mocospace • @yottaa • Learn More About The Yottaa Solution For Mobile Acceleration here 13 © 2012 Yottaa Inc. All Rights Reserved.
Editor's Notes
- #3: Mobile browsing is big – 20-25% of Facebook traffic globally.MocoSpace leverages CDN and a multitudeof optimization techniques to boost site performance and provide great UX, for both 1st party content and 3rd party games.Ads are a big part of the revenue story - the better the user experience, the more ads that are served, which is more $$.Mocospace is working with many disconnected developers in "emerging countries”. Yottaa’s service helps take guys who are operating out of a garage in those locations and makes their applications run better.