Marrying CDNs with Front-End Optimization

14,432 views

Published on

Slide deck from Strangeloop president Joshua Bixby's presentation at the 2012 Content Delivery Summit.

Many content owners are already using a content delivery network (CDN) to cache content closer to their visitors, but CDNs don't reduce the number of requests required to render each page, and they have no impact on browser efficiency. Front-end optimization (FEO) picks up where CDNs leave off, transforming the content itself so that it renders as quickly as possible in the browser.

In this presentation, attendees will see real-world examples of how leading e-commerce sites have combined CDN and FEO forces to reach new levels of performance for content-rich pages. Get real numbers on how quickly content-rich sites loaded pre-acceleration, then with just a CDN, then with a combined CDN/FEO solution.

Published in: Technology, Art & Photos
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,432
On SlideShare
0
From Embeds
0
Number of Embeds
11,180
Actions
Shares
0
Downloads
133
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
  • Organizations that recognize the need to take their website’s performance to the next level need to change their basic assumption about acceleration. This change is not a 180-degree turn, however – it’s an evolutionary change. Delivery-based solutions such as CDNs and network devices still form a solid foundation for a total acceleration solution. Transformation-based solutions complement this foundation.Delivery: “I will deliver what the server gives me as efficiently as possible to the browser.”Transformation: “I will transform what the server gives me, and optimize it for the user’s browser.”
  • Here we see three waterfall graphs showing how web page objects are delivered from the server to the browser.OriginalThis is an unaccelerated site, with 63 objects making 63 roundtrips between server and browser. The total page load time is 9.5 seconds.DeliveryThis graph shows how a delivery solution – comprised of a content delivery network (CDN) and an application delivery controller (ADC) – shortened these roundtrips by bringing content closer to the user’s browser. There were still 63 roundtrips, but the total page load time was 5.7 seconds.TransformationThis graph shows how Strangeloop worked in conjunction with the CDN and ADC to not just shorten the roundtrips, but reduce the number of roundtrips required – from 63 to just 9. The result: The same page loads in just 2.1 seconds. It is important to remember that 2 seconds is the goal that every site should be aiming for, based on current user expectations. It’s also worth remembering that only one company out of the Fortune 500 actually meets this standard.
  • We’ll use it to describe where performance pain points are, but that doesn’t mean the page actually has these problems
  • Despite already using a CDN, AutoAnything knew they could be even faster. The site’s home page took up to 10 seconds to load.Biggest problem was page bloat: too many objects.Strangeloop FEO cut their average page load in half.
  • Twitter @joshuabixby
  • Marrying CDNs with Front-End Optimization

    1. 1. Marrying CDNs with Front-End Optimization for Maximum Acceleration Joshua Bixby 2012 Content Delivery Summit
    2. 2. Agenda Why speed matters Brief history of time saving Case studies FEO in the CDN Key areas of integration Market growth© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2
    3. 3. Speed = Value“250ms is close to the magic number now for competitive advantage on the Web.” Harry Shum, Microsoft INCREASED REVENUES INCREASED PRODUCTIVITY  10% increase in revenue (for every 1s of  2% increase in improvement) productivity  12% increase in revenue (by improving page load  100% increase in speed from 6s to 1.2s) productivity (when application sped up by 2.7s)  5% increase in revenue (for every 2s of improvement)  Fewer errors, a faster  50% more page views for engineering cycle & fastest visitors enhanced data integrity (relative to slowest)  9% more traffic  25% increase in (for every 400 ms of productivity improvement)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 3
    4. 4. Brief history of time saving1993 1995 1996 1998 1999 2000 2002 2003 2004 2006 2007 2008 2009 2010 2011 Infrastructure Delivery Transformation © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 4
    5. 5. Delivery vs Transformation Original Delivery Transformation (FEO) 9.5 seconds 5.7 seconds 2.1 seconds 63 roundtrips 63 roundtrips 9 roundtrips© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 5
    6. 6. Case study: FEO in action© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 6
    7. 7. Before: Performance summary© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7
    8. 8. Waterfall First View Repeat View© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 8
    9. 9. Before: Performance snapshot© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 9
    10. 10. Step 1: Turn on compression and keep alives ~17.8 sec ~10.5 sec© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 10
    11. 11. How did we do? Original +KA+Comp Improvement First View 52% 40% 34%© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 11
    12. 12. Step 2: Implement a CDN Problem: Time to first byte© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 12
    13. 13. Before and after ~10.5 sec ~8.3 sec© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 13
    14. 14. TTFB savings Per object TTFB savings of ~50%© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 14
    15. 15. Before and after CDN: Video http://youtu.be/BR5hO5rL8lE© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 15
    16. 16. We can do better Still too many roundtrips Still too many bytes Not fast enough!© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 16
    17. 17. Step 3: Adding FEO Reduce roundtrips Combine images Combine JavaScript Combine CSS Re-order requests Reduce payload even more Minify CSS and JavaScript Add image compression Increase concurrency Add a couple of domains to the mix© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 17
    18. 18. How did we do? +CDN 81 +FEO 11 Improvement First View 19% 54% 45% Seconds Gained 0.5 sec 4.6 sec© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 18
    19. 19. Before and after: The final, fastest version http://youtu.be/IPn0T1UacIA© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 19
    20. 20. The proof is in the numbers© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 20
    21. 21. © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 21
    22. 22. “There’s no single magic bullet for making pages faster.” Adding FEO to CDN/DSA resulted in ~45% faster page load across all browsers© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 22
    23. 23. FEO in the CDN© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 23
    24. 24. FEO lineage Real-time FEO One page at a time No offline process (e.g., Pagespeed, Aptimize) Real-time FEO with advanced learning Offline learning engine to enhance the real-time engine (e.g., Strangeloop, Blaze.io)© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 24
    25. 25. FEO in the CDN© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 25
    26. 26. FEO in the CDN© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 26
    27. 27. Key areas of integration© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 27
    28. 28. Measurement This IS NOT where your user is. STOP testing from here!© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 28
    29. 29. Mobile© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 29
    30. 30. High growth Rapid adoption 5 of top 10 internet retailers have an automated FEO strategy and plan to implement it in 2012. Speed FEO-accelerated sites are 30-50% faster. 200+ top sites have been running automated FEO Stability for 2+ years. CDNs are increasing their MRR with customers High margin by 40-50% on top of existing acceleration solutions like DSA. Rapid innovation Significant innovation in mobile and desktop acceleration is coming in 2012.© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 30
    31. 31. © 2012 Strangeloop Networks 2011 Strangeloop. Faster Websites. Automatically. 31

    ×