Learn how to create a mobile-optimized shopping experience that turns more visitors into customers, and more customers into happy repeat customers. This webinar is brought to you in collaboration with EdgeCast

1. Selling Faster: Mobile Performance Tips
for E-Commerce Websites
#sellingfaster | June 4th, 2013
Tuesday, 4 June, 13

2. Igor Faletski
CEO & Co-Founder
Mobify
Hayes Kim
Dir. Product Management
EdgeCast
@mobify | @edgecast
#sellingfaster
#sellingfaster
Tuesday, 4 June, 13

3. 1. The Mobile Performance Challenge
2. Lessons Learned
3. Mobile Performance Best Practices
4. Mobile Performance + CDNs
5. CDN Implementation Best Practices
6. Q&A with Igor and Hayes
In Today’s Webinar
#sellingfaster
Tuesday, 4 June, 13

4. Adapt your website for mobile devices—
smartphones, tablets and more—with our
open platform, tools and services.
Enhance your responsive or mobile website with
our performance optimization features.
What is Mobify?
#sellingfaster
Tuesday, 4 June, 13

5. What is EdgeCast?
EdgeCast is the world’s fastest, most reliable
content delivery network (CDN).
EdgeCast offers an end-to-end mobile product
platform for device adaptive delivery of rich media
and dynamic content.
#sellingfaster
Tuesday, 4 June, 13

6. Network Infrastructure
and Edge Optimization:
• Global application
acceleration
• Dedicated PCI network
for mobile and e-
commerce delivery
Server CDNs User Device
retailer.com
API, Tools and Services:
• Client-Side Adaptations
• Responsive Image Resizing
• Script Optimization
• DOM Manipulation
How can we help you?
#sellingfaster
Tuesday, 4 June, 13

7. THE MOBILE
PERFORMANCE
CHALLENGE
Tuesday, 4 June, 13

8. #sellingfaster
Tuesday, 4 June, 13

9. 0%#
10%#
20%#
30%#
40%#
50%#
60%#
70%#
80%#
90%#
100%#
100ms# 1s# 2s# 3s# 4s# 5s# 6s# 7s# 8s# 9s# 10s#
eCommerce'sales'lost'due'to'load'.me'
Source: Amazon web team (1% conversion loss per 100ms)
#sellingfaster
Tuesday, 4 June, 13

10. JavaScript Execution
#sellingfaster
Tuesday, 4 June, 13

11. Oversized Images
#sellingfaster
Tuesday, 4 June, 13

12. Why is Mobile Performance
a Challenge in 2013?
We’re working towards
One Web, One URL:
• Responsive Web Design
• ReSS
• Adaptive Templating
#sellingfaster
Tuesday, 4 June, 13

13. What is Responsive Web Design?
FLUID GRIDS MEDIA QUERIESFLEXIBLE MEDIA
Image Credit: Luke Wroblewski, CSS-Tricks
...are the 3 technical ingredients for responsive web design.
- Ethan Marcotte
#sellingfaster
Tuesday, 4 June, 13

14. LESSONS
LEARNED
Tuesday, 4 June, 13

15. Responsive | skinnyties.com
13.6% conversion rate increase
377.6% revenue growth on iPhone
23.3% lower bounce rate
#sellingfaster
Tuesday, 4 June, 13

16. Responsive | aritzia.com
Great-looking site
Homepage is 8MB
#sellingfaster
Tuesday, 4 June, 13

17. Adaptive | ctshirts.co.uk
#sellingfaster
Each device gets a different HTML
One URL
Tuesday, 4 June, 13

18. MOBILE
PERFORMANCE
BEST PRACTICES
Tuesday, 4 June, 13

19. 1. Bandwidth + Latency
2. Oversized or Poorly Compressed Images
3. JavaScript: Blocking JS + Execution
4. CSS Complexity
5. Rendering Speed
Top Five
Mobile Performance Offenders
#sellingfaster
Tuesday, 4 June, 13

20. #1: Bandwidth + Latency
#sellingfaster
Tuesday, 4 June, 13

21. #1: Bandwidth + Latency
Source: Ilya Grigorik (Google)
#sellingfaster
Tuesday, 4 June, 13

22. What does this mean?
0%#
10%#
20%#
30%#
40%#
50%#
60%#
70%#
80%#
90%#
100%#
100ms# 1s# 2s# 3s# 4s# 5s# 6s# 7s# 8s# 9s# 10s#
eCommerce'sales'lost'due'to'load'.me'
Source: Amazon web team (1% conversion loss per 100ms)
#sellingfaster
Tuesday, 4 June, 13

