2019-02-18 : 01:57
If you’ve been working around web development for a while, you’ll know that the web has a need for speed. The truth is simple: speed matters!
If you’ve been working around web development for a while, you’ll know that the web has a need for speed. The truth is simple: speed matters and faster is considered better.
One “easy win” for increasing performance is using a CDN. We’ve discussed this several times at CSS-Tricks. It’s easy in that you aren’t rewriting a codebase or hand-editing content, but it’s an area of performance many of us might overlook because, well, hosting, servers and cPanels, oh my!
Thankfully, the process for integrating a CDN does not have to be hard. Ideally, you get things configured and then things like Google PageSpeedshriek with glee in the form of high performance scores which, in turn, yield to better search engine rankings, higher revenue, a raise for you and…you get the point.
This post is going to walk through the process for setting up a CDN to work on a custom web application, followed by some tricks we can use to get the most out of our work. Like I said, it doesn’t have to be hard, so let’s dive in and make the web faster!
It’s worth noting that setting up a CDN can be even simpler than what we’re covering here for those working with a CMS like WordPress, where plugins can help with the lift. We’re going to assume that not everyone has that luxury (shout out to web applications!) and proceed in the more traditional way.
It doesn’t hurt for us to review the basic concepts of what a CDN is and what they’re used for, so let’s start with that.
A CDN works by fetching static assets from your site’s server and caching them on their servers. When a browser makes a request to visit your site, the static contents are served via the CDN rather than by your site. This is faster because the CDN servers are globally distributed and serve as proxies that determine which server is located physically closest to your visitor, thus delivering content on a speedier, more convenient network. Hence the full name: Content Delivery Network.
