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.

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.