Lazy Mans Guide to Speeding up WordPress

Nothing annoys me more than a sluggish website, and with statistics showing 47% of consumers expect a web page to load in 2 seconds or less - many of you also agree.

​Google is striving to make the internet a better place, and if the consumer wants fast websites, then if yours isn't up to scratch expect to see your rankings grind lower.

That's why it's of utmost importance to have the fastest website possible.

More...

In this tutorial you'll learn the exact steps that you need to follow to get your WordPress website optimized so that it ​runs optimally for speed.

I don't claim to be a 'guru' at site optimization, but these are the exact steps I recommend (after many months of trial and error) to get your site up to speed (pun intended).

​Pretty good huh? In my webmaster tools, I noticed a significant drop in the time it was taking Google to crawl the site, which means that it really has been sped up.

You can clearly see from the graph above when I optimized for speed, as the average times for Google to crawl my site are significantly less.

So, how did I achieve this, and why are you calling it the lazy way?

Well, let me explain.

To make the page load faster, we can do a number of things that, after initial setting up, they don't actually require any day to day input, so give yourself an hour or two and your site can be drastically improved.

Makin' things smaller​

It makes sense right, the smaller the size of the page, the quicker it can download. A simple fix is optimizing all your images with a plugin like EWWW or Smush IT.

Install EWWW and in your WordPress dashboard click 'Media, Bulk Optimize' and click on the 'Start Optimizing'.​

​This will go through all your uploaded image files and will make them optimal for web delivery with no noticeable degradation in visual quality.

When ever you upload new images, they will automatically get optimized if there are savings to be made.

Makin' things smaller - part II - By lazy loading images you can also reduce the page size. If someone visits your site and only scrolls 50% of the way down then all the images in the bottom half of your page, don't necessarily need to be loaded. Why waste bandwidth and resources on something that isn't going to be seen.

A lazy load plugin will add this feature to your site incredibly easily, only images in the current viewport (i.e. what can be seen) will be loaded.​

Here's a quick example of how it works in practice.​

There are as mentioned plugins that do this for you, but installing a bunch of plugins isn't the real lazy way of optimizing. Keep reading to find out how I lazy load my images...

Reduce the size of your files - by a process called minification, you can strip out unnecessary information from your CSS and JS files. This can often reduce the amount of data transmitted by 50%.​

Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code, without changing its functionality.​

Reduce your requests

If you have 5 kids that need to be taken to soccer practice, would you take each kid one by one (a total of 5 round trips) - or would you bundle them all in the same car and just make one trip? Of course you'd take them all at the same time, it makes perfect sense.

The same goes for your CSS and JS files. Combining your CSS files into a single file (likewise for your JavaScript files) is a very effective way to reduce the number of HTTP requests made by a browser during page loading. This is particularly important in old browsers, that were limited to two connections per domain. In addition to reduced overhead for HTTP headers and communications warm-up, this approach works better with TCP/IP slow-start, increasing the effective payload bit-rate through the browser's network connection. This practice reduces the number of round-trip times.

I've no idea how to do this with WordPress, but thankfully there is a plugin that does this with stunning efficiency. Keep reading to find out more.

Caching Plugins

Here's where the real magic starts... Once you've made your pages smaller, one way to reduce download speed is to effectively pre-render your web-pages.

Normally when you load a website, it goes to the database, pulls back some information and creates a html page to be served to the visitor. If another visitor comes along, then again - the database gets queried and the page generated again, even though the returned html page is identical to the previous one just shown.

In a simplified way, what caching does is store these html renders of your page, and will serve them, instead of querying the database every time you get a visitor.

This can massively reduce the load on your server and drastically speed up your site load times.

Most people recommend W3 Total Cache, but I found it really difficult to get working optimally. I then tried the Falcon caching plugin present in the WordFence plugin, which worked really well. It required very little setting up and increased my site speed drastically.

I thought that was the best solution, until I discovered WP Rocket.

It is a super solid caching plugin, but it comes with SO much more, meaning I could remove several plugins and combine them into a single plugin.

Previously, lazy loading, minification, caching and deferred JS loading were all handled by seperate plugins. Count them, that 4 plugins I could get rid of and replace with a single one.

Here are just some of the features this amazing plugin provides, click the image to go to their site and view all the features along with an explanation of each one.

​Much to my dismay (after paying full price) there is a discount coupon for WP Rocket - if you want to grab 35% off (until Dec 23rd) then use the code wpappstore35 at the checkout.

Use a CDN

In my previous post, I mentioned that I switched from Aweber to Sendy. This means I was set up with an Amazon Web Services account. I noticed they offer a very competitive CDN (Content Delivery Network) called CloudFront.

Setting it up was an absolute breeze, I literally entered my URL and the CDN service made a static snapshot of my site and distributes it across its global network of servers.

In WP-Rocket, I just entered the unique URL into the CDN box, and boom I was up and running distributed across the globe.

How does a CDN work?

Simplistically speaking a CDN works by a distributed network of servers across the world. When someone access your site, the CDN feature will automatically choose the closest server (geographically) to download the information from.

This means no matter where your visitors are, they will be able to load your site in the quickest possible time.

A visitor from London would see your site IP in the UK and a visitor from New York would see your server in the United States.​

All in all, going through all these steps should take you an hour or two tops. For the value you will get from having an optimized and fast site, it is well worth the effort and minimal cost.

Know any other tips that will speed up my site even more?

Let me know in the comments below - and don't forget to sign up to my mailing list to receive updates and subscriber only content.

9 Comments

  1. Ramsay December 18, 2014
    • Steve Rendell December 18, 2014
  2. Scott Kindred December 23, 2014
    • Steve Rendell December 23, 2014
  3. Jean-Baptiste December 23, 2014
    • Steve Rendell December 23, 2014
  4. Akshay Joshi February 13, 2015
    • Steve Rendell February 13, 2015
  5. Ten Mien July 7, 2017

Leave a Reply

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