Yottaa State of Web Performance Optimization Group Webinar
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Yottaa State of Web Performance Optimization Group Webinar

on

  • 386 views

 

Statistics

Views

Total Views
386
Views on SlideShare
386
Embed Views
0

Actions

Likes
0
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • 1998: “The Bottleneck: Delivery of the Bits”
  • 1998: “The Bottleneck: Delivery of the Bits”

Yottaa State of Web Performance Optimization Group Webinar Presentation Transcript

  • 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
  • 21. yottaa.com/sign-up-for-a-11-discussion-of-yottaa 25