23. Solution:
Remove Unneeded Resources
#sellingfaster
Tuesday, 4 June, 13

24. Solution:
Pre-Fetching
#sellingfaster
Tuesday, 4 June, 13

25. #2: Oversized Images
#sellingfaster
Tuesday, 4 June, 13

26. Solution:
Compress Assets
#sellingfaster
Tuesday, 4 June, 13

27. Solution:
Responsive Images
Image Credit: CSS-Tricks
via multiple tiles, WebP, progressive jpeg...
#sellingfaster
Tuesday, 4 June, 13

28. #3: JavaScript | Blocking JS
#sellingfaster
Tuesday, 4 June, 13

29. #3: JavaScript | Execution
Large JavaScript is still slow
#sellingfaster
Tuesday, 4 June, 13

30. Solution:
Use Blocking JS with Caution
Place Blocking JS at the bottom
Use as little Blocking JS as possible
Use async
#sellingfaster
Tuesday, 4 June, 13

31. Solution:
Conditional JS Loading
#sellingfaster
Tuesday, 4 June, 13

32. #4: CSS Complexity
#sellingfaster
Tuesday, 4 June, 13

33. Solution:
Nesting, Manual Review + Fixes
#sellingfaster
Tuesday, 4 June, 13

34. • Parsing
• Tree Building
• Layout
• Painting
#5: Rendering Speed
#sellingfaster
Tuesday, 4 June, 13

35. Solution:
Repaint (Redo Layout + Paint)
#sellingfaster
Tuesday, 4 June, 13

36. #sellingfaster
Adaptive Templating
Launch quickly
• No website rebuild required.
Get to market fast and see
immediate results.
Future-proof your website
• Optimize your site for all
mobile devices, tablets and
new devices not yet invented.
Gain control and flexibility
• Build it yourself, engage in co-
development or engage
Mobify’s experts for full service.
Promote internal efficiency
• Update and maintain your site
with ease using existing HTML,
CSS and JavaScript knowledge.
Get all the benefits of One URL (maintain complete link integrity with
optimized SEO, seamless email and easy social media sharing) and a
responsive solution plus:
Tuesday, 4 June, 13

37. #sellingfaster
Tuesday, 4 June, 13

38. Element Filtering
• Selectively exclude elements that
you don’t need on mobile for
maximum efficiency
Image Resizing
• Dramatically reduce page load time
and increase user engagement
• Reduce bandwidth costs result in a
better bottom line for your business
JazzCat: JavaScript
and CSS Acceleration
• Optimize your scripts and
stylesheets
• Improve mobile load times by
reducing the number of HTTP
requests
• Use the Mobify API to specify which
resources are optimized
Performance Features
#sellingfaster
Tuesday, 4 June, 13

39. #sellingfaster
Example E-Comm Site
http://example-ecomm-site.com
Tuesday, 4 June, 13

40. Challenges + Solutions
Performance Challenges Development Options Mobify Solutions
Bandwidth & Latency
Remove unneeded resources,
pre-fetching, caching headers
Client-Side Adaptation,
Element Filtering
Oversized Images
Compress assets, multiple tiles,
WebP, progressive jpeg
Image Resizing
JavaScript: Blocking JS &
Execution
Place Blocking JS at the bottom,
use as little Blocking JS as
possible,
conditional JS loading
JazzCat (JS Optimization)
CSS Complexity
LESS, Sass, nesting,
manual review and fixes
JazzCat (CSS Optimization)
Browser Render Operations
Parsing, tree building,
layout and painting
Client-Side Adaptation
#sellingfaster
Tuesday, 4 June, 13

41. MOBILE
PERFORMANCE
AND CDNs
(more than just back-end optimization)
Tuesday, 4 June, 13

42. 1. Bandwidth + Latency
2. Oversized or Poorly Compressed Images
3. JavaScript: Blocking JS + Execution
4. CSS Complexity
5. Rendering Speed
Top Five
Mobile Performance Offenders
#sellingfaster
Tuesday, 4 June, 13

43. It starts with optimizing connectivity for latent
heavy mobile networks!
#sellingfaster
Source: Building Faster Websites presentation by Ilya Grigorik
Tuesday, 4 June, 13

44. The Bandwidth + Latency Solutions
#sellingfaster
DNS Lookup
Socket Connect
Looking at the first part of the problem
Tuesday, 4 June, 13

45. DNS Pre-fetching
#sellingfaster
Bing
Google
Tuesday, 4 June, 13

