Your SlideShare is downloading. ×
0
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Best practices to optimize commerce site performance [webinar slides]

1,001

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,001
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • At Jirafe, our goal is to help online retailers understand what makes them money, where they’re losing money and how to increase their revenue by providing intelligence around their marketing and business data.I’m Jesse Middleton:Director of Business Development at JirafePreviously: Founded Backstory and WeWork LabsDirector of Information Technology at LivePerson (NASDAQ: LPSN)
  • In other words, our software is designed to:-Help merchants understand the information surrounding their businesses-Work with their existing infrastructure and platforms that they already have In place (including Magento, hybris, PrestaShop, Spree, Drupal and more)
  • -And to provide intelligence and actionable steps to improve marketing and merchandising decision every single day.-This includes: -Web analytics -Ecommerce analytics -Actionable knowledge -Automation (where appropriate) to leave more time for managing the rest of the business-Combine the data from both web analytics (including visits, visitor, referral and bounce pages) and ecommerce data (including customer histories, returned and cancelled orders and abandoned carts).-Both sets of data combined paint the most valid, useful picture of a merchant’s entire business-In addition, our product is designed to be flexible in every way: -API for data and order information that comes direct from the merchant’s backend data store -Multiple users can access Jirafe’s powerful intelligence dashboard -A frontend API for customization of the dashboard and the advanced reports
  • While most businesses are stuck emailing around each month, pulling together numerous spreadsheets and pouring over them with a fine-toothed comb…
  • Jirafe provides a simple, elegant interface for understanding and improving a merchant’s business.
  • By combining the data from the frontend (JavaScript tags) and the backend data store (direct access via our client libraries including PHP, Java and Ruby), merchants get a complete, 100% accurate view, of their orders, returns, revenue and customer data.
  • -Installed on over 6000 merchant sites around the world including: -Skype -Brooks Brothers -Warner Entertainment -Jennyfer-Supported out of the box by the best ecommerce platforms: -Drupal Commerce -Easy Web Store -hybris -Magento -PrestaShop -Spree
  • Transcript

    • 1. 11 Best Practices to Optimize Commerce Site Performance Bob Buffone CTO & Co-Founder, Yottaa, Inc. Ilya Mirman VP Marketing, Yottaa, Inc.Yottaa Inc.http://www.yottaa.com© 2012 Yottaa Inc. All Rights Reserved.
    • 2. Agenda1. Does performance matter?2. Commerce web: performance challenges3. Key Metrics & reliable measurements4. Common performance bottlenecks5. Optimization techniques Bob: @rockstarapps Ilya: @IlyaMirman 2© 2012 Yottaa Inc. All Rights Reserved.
    • 3. We want to changethe way ecommerceretailers will operate in the future
    • 4. By becoming the trusted resource that merchants useeach day to manage and grow their business
    • 5. Retailers don’t need more charts and graphs. They needreal intelligence that drives revenue.
    • 6. We Capture 100% of the Data And Have 100% Accuracy• Exact, not approximate data• Account for returns, exchanges and cancelled orders• Access to all ecommerce data• Historical orders• Customer database
    • 7. Over 6000 merchants trust us to help them build their online businesses Across many of the most powerful ecommerce platforms
    • 8. Agenda1. Does performance matter?2. Commerce web: performance challenges3. Key Metrics & reliable measurements4. Common performance bottlenecks5. Optimization techniques Bob: @rockstarapps Ilya: @IlyaMirman 11© 2012 Yottaa Inc. All Rights Reserved.
    • 9. User Experience:Does it Matter?© 2012 Yottaa Inc. All Rights Reserved. © 2011 Yottaa Inc. All Rights Reserved. 12
    • 10. © 2012 Yottaa Inc. All Rights Reserved.
    • 11. The Impact of Speed Average Impact of One Second Delay in Response Time Customer Page Views Conversions Satisfaction 0% -2% -4% -6% -7% -8% -10% -11% -12% -14% • Lost revenues -16% -16% • Brand damage -18% • More support calls • Increase costsSource: Why Web Performance Matters – Gomez, Inc. / Aberdeen Group© 2012 Yottaa Inc. All Rights Reserved.
    • 12. Impact of Page Load Delay…© 2012 Yottaa Inc. All Rights Reserved.
    • 13. Today’s Performance Challengesfor Commerce Sites© 2012 Yottaa Inc. All Rights Reserved. © 2011 Yottaa Inc. All Rights Reserved. 16
    • 14. Delivering a Good Experience is Challenging Data Major Last CDNs Geography Browsers UsersCenters ISPs Mile 3rd Party Content Performance Uncertainty 100+ factors can create issues for end-users© 2012 Yottaa Inc. All Rights Reserved. 17
    • 15. The Web Has Evolved…Webpages yesterday = Text + Webpages today = highly distributed applicationsImages from the same domain that execute in a browser Most modern Web pages are complex creations -The CNN home page, for instance, is built by the browser from 53 static images, 39 dynamic images, 3 Flash files, 30 JavaScript files, 29 HTML files and 7 CSS files - to be loaded from 18 domains − Jeff Bezos on Amazon Silk 80%+ web performance is on the front end − Steve Souders, Google Web Performance expert Yesterday: Web client = IE Today web client > 4 browsers + smart phones + tablets Today’s bottleneck: the execution of this distributed Yesterday’s bottleneck: application (webpage) in a browser that spans The delivery of the bits across 10+ domains© 2012 Yottaa Inc. All Rights Reserved. 18
    • 16. Commerce Platforms Site Performance: • Powerful, flexible, Magento vs. Avg Web Site Time-to-Interact extensible 10.0 9.0 • If not managed 8.0 >90% Slower properly, challenges 7.0 Time-to-Interact (sec) with: 6.0 5.0 – Performance 4.0 – Scaling 3.0 2.0 – Visibility 1.0 0 Avg Web Site Avg Magento Site (Sample of (Sample of 3,500 Sites) 2,000 Sites)© 2012 Yottaa Inc. All Rights Reserved.
    • 17. Commerce Sites: Optimization Opportunities • Server-side Tuning – Database and server configuration, PHP acceleration, compiling options, add hardware, etc. • But plenty of performance gains left on the table through: – Front-end Optimization This – Optimized Traffic Routing Webinar – Edge Caching and Delivery of Content© 2012 Yottaa Inc. All Rights Reserved.
    • 18. nytimes.com – 91.2% Page Execution www.nytimes.com loads in 5.16 Seconds: • Page delivery = 0.456/5.16= 8.8% • Page execution = 91.2%Source: http://www.yottaa.com/url/www-nytimes-com-4bdad0b4425bdb0c0300025e/page_load© 2012 Yottaa Inc. All Rights Reserved.
    • 19. Best Practice Establish a Performance Baseline #1 “If you cannot measure it, you cannot improve it.” Lord Kelvin© 2012 Yottaa Inc. All Rights Reserved.
    • 20. Best Practice #1 Front End User Experience© 2012 Yottaa Inc. All Rights Reserved.
    • 21. Characterizing User Experience© 2012 Yottaa Inc. All Rights Reserved.
    • 22. Front End Metrics: A Slice of the Web… 50th percentile 80th percentile 95th percentileTime to Title (msec) 1,259 2,368 4,647Time to Render (msec) 2,420 4,071 7,160Time to Display (msec) 5,168 8,780 15,254Time to Interact (msec) 6,263 10,643 18,494 500 Time to Interact 100% 450 90% 400 Frequency 80% 350 Cumulative % 70% 300 60% 250 50% 200 40% 150 30% 100 20% 50 10% 0 0% Time to Interact (sec.) Source: Yottaa measurement of 3,500 websites, Aug. 2012© 2012 Yottaa Inc. All Rights Reserved.
    • 23. Visualizing the User ExperiencePage loading screenshots Video of page loading sequence© 2012 Yottaa Inc. All Rights Reserved.
    • 24. FREE TOOL: websitetest.com© 2012 Yottaa Inc. All Rights Reserved.
    • 25. Visualizing the User ExperienceYottaa’s Interactive Waterfall© 2012 Yottaa Inc. All Rights Reserved.
    • 26. Statistically Significant Testing: Why bother? • Everyone else is not 10 feet away from your server  • The internet is a dynamic beast • If you want confidence in your decisions, you need confidence in your measurements© 2012 Yottaa Inc. All Rights Reserved.
    • 27. Variability Across the World Example: Amazon.com© 2012 Yottaa Inc. All Rights Reserved.
    • 28. Variability in Connectivity Connectivity makes a big difference. Think about your experience on your phone compared to your office.© 2012 Yottaa Inc. All Rights Reserved.
    • 29. Variability in Browser Browser differences can create surprising differences • Connection Management • JavaScript Engines • Rendering Speed© 2012 Yottaa Inc. All Rights Reserved.
    • 30. Back End Performance© 2012 Yottaa Inc. All Rights Reserved.
    • 31. Back End Performance Metrics • DNS time (~60 msec): – The length of time the browser required to resolve host name(s) to IP addresses • Connect time (~140 msec): – The length of time spent creating the initial connection to the site • Waiting time (~400 msec): – The length of time spent waiting for the server to begin sending data. • Time to First byte (~500 msec): – The length of time before the first byte of data is received from the server. • Time to last byte (~700 msec): – The length of time before the last byte of the initial request is delivered.© 2012 Yottaa Inc. All Rights Reserved.
    • 32. A Sample of the Web… 50th percentile 80th percentile 95th percentileDNS Time (msec) 60 149 413Connect Time (msec) 144 188 227Time to First Byte (msec) 533 1,090 2,418Time to Last Byte (msec) 721 1,412 3,105 Source: Yottaa measurement of 3,500 websites, Aug. 2012© 2012 Yottaa Inc. All Rights Reserved.
    • 33. Example: Bad DNS Lookup Times • Reasons – Bad DNS Provider (Not use IP Anycast) – Misconfigured TTL or Records • Finding the problem – Continuous Monitoring – Online DNS Tools (www.dnsstuff.com/) • Fixing it – Choose a good DNS Provider© 2012 Yottaa Inc. All Rights Reserved.
    • 34. Content Size & Complexity© 2012 Yottaa Inc. All Rights Reserved.
    • 35. Summary Metrics: A Sample of the Web… 50th percentile 80th percentile 95th percentileDomains 6 17 33Asset Count 47 84 152Asset Weight (Bytes) 690,779 1,557,812 3,393,192JS Count 8 19 33JS Size (Bytes) 119,378 346,852 586,442CSS Count 3 8 16CSS Size (Bytes) 18,134 60,265 120,000Image Count 25 48 87Image Size (Bytes) 318,788 895,948 2,056,237 Source: Yottaa measurement of 3,500 websites, Aug. 2012© 2012 Yottaa Inc. All Rights Reserved.
    • 36. Continuous Monitoring Best Practice #1© 2012 Yottaa Inc. All Rights Reserved.
    • 37. Continuous Monitoring Best Practice #1© 2012 Yottaa Inc. All Rights Reserved.
    • 38. THINGS THAT MAKE YOUR WEBSITE SLOW© 2012 Yottaa Inc. All Rights Reserved. © 2011 Yottaa Inc. All Rights Reserved. 41
    • 39. Lots of Requests • Product owners want rich websites – Rich in User Experience – Rich in Visual Presentation • Achieving richness requires more resources to be downloaded to the client – CSS – HTML – JavaScript – Images© 2012 Yottaa Inc. All Rights Reserved.
    • 40. Content Breakdown© 2012 Yottaa Inc. All Rights Reserved.
    • 41. More Requests  Slower Performance© 2012 Yottaa Inc. All Rights Reserved.
    • 42. Source code of the Website© 2012 Yottaa Inc. All Rights Reserved.
    • 43. Combine Scripts & CSS Best Practice #2 to Reduce Requests Before optimization we have 26 JS files! After optimization we have one JS file that provides a huge performance benefit© 2012 Yottaa Inc. All Rights Reserved.
    • 44. Combine Images with Sprites Best Practice #3 to Reduce Requests .arrowbutton{ display: block; height: 23px; line-height: 22px; font-size: 12px; width: 96px; background: url("<%= image_path(icons/ico.png) %>") no-repeat -49px -8px ;color: #FFFFFF;cursor: pointer; }© 2012 Yottaa Inc. All Rights Reserved.
    • 45. Sprites in Action… CSS sprite Yottaa homepage that leverages the sprite© 2012 Yottaa Inc. All Rights Reserved.
    • 46. Employ Data URIs Best Practice #4 to Reduce Requests Data URI (Uniform Resource Identifier) scheme: method for including data in-line in web pages – allows normally separate elements (e.g., images, style sheets) to be fetched in a single HTTP request rather than multiple.© 2012 Yottaa Inc. All Rights Reserved.
    • 47. Large Resources Ways to make your site slow: • Many of the resources that you need to load can be made fatter than required – HTML, CSS, JavaScript – Add lots of comments and white space – Images • Use images that are larger than displayed on the webpage • Always use the highest quality settings • Turn off gzip compression on your server© 2012 Yottaa Inc. All Rights Reserved.
    • 48. Large Assets  Slower Performance© 2012 Yottaa Inc. All Rights Reserved.
    • 49. Large assets take longer to download© 2012 Yottaa Inc. All Rights Reserved.
    • 50. Large assets take longer to download 776KB© 2012 Yottaa Inc. All Rights Reserved.
    • 51. Use Lossless Image Compression Best Practice #7 to Reduce Asset Weight 459 KB 400 KB© 2012 Yottaa Inc. All Rights Reserved.
    • 52. Use Lossy Image Compression Best Practice #8 to Reduce Asset Weight 459 KB 98 KB© 2012 Yottaa Inc. All Rights Reserved.
    • 53. Large assets take longer to download© 2012 Yottaa Inc. All Rights Reserved.
    • 54. Best Practice Gzip to Reduce Asset Weight #5© 2012 Yottaa Inc. All Rights Reserved.
    • 55. Minify Scripts Best Practice #6 to Reduce Weight //Get the name of the person var full_name = “Bob Buffone”; Browsers don’t //Now make it awesome care about full_name += “ is awesome”; //Everyone must know this fact comments and $(document).ready(function(){ easy to read code. alert(full_name); }); var n=“Bob Buffone”;n+=“ is awesome”;$(document).read(function(){alert(full_name);});© 2012 Yottaa Inc. All Rights Reserved.
    • 56. Problem: Serialization (e.g., 3rd Party Plugins) • Bloggers love to make their websites slow using plugins. – Twitter, Facebook, Google Plus, LinkedIn – Photo plugins… • Not utilizing asynchronous loading of 3rd party resources.© 2012 Yottaa Inc. All Rights Reserved.
    • 57. Marketing Loves Social Social adds LOTS of resources -> 86 JavaScript, images and CSS.© 2012 Yottaa Inc. All Rights Reserved.
    • 58. One Facebook Image…© 2012 Yottaa Inc. All Rights Reserved.
    • 59. Best Practice Load 3rd Party Assets Asynchronously #9 <script src=“connect.facebook.net/en_US/all.js”></script>© 2012 Yottaa Inc. All Rights Reserved.
    • 60. Use Domain Sharding for Best Practice #10 Parallel Processing 3 domains for asset loading© 2012 Yottaa Inc. All Rights Reserved.
    • 61. Use Intelligent Script Loaders Best Practice #11 for Parallel Processing© 2012 Yottaa Inc. All Rights Reserved.
    • 62. Summary: Problems & Resolutions Issue Resolution Lots of Requests Reduce # of Requests: • Combine Scripts and Images • Combine images with Sprites • Employ data URIs Large Assets Reduce Asset Weight: • Use Gzip • Minify Scripts • Use Lossy and Lossless Image Compression Serialization Parallel Processing: •Load 3rd Party Assets Asynchronously •Use Domain Sharding •Use Intelligent Script Loaders© 2012 Yottaa Inc. All Rights Reserved.
    • 63. Web Site Challenges • Slow web pages • Unacceptable user experience Performance • Reduced site conversions • Poor search engine rankings • Site outages and page errors Availability • Inability to serve users across geographies, devices, browsers, platforms • Inability to handle high traffic volume, serve users, Scalability process transactions • An overloaded site infrastructure. • Vulnerability to threats from bots, hackers and Security attacks.© 2012 Yottaa Inc. All Rights Reserved. 66
    • 64. The Yottaa Web Optimization PlatformFeatures: Benefits: Features: Benefits:• Content caching • Reduce load on • Global IP anycast • High performance and edge delivery your infrastructure • Globally distributed DNS service• IP Anycast routing • Reduce network data centers • Enterprise-grade• 20+ edge locations latency • Globally redirects traffic management• Integrates with • Improve user request to closest • DNS Shield any CDN experience geographic server for protectionFeatures: Features:• Payload reduction • Traffic blocking and throttling• Request reduction • Resource and bot protection• Parallel processing • Traffic analytics WebBenefits: Benefits: Optimization• Improve user experience • Improve availability, resiliency Network and security• Increase conversions • “Protection as a Service”• Increase search engine rankings • Elastic and adaptiveFeatures: Benefits: Benefits: Features: • See what your• End user experience • Ensure end user • Multivariate testing users see monitoring experience and SLA (locations, browsers, • Eliminate• Intuitive data analysis • Problem detection connection speeds, time) sampling error and visualizations and timely response • Interactive visualizations: • Deep insights• Problem detection, • Actionable intelligence page loading sequence, for tuning site alerting and diagnosis waterfall, assets) performance © 2012 Yottaa Inc. All Rights Reserved.
    • 65. Thank You for your time! yottaa.com© 2012 Yottaa Inc. All Rights Reserved. 68

    ×