+ All Categories
Transcript
Page 1: Marrying CDNs with Front-End Optimization

Marrying CDNs with Front-End Optimization for Maximum Acceleration

Joshua Bixby

2012 Content Delivery Summit

Page 2: Marrying CDNs with Front-End Optimization

© 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

Page 3: Marrying CDNs with Front-End Optimization

© 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

Page 4: Marrying CDNs with Front-End Optimization

© 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

Page 5: Marrying CDNs with Front-End Optimization

© 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

Page 6: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 6

Case study: FEO in action

Page 7: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 7

Before: Performance summary

Page 8: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 8

WaterfallFirst View Repeat View

Page 9: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 9

Before: Performance snapshot

Page 10: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 10

Step 1: Turn on compression and keep alives

~17.8 sec ~10.5 sec

Page 11: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 11

How did we do?

Original

+KA+Comp

First View 52% 34%40%

Improvement

Page 12: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 12

Step 2: Implement a CDN

Problem: Time to first byte

Page 13: Marrying CDNs with Front-End Optimization

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

Before and after

~10.5 sec ~8.3 sec

Page 14: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 14

TTFB savings

Per object TTFB savings of ~50%

Page 15: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 15

Before and after CDN: Video

http://youtu.be/BR5hO5rL8lE

Page 16: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 16

We can do better

Still too many roundtrips

Not fast enough!

Still too many bytes

Page 17: Marrying CDNs with Front-End Optimization

© 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

Page 18: Marrying CDNs with Front-End Optimization

© 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

Page 19: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 19

Before and after: The final, fastest version

http://youtu.be/IPn0T1UacIA

Page 20: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 20

The proof is in the numbers

Page 21: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 21

Page 22: Marrying CDNs with Front-End Optimization

© 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

Page 23: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 23

FEO in the CDN

Page 24: Marrying CDNs with Front-End Optimization

© 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)

Page 25: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 25

FEO in the CDN

Page 26: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 26

FEO in the CDN

Page 27: Marrying CDNs with Front-End Optimization

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

Key areas of integration

Page 28: Marrying CDNs with Front-End Optimization

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

Measurement

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

Page 29: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 29

Mobile

Page 30: Marrying CDNs with Front-End Optimization

© 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

Page 31: Marrying CDNs with Front-End Optimization

© 2012 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 31© 2011 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 31


Top Related