Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cdn-Summit-2012-mocospace-and-yottaa

1,886 views

Published on

Using CDN and Front-End Optimization To Deliver a
Good Mobile Experience with the Yottaa Solution for Mobile Acceleration

  • Be the first to comment

  • Be the first to like this

Cdn-Summit-2012-mocospace-and-yottaa

  1. 1. P L AY G A M E S . MAKE FRIENDS. Using CDN and Front-End Optimization To Deliver a Good Mobile ExperienceYottaa Inc.101 Summer StBoston, MAhttp://www.yottaa.com@Yottaa © 2012 Yottaa Inc. All Rights Reserved.
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.

×