Your Stripe Integration is Costing You Money
Posted in: CDN, Ecommerce, Speed Up Tips   -   August 15, 2013

Setting up a basic Rails application to sell things using Stripe is generally straight forward. Getting the best performance out of your application, and the best conversion rates, can be tricky. Specifically, by using the standard integration instructions your application can be slow which can cost conversions. In this post I’m going to go over three concrete tips to get the best performance out of your application: using a CDN, using DNS prefetching, and preloading Stripe’s javascript API.

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:

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 foo.example.com and 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:

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:

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%.

Preload Stripe Javascript

The biggest win by far that I’ve noticed is to preload stripe.js. I measured a 161ms delay while loading Stripe’s API javascript due to HTTPS negotiation. By preloading the script at the end of my landing page those milliseconds are spent while the user is reading through the content instead of while they’re waiting for the order form to load, leading to a smoother experience and more conversions. 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.


Tags: , , , , , , ,

  • http://www.MaxCDN.com/ Chris Ueland / MaxCDN

    Great Post. Thanks Pete!

  • justinschier

    Thanks – I’ve been doing this 15 years and I never knew about DNS Prefetch!