SlideShare a Scribd company logo
1 of 31
Download to read offline
Marrying CDNs with Front-End Optimization
                for Maximum Acceleration

                               Joshua Bixby
                2012 Content Delivery Summit
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
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
Brief history of time saving




1993    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
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
Case study: FEO in action




© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   6
Before: Performance summary




© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   7
Waterfall
                              First View                                              Repeat View




© 2012 Strangeloop Networks                Strangeloop. Faster Websites. Automatically.             8
Before: Performance snapshot




© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   9
Step 1: Turn on compression and keep alives




                     ~17.8 sec                                                  ~10.5 sec




© 2012 Strangeloop Networks      Strangeloop. Faster Websites. Automatically.               10
How did we do?
     Original




    +KA+Comp




    Improvement
    First View                52%             40%                         34%




© 2012 Strangeloop Networks     Strangeloop. Faster Websites. Automatically.    11
Step 2: Implement a CDN
        Problem: Time to first byte




© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   12
Before and after




                       ~10.5 sec                                                  ~8.3 sec




© 2012 Strangeloop Networks        Strangeloop. Faster Websites. Automatically.              13
TTFB savings




                              Per object TTFB savings
                                      of ~50%




© 2012 Strangeloop Networks      Strangeloop. Faster Websites. Automatically.   14
Before and after CDN: Video




                              http://youtu.be/BR5hO5rL8lE




© 2012 Strangeloop Networks            Strangeloop. Faster Websites. Automatically.   15
We can do better

                                     Still too many roundtrips




                                                          Still too many bytes



                              Not fast enough!


© 2012 Strangeloop Networks        Strangeloop. Faster Websites. Automatically.   16
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
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
Before and after: The final, fastest version




                              http://youtu.be/IPn0T1UacIA




© 2012 Strangeloop Networks           Strangeloop. Faster Websites. Automatically.   19
The proof is in the numbers




© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   20
© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   21
“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
FEO in the CDN




© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   23
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
FEO in the CDN




© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   25
FEO in the CDN




© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   26
Key areas of integration




© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   27
Measurement

        This IS NOT where
        your user is. STOP
        testing from here!




© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   28
Mobile




© 2012 Strangeloop Networks   Strangeloop. Faster Websites. Automatically.   29
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
© 2012 Strangeloop Networks
  2011                        Strangeloop. Faster Websites. Automatically.   31

More Related Content

Viewers also liked

Tuning the Kernel for Varnish Cache
Tuning the Kernel for Varnish CacheTuning the Kernel for Varnish Cache
Tuning the Kernel for Varnish CachePer Buer
 
Selecting and deploying automated optimization solutions
Selecting and deploying automated optimization solutionsSelecting and deploying automated optimization solutions
Selecting and deploying automated optimization solutionsPatrick Meenan
 
Front end performance optimization
Front end performance optimizationFront end performance optimization
Front end performance optimizationStevie T
 
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...Strangeloop
 
Front end optimization
Front end optimizationFront end optimization
Front end optimizationAbhishek Anand
 
Front-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPressFront-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPressdrywallbmb
 
Heavy Web Optimization: Frontend
Heavy Web Optimization: FrontendHeavy Web Optimization: Frontend
Heavy Web Optimization: FrontendVõ Duy Tuấn
 
