• Save
Selling Faster: Mobile Performance Tips for E-Commerce Websites
Upcoming SlideShare
Loading in...5
×
 

Selling Faster: Mobile Performance Tips for E-Commerce Websites

on

  • 1,012 views

Learn how to create a mobile-optimized shopping experience that turns more visitors into customers, and more customers into happy repeat customers. ...

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

Statistics

Views

Total Views
1,012
Views on SlideShare
920
Embed Views
92

Actions

Likes
3
Downloads
0
Comments
0

4 Embeds 92

http://localhost 58
https://twitter.com 19
http://10.0.0.176 14
http://127.0.0.1 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Selling Faster: Mobile Performance Tips for E-Commerce Websites Selling Faster: Mobile Performance Tips for E-Commerce Websites Presentation Transcript

    • Selling Faster: Mobile Performance Tipsfor E-Commerce Websites#sellingfaster | June 4th, 2013Tuesday, 4 June, 13
    • Igor FaletskiCEO & Co-FounderMobifyHayes KimDir. Product ManagementEdgeCast@mobify | @edgecast#sellingfaster#sellingfasterTuesday, 4 June, 13
    • 1. The Mobile Performance Challenge2. Lessons Learned3. Mobile Performance Best Practices4. Mobile Performance + CDNs5. CDN Implementation Best Practices6. Q&A with Igor and HayesIn Today’s Webinar#sellingfasterTuesday, 4 June, 13
    • Adapt your website for mobile devices—smartphones, tablets and more—with ouropen platform, tools and services.Enhance your responsive or mobile website withour performance optimization features.What is Mobify?#sellingfasterTuesday, 4 June, 13
    • What is EdgeCast?EdgeCast is the world’s fastest, most reliablecontent delivery network (CDN).EdgeCast offers an end-to-end mobile productplatform for device adaptive delivery of rich mediaand dynamic content.#sellingfasterTuesday, 4 June, 13
    • Network Infrastructureand Edge Optimization:• Global applicationacceleration• Dedicated PCI networkfor mobile and e-commerce deliveryServer CDNs User Deviceretailer.comAPI, Tools and Services:• Client-Side Adaptations• Responsive Image Resizing• Script Optimization• DOM ManipulationHow can we help you?#sellingfasterTuesday, 4 June, 13
    • THE MOBILEPERFORMANCECHALLENGETuesday, 4 June, 13
    • #sellingfasterTuesday, 4 June, 13
    • 0%#10%#20%#30%#40%#50%#60%#70%#80%#90%#100%#100ms# 1s# 2s# 3s# 4s# 5s# 6s# 7s# 8s# 9s# 10s#eCommercesaleslostduetoload.meSource: Amazon web team (1% conversion loss per 100ms)#sellingfasterTuesday, 4 June, 13
    • JavaScript Execution#sellingfasterTuesday, 4 June, 13
    • Oversized Images#sellingfasterTuesday, 4 June, 13
    • Why is Mobile Performancea Challenge in 2013?We’re working towardsOne Web, One URL:• Responsive Web Design• ReSS• Adaptive Templating#sellingfasterTuesday, 4 June, 13
    • What is Responsive Web Design?FLUID GRIDS MEDIA QUERIESFLEXIBLE MEDIAImage Credit: Luke Wroblewski, CSS-Tricks...are the 3 technical ingredients for responsive web design.- Ethan Marcotte#sellingfasterTuesday, 4 June, 13
    • LESSONSLEARNEDTuesday, 4 June, 13
    • Responsive | skinnyties.com13.6% conversion rate increase377.6% revenue growth on iPhone23.3% lower bounce rate#sellingfasterTuesday, 4 June, 13
    • Responsive | aritzia.comGreat-looking siteHomepage is 8MB#sellingfasterTuesday, 4 June, 13
    • Adaptive | ctshirts.co.uk#sellingfasterEach device gets a different HTMLOne URLTuesday, 4 June, 13
    • MOBILEPERFORMANCEBEST PRACTICESTuesday, 4 June, 13
    • 1. Bandwidth + Latency2. Oversized or Poorly Compressed Images3. JavaScript: Blocking JS + Execution4. CSS Complexity5. Rendering SpeedTop FiveMobile Performance Offenders#sellingfasterTuesday, 4 June, 13
    • #1: Bandwidth + Latency#sellingfasterTuesday, 4 June, 13
    • #1: Bandwidth + LatencySource: Ilya Grigorik (Google)#sellingfasterTuesday, 4 June, 13
    • 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#eCommercesaleslostduetoload.meSource: Amazon web team (1% conversion loss per 100ms)#sellingfasterTuesday, 4 June, 13
    • Solution:Remove Unneeded Resources#sellingfasterTuesday, 4 June, 13
    • Solution:Pre-Fetching#sellingfasterTuesday, 4 June, 13
    • #2: Oversized Images#sellingfasterTuesday, 4 June, 13
    • Solution:Compress Assets#sellingfasterTuesday, 4 June, 13
    • Solution:Responsive ImagesImage Credit: CSS-Tricksvia multiple tiles, WebP, progressive jpeg...#sellingfasterTuesday, 4 June, 13
    • #3: JavaScript | Blocking JS#sellingfasterTuesday, 4 June, 13
    • #3: JavaScript | ExecutionLarge JavaScript is still slow#sellingfasterTuesday, 4 June, 13
    • Solution:Use Blocking JS with CautionPlace Blocking JS at the bottomUse as little Blocking JS as possibleUse async#sellingfasterTuesday, 4 June, 13
    • Solution:Conditional JS Loading#sellingfasterTuesday, 4 June, 13
    • #4: CSS Complexity#sellingfasterTuesday, 4 June, 13
    • Solution:Nesting, Manual Review + Fixes#sellingfasterTuesday, 4 June, 13
    • • Parsing• Tree Building• Layout• Painting#5: Rendering Speed#sellingfasterTuesday, 4 June, 13
    • Solution:Repaint (Redo Layout + Paint)#sellingfasterTuesday, 4 June, 13
    • #sellingfasterAdaptive TemplatingLaunch quickly• No website rebuild required.Get to market fast and seeimmediate results.Future-proof your website• Optimize your site for allmobile devices, tablets andnew devices not yet invented.Gain control and flexibility• Build it yourself, engage in co-development or engageMobify’s experts for full service.Promote internal efficiency• Update and maintain your sitewith ease using existing HTML,CSS and JavaScript knowledge.Get all the benefits of One URL (maintain complete link integrity withoptimized SEO, seamless email and easy social media sharing) and aresponsive solution plus:Tuesday, 4 June, 13
    • #sellingfasterTuesday, 4 June, 13
    • Element Filtering• Selectively exclude elements thatyou don’t need on mobile formaximum efficiencyImage Resizing• Dramatically reduce page load timeand increase user engagement• Reduce bandwidth costs result in abetter bottom line for your businessJazzCat: JavaScriptand CSS Acceleration• Optimize your scripts andstylesheets• Improve mobile load times byreducing the number of HTTPrequests• Use the Mobify API to specify whichresources are optimizedPerformance Features#sellingfasterTuesday, 4 June, 13
    • #sellingfasterExample E-Comm Sitehttp://example-ecomm-site.comTuesday, 4 June, 13
    • Challenges + SolutionsPerformance Challenges Development Options Mobify SolutionsBandwidth & LatencyRemove unneeded resources,pre-fetching, caching headersClient-Side Adaptation,Element FilteringOversized ImagesCompress assets, multiple tiles,WebP, progressive jpegImage ResizingJavaScript: Blocking JS &ExecutionPlace Blocking JS at the bottom,use as little Blocking JS aspossible,conditional JS loadingJazzCat (JS Optimization)CSS ComplexityLESS, Sass, nesting,manual review and fixesJazzCat (CSS Optimization)Browser Render OperationsParsing, tree building,layout and paintingClient-Side Adaptation#sellingfasterTuesday, 4 June, 13
    • MOBILEPERFORMANCEAND CDNs(more than just back-end optimization)Tuesday, 4 June, 13
    • 1. Bandwidth + Latency2. Oversized or Poorly Compressed Images3. JavaScript: Blocking JS + Execution4. CSS Complexity5. Rendering SpeedTop FiveMobile Performance Offenders#sellingfasterTuesday, 4 June, 13
    • It starts with optimizing connectivity for latentheavy mobile networks!#sellingfasterSource: Building Faster Websites presentation by Ilya GrigorikTuesday, 4 June, 13
    • The Bandwidth + Latency Solutions#sellingfasterDNS LookupSocket ConnectLooking at the first part of the problemTuesday, 4 June, 13
    • DNS Pre-fetching#sellingfasterBingGoogleTuesday, 4 June, 13
    • SSL Performance#sellingfasterTuesday, 4 June, 13
    • TCP fast-start and packet sizing#sellingfaster>50% improvement just in connection setup-savings!!>At 2 round trips, 58KB vs 4KBTCP WinRTTsTuesday, 4 June, 13
    • Optimizing connectivity for latent heavy mobilenetworks!#sellingfasterHTTP RequestContent Download1. Resource pre-fetching• The difference between serving from cache vs.fetching from your origin.• 50ms vs 200ms X # of objects on your pageTuesday, 4 June, 13
    • #sellingfaster3. Device / Screen specificadaptation• Taking a more aggressive approach tooptimizations• Adaptive bit-rate image optimizations2. Deliver less bytes in a smart way• Compress and/or transcode Images• Inline Images• Lazy Load Images, below the fold intelligenceOversized or Poorly Compressed Image SolutionsTuesday, 4 June, 13
    • #sellingfasterThe BadThe Goodhttp://blog.patrickmeenan.com/2010/06/avoid-inline-javascript-sandwich.htmlBlocking javascript is very badTuesday, 4 June, 13
    • Solution:Defer with automationUse Async if you or automateit#sellingfasterTuesday, 4 June, 13
    • Paint your page faster by prioritizing critical CSS#sellingfasterTuesday, 4 June, 13
    • Solution#sellingfasterPer browser/device, figure out onlywhat’s needed to render the page andprioritize that first.Style the page without fetching external resources!Tuesday, 4 June, 13
    • Solution to rendering speed:EdgeIntelligence Suite#sellingfaster1. EdgeOptimizer2. Rules Engine3. Edge Content Construction (Lua)Tuesday, 4 June, 13
    • Edge Optimizer: Automated FEO on the edge#sellingfasterImplementation of Google PageSpeedat the edge(Google PageSpeed: set of best practices focused on reducing pageload time.)Tuesday, 4 June, 13
    • Rules Engine#sellingfaster• Device specific caching• Conditional actions at the edge• Cache Non-200 responses• Header inspection and manipulation• URL rewriting and redirectionCaching and delivery rulesTuesday, 4 June, 13
    • Edge Content Construction#sellingfasterPerform critical processes at the edge, e.g.:• A/B testing• Re-routing and re-targeting• Edge executed logicLUA proxy origin response rewritingAllows content to be rewritten before cominginto cache.Tuesday, 4 June, 13
    • #sellingfaster• Rules Engine 3.0• POST Acceleration Technology• DNS• SPDY• WURFL• Lua Async IOEdgeCast RoadmapTuesday, 4 June, 13
    • CDNIMPLEMENTATIONBEST PRACTICESTuesday, 4 June, 13
    • #sellingfaster• If your CDN isn’t performance focused first, pick adifferent CDN• Don’t let any CDN tell you that varying your content is abad idea. Just be smart about it• Cache your redirects!• If your CDN supports it, MOVE YOUR LOGIC TO THEEDGE• DNS matters, don’t let any CDN tell you otherwise. Callthem on itSelecting the right CDN for youTuesday, 4 June, 13
    • #sellingfaster• Cache your redirects!• Always have a content freshness header, cache everythingpossible 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 thetechnology is legitimate. Test it out and see if it makes sensefor youFine-tuning your CDNTuesday, 4 June, 13
    • Any Questions?Igor @mobify | Hayes @edgecast#sellingfasterTuesday, 4 June, 13
    • On Responsive and One Webhttp://alistapart.com/article/responsive-web-designhttp://www.w3.org/TR/mobile-bp/#OneWebOn Performancehttps://developers.google.com/speed/http://www.igvita.com/ (Gregorik Ilya, Google Performance team)http://stevesouders.com/ (Author of "High Performance Websites, Oreilly & Associates" ) (author of YSlow)http://css-tricks.com/which-responsive-images-solution-should-you-use/MOREhttp://www.google.com/think/perspectives/make-website-work-across-multiple-devices.htmlhttp://mobify.comhttp://edgecast.comRESOURCES#sellingfasterTuesday, 4 June, 13