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

BrowserOriginatingExternal
Android 4610
Chrome/Opera64
Firefox611
IE 8 & 9629
IE 1089
IE 11134
iStuff4-615+
Safari611

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

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

jsDelivr also...

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/