Open Source CDNsLAWebSpeed | April 29th 2014

@jdorfman

{“name”: “Justin Dorfman”,“residence”: “DTLA”,“work”: “Developer Relations @ MaxCDN”,“evangelizing”: “WebPerf & Open Source”,“hobbies”: “Bowling, XBOX, Reading & TV”

}

hello-world.json

@jdorfman

FOSS CDN ProvidersBootstrapCDN (netdna.bootstrapcdn.com)CDNJS (cdnjs.cloudflare.com)Google (ajax/fonts.googleapis.com)jQuery (code.jquery.com)JSDelivr (cdn.jsdelivr.net)Microsoft (ajax.aspnetcdn/microsoft.com)OSSCDN (oss.maxcdn.com)Yandex (yandex.st)

@jdorfman

Market Share via MeanPath.com

CDN Sites Percentage

Google 17,769,233 84.5%

jQuery 2,328,508 11.1%

BootstrapCDN 305,845 1.5%

CDNJS 213,128 1%

Microsoft 202,572 1%

Yandex 116,345 0.6%

OSSCDN 62,766 0.3%

JSDelivr 26,075 about 0.1%

Last Modified 04-28-2014 9:31 PM

Market Share

@jdorfman

Pros

1. Save Bandwidth & Money

2. User could have the file already cached

3. CORS, gzip, minification is handled automatically

4. Decreased Latency

5. Increased parallelism (Domain Sharding)

@jdorfman

http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

Cons

1. JS could contain Malware

2. Public CDNs can go Offline

3. ISPs can block Public CDNs

4. Won’t work if you’re Developing Offline.

5. Files may not be optimized for your site/app

6. No pre-caching guarantees

@jdorfman

http://www.sitepoint.com/7-reasons-not-to-use-a-cdn/

Tips & Tricks

● Fall back to a Local Copy

@jdorfman

Tips & Tricks

● Never use /latest/

@jdorfman

Tips & Tricks

With JSDelivr/OSSCDN you can group libraries together

/ //oss.maxcdn.com/g/less,rrssb,d3js

@jdorfman

Tips & Tricks (Recap)

● Fall back to local copy

● Never use /latest/

● With JSDelivr/OSSCDN you can group libraries together

creating only 1 HTTP request

@jdorfman

BootstrapCDNBehind the Scenes

@jdorfman

What is Bootstrap?A front-end framework for developing

responsive, mobile first projects on the web.

• OSS Project started at Twitter in 2011

• Created by Mark Otto and Jacob Thornton

• #1 Repository on GitHub (67,000 Stars)

• Works the same on all Modern Browsers

What does it do?

What does it do?

<link href="bootstrap.min.css" rel="stylesheet">

Takes this...

… and makes this...

What is BootstrapCDN?An FOSS CDN for Bootstrap, FontAwesome &

Bootswatch.

• July 5th 2012 Launched

• August 8th 2012 @TwitterOSS Endorsement

• May 3rd 2013 Added to official docs

@jdorfman

http://www.bootstrapcdn.com/extras/birthday

Traffic

@jdorfman

July 5th 2012 - April 28th 2014

Metrics

@jdorfman

October 2013● Requests (Average)

○ Day: 81 Million

○ Hour: 3.4 Million

○ Minute: 56,000

○ Second: 1,000

● Bandwidth (Average)

○ Day: 1.30 TB

○ Hour: 54 GB

○ Minute: 900 MB

○ Second: 15 MB

April 2014● Requests (Average)

○ Day: 212 Million

○ Hour: 8 Million

○ Minute: 147,663

○ Second: 2,461

● Bandwidth (Average)

○ Day: 3.63 TB

○ Hour: 154 GB

○ Minute: 2.5 GB

○ Second: 41 MB

The Stack

interwebs Anycast

Servers

Edge

(nginx)

CDN

Pull GET

200

S3

Unicast GET

200VPS

nginx node.js

Origin (www)

@jdorfman

Q&AYou have questions? I have answers.

That’s all folksLinks mentioned:

http://bitly.com/bundles/jdorfman/6

We are hiring: http://www.maxcdn.com/company/careers/

Try MaxCDN with Coupon Code:

“LAWEBSPEED20”

@jdorfman