Shaving off Seconds: Making your Website Faster

Does your website load too slowly? Try using a content delivery network and caching static content. Read on for details and a quick-and-easy three-step guide.

I’ve never been satisfied with Debug Mind’s speed. If you ever visited this site before, you probably drummed your fingers impatiently while your browser slowly painted the web page down the screen. Having done more than my fair share of finger-drumming, I decided to make this site faster: Debug Mind now uses both CloudFlare, a content delivery network and optimizing service, and W3 Total Cache, a WordPress caching plugin.

Below you’ll find an outline of the steps I took to speed up my website. While the third step is WordPress-specific, the first two should be applicable to most websites.

Step one: Diagnose the bottlenecks
Before making your website faster, you might want to know why it’s slow. If you don’t care for the “why” and simply want results, skip ahead to step two. For those of you curious about why your site loads slowly, I recommend completing step one.

Analyze HTTP requests with Chrome Developer Tools
The Chrome browser packages a handy set of tools that you can use to analyze websites. If for some reason you don’t want Chrome on your machine, alternatives to Developer Tools exist for other browsers and a Google search will likely find them.

Chrome Developer Tools can help you diagnose speed bottlenecks. Often times uncached images and poorly written plugins slow your website down.

Chrome Developer Tools can help you diagnose speed bottlenecks. Often times uncached images and poorly written plugins slow your website down.

Assuming that you’re using Chrome, navigate to the browser menu’s tools section and click on Developer Tools. Click on the Network tab and then navigate over to the website you want to analyze. Once the website loads, you’ll see a list of requests that your browser made while fetching your site. The timeline tells you how long each request took. Isolate requests with the longest streaks in the timeline. These are the things that are slowing your website down. Chances are that the bottlenecks are image loads and other static media. Other things — perhaps plugins, if you’re on WordPress or something comparable — might also contribute to the lag.

Review site performance with YSlow
Yahoo’s YSlow browser extension will grade your website’s performance. YSlow breaks its grade reports down, telling you specific areas that need work. You’ll probably be told to use a CDN. The following step tells you how to quickly set your site up to use one.

Step two: Use CloudFlare’s CDN
A CDN is a collection of geographically-scattered servers that serves up your website. In a CDN, machines serve clients who are physically close to them. Since the servers dot the globe, CDNs tend to serve up sites rather quickly.

You’ll see a big performance boost if you use a CDN. I recommend using CloudFlare, a free CDN that that caches your static content and serves it up for you. The company boasts that websites they serve load twice as fast. As an added bonus, CloudFlare comes with spam filtering and speed optimizations that might address other bottlenecks flagged by YSlow.

Configuring your website to use CloudFlare is easy. Just click the sign up button and follow the instructions. Some things to note:

a) Early in the process, CloudFlare will assemble a list of your DNS records. It’ll ask you to verify that it found them all. To do so, assuming that you’re using cPanel, head over to the DNS Zone Editor, select your domain, and check these DNS records against the ones CloudFlare found. If you find that CloudFlare missed some records, go ahead and supply them manually.

b) You’ll be asked to configure your site to use CloudFlare’s name servers. Again assuming that you’re using cPanel, navigate to Domain Manager, select your website, and then click the Name Servers tab. Change your name servers from there.

c) Don’t fret when selecting your options for security and optimizations. You’ll be able to change them at any time you please. When in doubt, start with the safer options and switch to the riskier ones if needed.

After you set up your CDN and wait a bit for the changes to propagate. your website should load faster. If you’re using WordPress and are itching for more speed, read on to step three.

Step three: Install a caching plugin
Couple CloudFlare with a WordPress caching plugin for even more performance gains. There are two major caching options: WP Super Cache and W3 Total Cache. Since the latter officially supports CloudFlare, I recommend it over the former.

Setting up the plugin should only take five or so minutes. Go ahead and install it from the plugin library. Once it’s installed and activated, click on the performance tab that’s now on your menu in the wp-admin backend. Under general settings, enable page caching and browser caching, and make sure to enter your CloudFlare account details. I recommend minifying CSS, JS, and HTML, but make sure that you select only one service (W3 Total Cache or CloudFlare) to do the minifying. Finally, click on the browser section and make sure that the “set expires headers” options are checked. After doing all this, take your website for a spin. If your website still loads too slowly, try experimenting with database and object caching.

Further steps
And that’s it! With the one-two punch of CloudFlare and a caching plugin, you should definitely notice some speed gains. If you’re a performance junkie and want more speed, run more diagnostics with Developer Tools and YSlow and target the remaining bottlenecks. If you feel that you’ve done all you can, talk to your web hosting service. If they can’t help you out, you might want to consider changing your web host.

A word on caching
While using CloudFlare, changes to pages that were previously static might not propagate instantaneously. CloudFlare caches static content, and there will be a short lag before it re-caches the page with its changes. There’s a couple of simple ways to get around this. Either a) toggle CloudFlare’s Development Mode on before making the changes or b) purge the cache after making the changes. If you’re using a caching plugin, you may need to empty its cache as well. Don’t get in the habit of purging the cache too frequently; you won’t get much of a performance gain if you do.

Leave a Reply

Your email address will not be published. Required fields are marked *