If you’ve been using WordPress for a while, you know that sometimes it isn’t exactly the fastest CMS to load. In fact, it can often take its sweet time to load.

We recently had a client that needed a significant speed upgrade. Initial tests on Pingdom showed a download speed of 12+ seconds (!!!!) and a page size of 28+ MB (!!!!!x2).

This will never do. Let’s see how we helped fix the page. Here are the key things we changed or added:

Before you make some changes, I suggest taking a screenshot of your site speed. Our favorite tool is Pingdom although there are a variety of other similar tools.

Training someone how to use the WordPress Media uploader was the first step. WordPress (and most themes) have powerful image resizing tools. When you shrink the size of an image (in pixels), it generally makes the image a very reasonable size.

The staff uploading the images simply hadn’t been well versed in how to use WordPress’s built in tools to shrink images to a manageable size. By going through the most recent articles (that showed on the homepage) and shrinking the images to a web size, we effectively cut the page size in half –

which effectively cut the page load time in half.

And note, we did ALL of this without looking at any technical solutions. We removed a few unnecessary images and taught staff how to optimize images before they are published.

Well, that was easy.

The site is hosted on a dedicated VPS server hosted with Bluehost. Since traffic is fairly moderate at this point, I didn’t feel a huge need to upgrade the server. Although there are some amazing shared hosts out there, I’ve always been moderately happy with Bluehost and their dedicated boxes. Plus, they are hard to beat for the cost.

Plus we’ll be moving all the image hosting over to Amazon’s Cloudfront as well as adding some caching. We should be able to get a really good setup without changing the host.

That said, if you’re currently on a shared hosting service, it might be a good idea to upgrade to something dedicated.  Shared hosting by its nature is very unpredictable. All of your resources are shared between a number (sometimes a LARGE number) of websites. So if you can’t handle delays and large fluctuations in load time that are far outside of your control, I recommend upgrading to something a little nicer.

Ok, so if you’ve covered the first two categories, you should have your site as fast as it will go without some additional help. Now, we’re going to actually begin using some powerful tools to help you speed up your website.

The first of these is caching. Caching is a really fancy term for “saving stuff that gets loaded often in a way that makes it load faster”. In other words, we are going to take some of the common, computing heavy resources and meet them available more quickly.

When you load a page in WordPress, your computer makes a request to the server. The sever then loads the php code for the page. Within this page are a bunch of actions. The page is going to request some things from the database (such as your most recent posts). These back-and-forth requests from the database as well as other computing functions that are happening in the background can slow down your page load time.

With caching, we can take some of these common tasks (like the homepage for example) and render them as pure HTML. Then whenever anyone requests that page, the server will send them a pre-rendered version of the HTML page. This mean it doesn’t need to make requests to the database, but can just serve the HTML page. This can dramatically speed up your page.

There are additional methods of caching you can use. A good plugin to try if you want powerful caching is W3 Total Cache. It gives you dozens of options that you can use to build powerful caching rules. However, it can be a steep learning curve to get started. And overtime I’ve used it, I’ve had to fight through quite a few problems before I found a result that worked well.

So we typically use WP Super Cache instead. It is a simple plugin that renders HTML of the PHP scripts, and you can determine who gets to view cached pages. At the most powerful level, you can serve these cached pages to anyone who is not logged in.

For most blogs this is an idea solution. It instantly checks to see if users are logged in. If they are, you can serve them PHP pages. If they are not (as most visitors will not be), you can serve them HTML pages.

The WP Super Cache plugin is also crazy simple to install. Here’s how to do it:

 Step 5: Ensure the settings look similar to below. You’ll likely need to select the option to compress pages as well as the “Don’t cache pages for known users” option. These aren’t mandatory, but will generally help your site perform better.

And that’s it. There are some other options you can use get some more incremental improvements, but by-and-large you are in good shape.

At this point, I wouldn’t mess with the WP Super Cache CDN settings. We’ll use some other tools to setup a good CDN for all of our images.

Next, we’ll setup a CDN using Cloudfront and AWS.

If you’re not familiar with the term CDN, it means Content Delivery Network. A webpage is actually a series of unique files that all load together. You have the HTML file that gets displayed (this is what you see when you go to “View Source” in your browser). Technically, this is all you need to make a website, however almost all sites have other files. These are usually some combination of images, javascript files, and CSS files.

In a default WordPress site, all of these files are loading from the same server. This means you’re making many requests to the same server at the same time. In this case, we decided to take the images and host them on a different server – or in our case – our CDN.

A CDN is a highly optimized network of servers that load assets (images, javascript, CSS) really fast. Typically, a CDN has servers that are physically close to the location of the person making the request. A CDN is faster because it is physically closer (usually), and it helps share the bandwidth load.

In our case, we’re going to install a couple plugins to use Amazon’s Cloudfront CDN. The Cloudfront CDN is powerful and fast. It’s also easy to setup and fairly inexpensive. You only pay for the bandwidth you use.

Here’s how to setup a Cloudfront CDN for your WordPress site:

Step 1: First you’ll need to install the plugins in WordPress. The two plugins you’ll want are Amazon Web Services and WP Offload S3. Go ahead install these from your WordPress Plugins page.

Step 3: Once you have an account setup with AWS, you’ll need to create your AWS access keys. For a detailed description, see the docs on AWS.

Step 4: Now that you have a public key pair, you’ll need to add those to your WP-config file or your WordPress installation. We recommend adding them to your wp-config.php file for security reasons. Just copy the two lines shown and replace the “*******” with your keys.

It should look like the image below:

However, if you want, you can copy and paste them right into WordPress.

 

Click on Amazon S3 in the Main AWS menu.

You can name the bucket whatever you want, but it has to be a name that hasn’t been used before. usually I do something like “websitenamecdn” or something similar.

Next, we need to link our cloudfront distribution to our S3 bucket. To do this, click on the Cloudfront icon. Then hit the blue “Create Distribution” button at the top.

You should then see the options to create distribution. When you click in the top box, it will allow you to select a bucket from your Amazon S3 account.

It should also autofill the Origin ID. At this point, you can leave the other settings the same and finish creating the distribution.

Now, we just need to tell WordPress where to upload and download the files from. To do that, go back into your WordPress Installation Dashboard. Go to AWS> S3 and Cloudfront.

Select the custom URL option. You can find your unique URL for your Cloudfront distribution by clicking on the ID of your Cloudfront distribution and going down to domain name. Copy that domain and paste it into your WordPress installation.

And that’s it! You should now be setup on the CDN.

At this point, you should be able to run your site through the Pingdom tools test again and see a dramatic improvement. Each of these layers of caching and speed improvements should make your site faster. If I have a site that gets a lot of traffic and needs to be fast, these are my go to tools.

There are many other ways to make your site faster from the themes and plugins you use to the way you load images and other files. And there is no one “right” way. However, we always recommend starting with the above steps. If you’re still not getting the speed you want, let us know. We’d be happy to help you optimize your site.