How we shaved 1.7 seconds off casper.com by self-hosting Optimizely
One last benefit of self-hosting the file is that we would have more control over the edge (CDN) and client (browser) cache. Optimizely doesn’t give you control of their edge cache, but they do give you control of the client cache. There is a setting that allows you to configure the cache-control value, which for us was set to 2 minutes. This is an ideal setting for us when the file is hosted by Optimizely.
In the chart above, you can see a drop in the start render time from the period of time that our self hosted, static version of the Optimizely snippet was live in production. By self-hosting, the start render time dropped substantially because we eliminated the DNS lookup, Optimizely server connection, SSL handshake, time to first byte, and enabled H2 multiplexing.
Here is a screenshot from WebPageTest measuring the performance of the new Optimizely file hosted by Casper:
And here is a side by side comparison of data collected prior to self-hosting and after via WebPageTest:
Ideally we’d be presenting 95th percentile of real user monitoring (RUM) data for these values, but we haven’t fully implemented this for casper.com. There is some presumed volatility in the Optimizely hosted times (for better or worse — we aren’t certain) and on the Casper hosted content download time because these are synthetic tests.
Here’s a waterfall that shows HTTP2 multiplexing at work on casper.com and the Optimizely file. Notice how the content download for the top 5 assets starts at nearly the same time for all of them.
And lastly, as mentioned earlier, self-hosting gives us more control over caching. We configured our edge servers to keep the file in the edge and browser cache for a full year. We are able to do this because the filename is unique to the contents (we add part of the file’s hash to the filename) and replace the reference to the filename when it changes. This way, if we don’t make any changes to the Optimizely snippet, the repeat visitor’s browser will not even make a request to casper.com for the file. It will instead pull the file directly from the cache on the user’s filesystem. Super fast!
Here you can see the benefits of the file being served from the browser cache:
In this chart we can see that there was a 3 hour period on Thursday the 23rd where the snippet changed about 25 times. It’s unlikely that a large number of visitors would be downloading multiple versions of the snippet at this change frequency because our average visit duration is not very long. Overall we think there are more benefits to self-hosting than drawbacks.
This project was about a month’s worth of on-and-off work from our software engineers, product managers, site reliability engineers, and data analysts. It was a great example of some performance-minded people on the Casper Tech team identifying an issue, finding an elegant solution, shipping it to production, and making a huge impact for our customers.
By the way, we’re looking for a performance engineer to join our NYC Tech team! If you’re interested, please reach out to me on Twitter @kylerush.