Improving Load Times with CDNs

• by @tomByrer
• github.com/tomByrer
• works at: with you?

What is a CDN?

Content Delivery Network

Distributing cloned web assets though multiple servers in different cities.

Internet at its best: fastest path!

CDNs you use weekly

• Google
  • google-analytics
  • ajax.googleapis.com hosted libraries
    • common: jQuery & AngularJS
  • Google Fonts
• Adobe Typekit's fancy "web" fonts
• MaxCDN
  • code.jQuery.com, netdna.BootstrapCDN.com
• Cloudflare

Other CDNs

• Free for OSS assets (minified JS, CSS, fonts)
  • jsDelivr
  • CDNJS
• Paid
  • Amazon CloudFront
  • CDNetworks (160+ PoPs!)
  • CenturyLink/Level3

CDN vs Plain
Old-School Hosting

• Speed page loading
  • happy visitors = more $$$
  • reduce FOUT
  • better Google ranking
• Better resistance to traffic/DoS spikes
• Reduce hosting costs, I/O
• Testing in online editors (JS Bin, CodePen, etc)

CDNs speed page loading

• Faster hosting
  • closer = fewer hops
  • tuned to serve static files
• Maxes out browsers' Max Connections

Browsers' HTTP1.1 Connections

(Originating Hostname vs Extra External via Browserscope)

Browser	Originating	External
Android 4	6	10
Chrome/Opera	6	4
Firefox	6	11
IE 8 & 9	6	29
IE 10	8	9
IE 11	13	4
iStuff	4-6	15+
Safari	6	11

FREE HTTP connections!

Use those 2 to 11 hidden downloaders!
To fill a sink; it is faster using both hot & cold faucets.

• Easy to use: replace static asset links with CDNs
  • start with larger assets
  • via Grunt/Gulp/build scripts
  • Wordpress plugins, etc
• Workaround: 'shard' server
  • subdomain: http://static0.mysite.com/picture.jpg
  • may not help clients' I/O, should test

Disadvantages

• Could clog up other non-originating requests
  • social plugins, tracking, API calls, ads...
• Free CDNs can't use your personalized files

(excuses)

• DNS lookup tax
  • (only once & may be compensated by speed)
• Downtime out of control your control
  • (not really; ~99.997% uptime)

Free CDN pit fight!

CloudFlare vs Google vs CDNJS vs jsDelivr

CloudFlare

• Proxies your site (no manual intervention)
• Front-line security; all traffic hits CF first
• Aggressive content optimization
• extra crunching for mobile
• CDN growing; 31 PoPs (2015-03)
• paid upgrade

CONS

• Currently no PoPs in China, Russia, North Africa, Middle East
• IPs get blocked for political content (China)

ajax.googleapis.com & google.com/fonts

• Most popular
• ~700 fonts & great front-end

CONS

• Slower in China
• JS limited to jQuery, AngularJS, 10 more

CDNJS

• Uses CloudFlare's network & admins
  • ^ great resources
• Optional auto-updates via NPM
• Started earlier; more known than jsDelivr

CONS

• Smaller network, but growing
• A bit slower than other Free CDNs
• Rare reports of blocks in China

jsDelivr

• CloudFlare + MaxCDN + KeyCDN + sponsored PoPs
  = 70 PoP MEGA-Network
  • Cedexis' load balancing helps make jsDelivr fast
• Most projects (over 1400)
• SemVer aliasing
• Auto-updating bot

CONS

• Newest; lesser known/used (but growing)

jsDelivr also...

• Collates JS | CSS assets (eg)
• Has bot for auto-updates

Wait, there's more!

• Proxies entire Wordpress plugin repo for CDN hosting
• Font CDN coming soonish (can you help with Docker/Python?)

Disclosure:

• Author helps with jsDelivr

CDN Results

• Faster loading = happier users
• Happy users + Free hosting = happier boss/client
• YMMV: Test for yourself!

Questions?

tomByrer@gmail.com

github.com/tomByrer/slideshow-improving_load_times_with_cdns/