Cdn-Summit-2012-mocospace-and-yottaa

Yottaa Inc. 101 Summer StBoston, MAhttp://www.yottaa.com@Yottaa

© 2012 Yottaa Inc. All Rights Reserved.

P L AY GAMES. M A K E FR IENDS.

Using CDN and Front-End

Optimization To Deliver a

Good Mobile Experience

2© 2012 Yottaa Inc. All Rights Reserved.

MOCOSPACE IS A DESTINATION

Over 25 Million Members

60 Million Minutes Spent Daily

Largest Catalog Of Free-to-play HTML5 Games

We are the best place to play games, make friends, and stay connected on the mobile Web.

1st and 3rd party games from over 2 dozen developers

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

© 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

© 2012 Yottaa Inc. All Rights Reserved.

5

Front-End Optimization

• Front-end: 90% of page load time– Network time– Browser time

• Optimization techniques1. Reduce HTTP requests

2. Reduce page size

3. Optimize page render time

© 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

© 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

© 2012 Yottaa Inc. All Rights Reserved.

8

NumberMash

• Removed 18 image requests using dataURI

• <img class="coinImage" src="data:image/png;base64,iVBORw0KGgo…

• Images are instantly displayed for better experience.

© 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

© 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

© 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

© 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© 2012 Yottaa Inc. All Rights Reserved.

13

Thank you

• Jamie Hall CTO – Mocospace– [email protected]

• Bob Buffone CTO - Yottaa – [email protected]

• Twitter• @mocospace• @yottaa• Learn More About The Yottaa Solution For

Mobile Acceleration here

© 2012 Yottaa Inc. All Rights Reserved.