Use a CDN
A CDN, or content delivery network, is a network of web caches. Generally they’re located around the world at various points close to where your users are. Distributing your assets via a CDN makes them available to your users faster because they don’t have to travel as far and also reduces the load on your web servers because the CDN will only load them once and cache them for however long you specify.
Hosting your assets on a CDN used to be a giant expensive pain. It used to be that you’d have to upload them to the CDN using some kind of weird API, make sure they were up to date, make sure old ones got deleted properly, and pay a huge amount of money.
These days, though, you have a lot of inexpensive, flexible options and Rails makes it super easy to use any of them, assuming you’re using the asset pipeline. All you have to do is set the
asset_host configuration option to the root URL of your CDN distribution:
config.action_controller.asset_host = 'http://your-distribution.example.net'
There are a whole bunch of cost effective CDN options out there:
- Amazon CloudFront is easy to get started but can be expensive depending on which features you want to use. Bills by bandwidth used and number of requests. Deletions cost extra. Also, if you want to upload your own SSL certificate it costs an extra $600/mo.
- CloudFlare is free to get started but SSL is only available with Pro or better accounts, starting at $20/mo. There aren’t any bandwidth restrictions.
- MaxCDN is $9/month for small websites with up to 100GB/month in traffic. Shared SSL is included, if you want to customize it you’ll be paying a minimum of $48/mo.
All three of these options are basically the same, as far as setup. Login, create a new distribution, point it at your app, then take the URL they provide and put it in the
asset_host configuration variable. Rails’ asset pipeline will take care to generate unique asset filenames when the contents change so you don’t have to worry about deletions.
Configure DNS Prefetching
A few years ago the major browsers started prefetching DNS entries for links they find while parsing web pages. For example, if you have links to
bar.example.com, as the browser loads the page it adds those domains to an internal queue and asynchronously fetches the IP address. By the time you click one of the links the browser will already know what IP address to use.
This behavior depends on getting to links before the user clicks on them or before the resource behind the link is fetched. You can control the browser by telling it to prefetch a domain name before it even gets to the related element by including a special
link tag in the header:
<link rel="dns-prefetch" href="//www.example.com" />
The DNS prefetching directive should be one of the first things in the document, preferably directly after the
<meta charset="utf-8"> tag. You can have as many as you want. For a Rails + Stripe application I would suggest including entries for Stripe’s endpoints as well as your CDN host. On the landing page for my new book Mastering Modern Payments: Using Stripe with Rails I have the following entries:
<link rel="dns-prefetch" href="//www.google-analytics.com" />
<link rel="dns-prefetch" href="//ssl.google-analytics.com" />
<link rel="dns-prefetch" href="//d2s7foagexgnc2.cloudfront.net" />
<link rel="dns-prefetch" href="//js.stripe.com" />
<link rel="dns-prefetch" href="//api.stripe.com" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//themes.googleusercontent.com" />
<link rel="dns-prefetch" href="//sales.petekeen.net" />
This includes Google Analytics, my CloudFront CDN, the two domains that Stripe uses to host
stripe.js and for their API, as well as the two domains that Google uses for font distribution. I also include the domain that actually hosts my sales application.
DNS prefetching doesn’t cut a lot of time off of the total page load time for your users, but even 100ms increases revenue by 1%.
The biggest win by far that I’ve noticed is to preload
stripe.js, just include it at the end of any page in your order funnel before the actual order form.
Pete Keen is the author of Mastering Modern Payments: Using Stripe with Rails, an in-depth guide to integrating Stripe payments into your Ruby on Rails application the right way the first time.