Yottaa State of Web Performance Optimization Group Webinar
Download as PPTX, PDF1 like721 views
Yottaa provides web and mobile experience acceleration to ensure businesses have a great online experience on any device or browser. It has powered over $1.4 billion in online business for clients. Yottaa's technology intelligently sequences application delivery to reduce page load times through techniques like instant partial page delivery, optimized content ordering, and parallel content downloads. This improves key metrics like traffic, conversions, and customer satisfaction. Yottaa takes a holistic approach through server-side optimizations, middle mile optimizations, last mile optimizations, and browser/device optimizations to provide end-to-end web performance.
Yottaa State of Web Performance Optimization Group Webinar
- 1. © 2013 Yottaa, Inc. All Rights Reserved.www.yottaa.com Yottaa, Inc. 160 Federal Street Boston, MA 02110 September 25, 2013 Yottaa: Accelerate Mobile and Web Businesses Ensure A Great Online Experience for Any Business, On Any Device, Any Browser, Anywhere
- 2. Introduction to Yottaa 2 Yottaa - Mobile and Web Experience Acceleration: Ensure A Great Online Experience for Any Business, Any Device, Anywhere Yottaa powers $1.4B/year online business for PCMall (NASDAQ: PCM), an E-commerce leader that selected Yottaa after an extensive evaluation A global giant in chemical and healthcare, uses Yottaa to power many of its global brands UK government uses Yottaa to optimize and protect its website and mobile experiences
- 3. Business Impact of Performance Source: 4.3%in REVENUE 2seconds slower Pages that were… DROP Source: 2.2seconds improvement in landing page speed INCREASED DOWNLOADS 15.4% by 60% faster INCREASED DONATION CONVERSION Making Barack Obama’s website 14%Source: Barack Obama website Source: 1 second delay causes an 11%in PAGE VIEWS 1 second delay causes a 7%in CONVERSIONS 1 second delay causes a 16%in CUSTOMER SATISFACTION DROP DROP DROP
- 4. Growth of Webpage Footprint and Number of Requests (1995 to 2012) (Sources: Demenech 2007, Gomez 2008, Charzinski 2010, Souders 2012) The Paradigm Has Shifted… 5 Ajax/HTML5 becomes mainstream Explosive Growth of Browsers and Devices Now (2010+) Then (2000-2007)
- 5. Yottaa Intelligently Sequences App Delivery Sources: Yahoo Exceptional Performance, Google 2012, Yottaa/HubSpot Study Geo latency: 2-3 sec TCP latency: 1 sec Back-end latency Page content: 1-2sec Page request chattiness Geo latency: 1-2 sec TCP latency: 1 sec Back-end latency Page content: 1-2sec Page request chattiness Back-end latency Geo latency: 3-5 sec TCP latency: 1-2 sec Page content: 4-6 sec Page request chattiness 2-3 sec MidmileLastmileBrowser Then (1998-2010) Now (2012 and Beyond) Optimize: transform web content for browsers, devices and CDNs Back-end latency Geographic latency: 3-6 sec TCP latency: 1-2 sec Page content: 1-2sec Page request chattiness MidmileLastmileBrowser Back-end latency Geo latency: 2-3 sec TCP latency: 1-2 sec Page content: 1-2sec Page request chattiness DSA: Tune TCP/IP to accelerate dynamic content Delivery: CDNs such as Akamai Transformation: Yottaa CDN: Cache static content to reduce delivery latency Avg page size: 90KB Request/page: 20 Domains/page: 1 Page load time: 7.5 sec Avg page size: 1MB+ Request/page: 100+ Domains/page: 14 Page load time: 6.8 sec, 10.2sec (m) Rewrite content Reduce requests Federate CDN InstantON
- 6. Reduce Web Application Payload • Larger sites take longer to load • Modern web components add weight – Fonts – Images – Audio – Video 8 0 1000 2000 3000 4000 5000 6000 7000 8000 9000 < 300 KB 300-600 KB 600-900 KB 900-1200 KB 1200-1500 KB 1500-1800 KB Load Time by Page Weight
- 7. Base resolution (300 x 200 px) Retina/HD resolution (600 x 400 px) Jpg compression 80 / 21 kb Jpg compression 31 / 16 kb (75% of base) Page Weight vs. User Experience Image Resolution: Can you spot the difference? 9
- 8. What is Minification? Popular sites gain 10% - 30% performance by minifying code 10 Standard Code <p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li></ul> Minified, Optimized Code
- 9. Case Study Challenge: 1.4 MB page, heaviest 20% Goal: Increase traffic & conversions, incl. mobile Solution: Reduce Payload & Requests 41% Results: 53% faster loads, increased traffic 100% “With Yottaa turned on, the Big Train site just flies on mobile devices.” Jim Wendt, eCommerce Marketing Manager 11 Read more: http://bit.ly/18rHt1N
- 10. Reduce Asset Requests • Combine files and control sprawl • Modern web applications rely upon 3rd parties – Tracking Tags – Fonts – Images – Audio – Video 12 0 2000 4000 6000 8000 10000 12000 14000 < 10 10-20 21-30 31-40 41-50 > 50 Load Time by JavaScript Request Count
- 11. How Can You Reduce Requests? • Minimize DNS lookups • Minimize redirects • Combine external JavaScript • Combine external CSS • Combine images using CSS sprites • Optimize the order of styles and scripts • Avoid document.write • Avoid CSS @import • Prefer asynchronous resources • Parallelize downloads across hostnames 13
- 12. CSS Sprites and Calling Images Include multiple images in a page using only a single HTTP request with no JavaScript 14 Example Sprite w/Reference Grid Mobile Benchmark: DataURI vs. Sprite
- 13. Making Due: CDN, ADN and FEO Client Web Server Server page Processing World Wide Web 1. Client requests a dynamic page 2. Server returns the Dynamic page Page Rendering and Processing
- 14. InstantON™: A Breakthrough Innovation Yottaa InstantON™ accelerates dynamic applications in ways never possible before: Client Web Server Network 2b. Yottaa requests the page from the web server 2a. Yottaa immediately returns a partial page from its cache 1. Client requests a dynamic page 3a. Server returns a new page3b. Returns page delta and client processing instructions Page Rendering and Processing Server page Processing Page Processing Partial Page Delivery Page Delta
- 15. E-Commerce Case Study 17 $1.4B e-commerce company (NASDAQ: PCM), selected Yottaa after an extensive evaluation of many vendors OnSale.com (with Akamai) OnSale.com (with Yottaa) 35% Loads Faster by: 62% Accelerates Start Render by: Reduces Requests by: 80% Offloads Server Load by:With Yottaa: WWW.ONSALE.COM 68%
- 16. Real-world Example 18 Challenge: Slow 3rd party content loading Goal: Improve user experience, site speed Solution: Sequence social content rendering Results: 53% faster loadResults: 53% faster load
- 17. Real-world Example 19 Challenge: Slow page rendering impacts conversions Goal: Improve page load time, engage more users Solution: Optimize images, sequence content Results: 4x faster load!Results: 4X faster load
- 18. Yottaa’s Unique Application Sequencing Intelligent application optimization & delivery takes your site further than simple CDN acceleration • Server Side Optimizations – InstantONTM technology accelerates page rendering – Dynamically sequences static and dynamic content delivery • Middle Mile Optimizations – Hybrid, federated CDN – Integrate with existing CDN solution or migrate fully to Yottaa • Last Mile Optimizations – Reduce payload and requests, parallelize processing for all content – Dynamic compression and responsive image support • Browser & Device Optimizations – RapidTagTM display sequencer renders above-the-fold content instantly – Transformer technology modifies page content for optimal rendering 21
- 19. Presence Intelligence™ Technology End-to-End Optimization Infrastructure Awareness Geographic Presence Last Mile Network Presence Device & Browser Presence Data Center Middle Mile Last Mile Front End In-page Visibility User Interactivity Application Streaming InstantON™ Transformer Responsive Image RapidTag Display Sequencer CDN Federation IP Anycast DNS & Edge Federated Delivery (Real-time CDN Balancing) Autoprovisioning & Management Cloud Firewall Traffic Analytics DDOS Protection Origin Shield Front End Optimization Reduce Requests Reduce Payload Increase Parallel Processing Deep Insight Real Browser Monitoring Mobile Monitoring Key Pages & Transactions CMS Platform Integration eCommerce Platform Integration
- 20. In Summary • Rule of thumb: Less is more • Take a measured approach – Plan – Develop – Test – Prioritize – Optimize – Iterate 24