[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스
[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스
[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스Amazon Web Services Korea
 
OTT Distribution (Over The Top)
OTT Distribution (Over The Top)OTT Distribution (Over The Top)
OTT Distribution (Over The Top)Mesclado
 
The TV Everywhere Ecosystem and how OTT Video Redefining the Landscape
The TV Everywhere Ecosystem and how OTT Video Redefining the LandscapeThe TV Everywhere Ecosystem and how OTT Video Redefining the Landscape
The TV Everywhere Ecosystem and how OTT Video Redefining the LandscapeMukul Krishna
 

Viewers also liked (14)

Tuning the Kernel for Varnish Cache
Tuning the Kernel for Varnish CacheTuning the Kernel for Varnish Cache
Tuning the Kernel for Varnish Cache
 
Selecting and deploying automated optimization solutions
Selecting and deploying automated optimization solutionsSelecting and deploying automated optimization solutions
Selecting and deploying automated optimization solutions
 
Front end performance optimization
Front end performance optimizationFront end performance optimization
Front end performance optimization
 
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...
 
Front end optimization
Front end optimizationFront end optimization
Front end optimization
 
Front-End Optimization (FEO)
Front-End Optimization (FEO)Front-End Optimization (FEO)
Front-End Optimization (FEO)
 
Front-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPressFront-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPress
 
Heavy Web Optimization: Frontend
Heavy Web Optimization: FrontendHeavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
 
[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스
[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스
[AWS에서의 미디어 및 엔터테인먼트] 클라우드에서의 브로드캐스팅 서비스
 
OTT Distribution (Over The Top)
OTT Distribution (Over The Top)OTT Distribution (Over The Top)
OTT Distribution (Over The Top)
 
The TV Everywhere Ecosystem and how OTT Video Redefining the Landscape
The TV Everywhere Ecosystem and how OTT Video Redefining the LandscapeThe TV Everywhere Ecosystem and how OTT Video Redefining the Landscape
The TV Everywhere Ecosystem and how OTT Video Redefining the Landscape
 
Varnishes
VarnishesVarnishes
Varnishes
 
Media Workloads on AWS
Media Workloads on AWSMedia Workloads on AWS
Media Workloads on AWS
 
Image processing ppt
Image processing pptImage processing ppt
Image processing ppt
 

Similar to Marrying CDNs with Front-End Optimization

Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...Strangeloop
 
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your siteAkamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site零壹科技股份有限公司
 
Performance automation 101 @LDNWebPerf MickMcGuinness
Performance automation 101 @LDNWebPerf MickMcGuinnessPerformance automation 101 @LDNWebPerf MickMcGuinness
Performance automation 101 @LDNWebPerf MickMcGuinnessStephen Thair
 
eCommerce performance, what is it costing you and what can you do about it?
eCommerce performance, what is it costing you and what can you do about it?eCommerce performance, what is it costing you and what can you do about it?
eCommerce performance, what is it costing you and what can you do about it?Peter Holditch
 
Real Life WebSocket Case Studies and Demos
Real Life WebSocket Case Studies and DemosReal Life WebSocket Case Studies and Demos
Real Life WebSocket Case Studies and DemosPeter Moskovits
 
Web Performance & Latest in React
Web Performance & Latest in ReactWeb Performance & Latest in React
Web Performance & Latest in ReactTalentica Software
 
Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...
Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...
Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...Strangeloop
 
Magento performancenbs
Magento performancenbsMagento performancenbs
Magento performancenbsvarien
 
HTML5 WebSocket Introduction
HTML5 WebSocket IntroductionHTML5 WebSocket Introduction
HTML5 WebSocket IntroductionMarcelo Jabali
 
Rail Performance in the Cloud - Opening
Rail Performance in the Cloud - OpeningRail Performance in the Cloud - Opening
Rail Performance in the Cloud - OpeningEngine Yard
 
Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)Guy Podjarny
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller
 
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]Yottaa
 
Jon Arne Sæterås - Give Responsive Design a mobile performance boost
Jon Arne Sæterås - Give Responsive Design a mobile performance boost Jon Arne Sæterås - Give Responsive Design a mobile performance boost
Jon Arne Sæterås - Give Responsive Design a mobile performance boost DevConFu
 
Drupal CDN integration: easier, more flexible and faster!
Drupal CDN integration: easier, more flexible and faster!Drupal CDN integration: easier, more flexible and faster!
Drupal CDN integration: easier, more flexible and faster!Wim Leers
 
Equinix webinar (cotendo) final dec 8
Equinix webinar (cotendo) final dec 8Equinix webinar (cotendo) final dec 8
Equinix webinar (cotendo) final dec 8gyanendra1
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performanceSagar Desarda
 
Front End Optimization [Cloud Connect 2012]
Front End Optimization [Cloud Connect 2012]Front End Optimization [Cloud Connect 2012]
Front End Optimization [Cloud Connect 2012]Strangeloop
 

Similar to Marrying CDNs with Front-End Optimization (20)

Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
 
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your siteAkamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
 
Performance automation 101 @LDNWebPerf MickMcGuinness
Performance automation 101 @LDNWebPerf MickMcGuinnessPerformance automation 101 @LDNWebPerf MickMcGuinness
Performance automation 101 @LDNWebPerf MickMcGuinness
 
eCommerce performance, what is it costing you and what can you do about it?
eCommerce performance, what is it costing you and what can you do about it?eCommerce performance, what is it costing you and what can you do about it?
eCommerce performance, what is it costing you and what can you do about it?
 
Real Life WebSocket Case Studies and Demos
Real Life WebSocket Case Studies and DemosReal Life WebSocket Case Studies and Demos
Real Life WebSocket Case Studies and Demos
 
Web Performance & Latest in React
Web Performance & Latest in ReactWeb Performance & Latest in React
Web Performance & Latest in React
 
Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...
Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...
Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...
 
Magento performancenbs
Magento performancenbsMagento performancenbs
Magento performancenbs
 
HTML5 WebSocket Introduction
HTML5 WebSocket IntroductionHTML5 WebSocket Introduction
HTML5 WebSocket Introduction
 
Rail Performance in the Cloud - Opening
Rail Performance in the Cloud - OpeningRail Performance in the Cloud - Opening
Rail Performance in the Cloud - Opening
 
Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
 
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]
 
Jon Arne Sæterås - Give Responsive Design a mobile performance boost
Jon Arne Sæterås - Give Responsive Design a mobile performance boost Jon Arne Sæterås - Give Responsive Design a mobile performance boost
Jon Arne Sæterås - Give Responsive Design a mobile performance boost
 
Antonio piraino v1
Antonio piraino v1Antonio piraino v1
Antonio piraino v1
 
Profilling client performance
Profilling client performanceProfilling client performance
Profilling client performance
 
Drupal CDN integration: easier, more flexible and faster!
Drupal CDN integration: easier, more flexible and faster!Drupal CDN integration: easier, more flexible and faster!
Drupal CDN integration: easier, more flexible and faster!
 
Equinix webinar (cotendo) final dec 8
Equinix webinar (cotendo) final dec 8Equinix webinar (cotendo) final dec 8
Equinix webinar (cotendo) final dec 8
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
 
Front End Optimization [Cloud Connect 2012]
Front End Optimization [Cloud Connect 2012]Front End Optimization [Cloud Connect 2012]
Front End Optimization [Cloud Connect 2012]
 

Recently uploaded

RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 

Recently uploaded (20)

RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 

Marrying CDNs with Front-End Optimization

  • 1. Marrying CDNs with Front-End Optimization for Maximum Acceleration Joshua Bixby 2012 Content Delivery Summit
  • 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. 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. Brief history of time saving 1993 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. 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. Case study: FEO in action © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 6
  • 7. Before: Performance summary © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7
  • 8. Waterfall First View Repeat View © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 8
  • 9. Before: Performance snapshot © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 9
  • 10. Step 1: Turn on compression and keep alives ~17.8 sec ~10.5 sec © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 10
  • 11. How did we do? Original +KA+Comp Improvement First View 52% 40% 34% © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 11
  • 12. Step 2: Implement a CDN Problem: Time to first byte © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 12
  • 13. Before and after ~10.5 sec ~8.3 sec © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 13
  • 14. TTFB savings Per object TTFB savings of ~50% © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 14
  • 15. Before and after CDN: Video http://youtu.be/BR5hO5rL8lE © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 15
  • 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. 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. 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. Before and after: The final, fastest version http://youtu.be/IPn0T1UacIA © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 19
  • 20. The proof is in the numbers © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 20
  • 21. © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 21
  • 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. FEO in the CDN © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 23
  • 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. FEO in the CDN © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 25
  • 26. FEO in the CDN © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 26
  • 27. Key areas of integration © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 27
  • 28. Measurement This IS NOT where your user is. STOP testing from here! © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 28
  • 29. Mobile © 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 29
  • 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. © 2012 Strangeloop Networks 2011 Strangeloop. Faster Websites. Automatically. 31

Editor's Notes

  1. 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.”
  2. 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.
  3. We’ll use it to describe where performance pain points are, but that doesn’t mean the page actually has these problems
  4. 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.
  5. Twitter @joshuabixby