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


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


Brief history of time saving

1993 20021999 20062000 200719961995 1998 20042003 20092008 2010 2011

Infrastructure Delivery Transformation


Delivery vs TransformationOriginal Delivery Transformation (FEO)

9.5 seconds63 roundtrips




Case study: FEO in action


Before: Performance summary


WaterfallFirst View Repeat View


Before: Performance snapshot


Step 1: Turn on compression and keep alives

~17.8 sec ~10.5 sec


How did we do?

Original

+KA+Comp

First View 52% 34%40%

Improvement


Step 2: Implement a CDN

Problem: Time to first byte


Before and after

~10.5 sec ~8.3 sec


TTFB savings

Per object TTFB savings of ~50%


Before and after CDN: Video

http://youtu.be/BR5hO5rL8lE

http://youtu.be/BR5hO5rL8lE


We can do better

Still too many roundtrips

Not fast enough!

Still too many bytes


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


How did we do?

+CDN

+FEO

First View 19% 54%

Improvement

0.5 sec 4.6 sec

45%

Seconds Gained

81

11


Before and after: The final, fastest version

http://youtu.be/IPn0T1UacIA

http://youtu.be/IPn0T1UacIA


The proof is in the numbers


“There’s no single magic bullet for making pages faster.”

Adding FEO to CDN/DSA resulted in~45% faster page loadacross all browsers


FEO in the CDN


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)


FEO in the CDN


Key areas of integration


Measurement

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


Mobile


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

marrying cdns with front-end optimization

Technology

faster websites

aptimizerealtime feo

increase inspeed

increase infor

automated feo stabilityfor

s productivity

s of improvement fewer

high growth rapid adoption