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

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.