46. SSL Performance
#sellingfaster
Tuesday, 4 June, 13

47. TCP fast-start and packet sizing
#sellingfaster
>50% improvement just in connection setup-savings!!
>At 2 round trips, 58KB vs 4KB
TCP Win
RTTs
Tuesday, 4 June, 13

48. Optimizing connectivity for latent heavy mobile
networks!
#sellingfaster
HTTP Request
Content Download
1. Resource pre-fetching
• The difference between serving from cache vs.
fetching from your origin.
• 50ms vs 200ms X # of objects on your page
Tuesday, 4 June, 13

49. #sellingfaster
3. Device / Screen specific
adaptation
• Taking a more aggressive approach to
optimizations
• Adaptive bit-rate image optimizations
2. Deliver less bytes in a smart way
• Compress and/or transcode Images
• Inline Images
• Lazy Load Images, below the fold intelligence
Oversized or Poorly Compressed Image Solutions
Tuesday, 4 June, 13

50. #sellingfaster
The Bad
The Good
http://blog.patrickmeenan.com/2010/06/avoid-inline-javascript-sandwich.html
Blocking javascript is very bad
Tuesday, 4 June, 13

51. Solution:
Defer with automation
Use Async if you or automate
it
#sellingfaster
Tuesday, 4 June, 13

52. Paint your page faster by prioritizing critical CSS
#sellingfaster
Tuesday, 4 June, 13

53. Solution
#sellingfaster
Per browser/device, figure out only
what’s needed to render the page and
prioritize that first.
Style the page without fetching external resources!
Tuesday, 4 June, 13

54. Solution to rendering speed:
EdgeIntelligence Suite
#sellingfaster
1. EdgeOptimizer
2. Rules Engine
3. Edge Content Construction (Lua)
Tuesday, 4 June, 13

55. Edge Optimizer: Automated FEO on the edge
#sellingfaster
Implementation of Google PageSpeed
at the edge
(Google PageSpeed: set of best practices focused on reducing page
load time.)
Tuesday, 4 June, 13

56. Rules Engine
#sellingfaster
• Device specific caching
• Conditional actions at the edge
• Cache Non-200 responses
• Header inspection and manipulation
• URL rewriting and redirection
Caching and delivery rules
Tuesday, 4 June, 13

57. Edge Content Construction
#sellingfaster
Perform critical processes at the edge, e.g.:
• A/B testing
• Re-routing and re-targeting
• Edge executed logic
LUA proxy origin response rewriting
Allows content to be rewritten before coming
into cache.
Tuesday, 4 June, 13

58. #sellingfaster
• Rules Engine 3.0
• POST Acceleration Technology
• DNS
• SPDY
• WURFL
• Lua Async IO
EdgeCast Roadmap
Tuesday, 4 June, 13

59. CDN
IMPLEMENTATION
BEST PRACTICES
Tuesday, 4 June, 13

60. #sellingfaster
• If your CDN isn’t performance focused first, pick a
different CDN
• Don’t let any CDN tell you that varying your content is a
bad idea. Just be smart about it
• Cache your redirects!
• If your CDN supports it, MOVE YOUR LOGIC TO THE
EDGE
• DNS matters, don’t let any CDN tell you otherwise. Call
them on it
Selecting the right CDN for you
Tuesday, 4 June, 13

61. #sellingfaster
• Cache your redirects!
• Always have a content freshness header, cache everything
possible for as long as possible
• If your CDN supports it, MOVE YOUR LOGIC TO THE EDGE
• SSL matters, don’t just go with the recommended vendor
• Automated front-end optimization can be scary but the
technology is legitimate. Test it out and see if it makes sense
for you
Fine-tuning your CDN
Tuesday, 4 June, 13

62. Any Questions?
Igor @mobify | Hayes @edgecast
#sellingfaster
Tuesday, 4 June, 13

63. On Responsive and One Web
http://alistapart.com/article/responsive-web-design
http://www.w3.org/TR/mobile-bp/#OneWeb
On Performance
https://developers.google.com/speed/
http://www.igvita.com/ (Gregorik Ilya, Google Performance team)
http://stevesouders.com/ (Author of "High Performance Websites, O'reilly & Associates" ) (author of YSlow)
http://css-tricks.com/which-responsive-images-solution-should-you-use/
MORE
http://www.google.com/think/perspectives/make-website-work-across-multiple-devices.html
http://mobify.com
http://edgecast.com
RESOURCES
#sellingfaster
Tuesday, 4 June, 13