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
Time Series Foundation Models - current state and future directions
Selling Faster: Mobile Performance Tips for E-Commerce Websites
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
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
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
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
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
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
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
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
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
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