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