Optimizing Your WordPress Website: A Beginner’s Guide

web-optimizationLast week I introduced you to my copyeditor Hannah, and asked her to write you all an article about writing reviews without owning the products. She absolutely killed it with that post, and I think it was great to let people have an insight into my team. Everyone got to know HPD a little bit more, and they also got some killer advice as well. Win win!

Continuing that vein, this week I’m introducing you all to Dean, who is my main web developer. Just like Hannah has had her hands on every piece of content we’ve produced in the last 6 weeks, Dean has had a hand on virtually every site we’ve built since January.

I like the idea of having Hannah contribute some great writing-related content every month, and Dean doing the same for web dev-related content.

As such, his post for today is going to walk you through something that a lot of us don’t pay enough attention to; website optimisation.

Over To Dean…

When you first begin creating a website, more often than not optimisation is last on your to-do list (if it is even there at all).

Even doing optimisation last is still beneficial to your site, but you should really consider it from the moment you start to set up your site, and continue considering it with every action you take.

Reasons For Optimising Your Site

You might be asking yourself, why should I bother optimising my site? You could easily sum up the response in one word: speed.

This doesn’t explain why speed is important though, so let’s consider a few main reasons:

1.) A faster site generally means faster load times, so fewer visitors will leave due to a site not loading quickly enough.

2.) A faster site is simply a joy for your visitors to use, improving their experience and perhaps helping to improve repeat visits.

3.) Google and the other search engines use page load speed as a metric when determining ranking.

The third reason above is perhaps the one that most site owners will worry about, but for me, I think that optimisations done to my sites are there to improve the visitor’s user experience, and any SEO boost is just a bonus.

How then can you improve and optimize your WordPress site?

Well, there are various ways to do this and doing them all is of course ideal, but even if you only pick and choose a few, it will certainly help your page load time.

Website Cache

When most people think of site optimisation, the first thing that comes to mind is caching.

In case you don’t know, the basic idea behind caching is that it takes a PHP based website and makes a static HTML version of as much of it as possible. As HTML doesn’t require any server level processing, it can be served to your visitor up to 20 times faster than PHP!

Obviously not everything on your site can be cached, for example some dynamic plugins like e-commerce and event based plugins may choke if you cache them. The rest though is fair game!

WordPress Caching Plugins

Luckily for us, there are some really clever people out there in the WordPress community who have made some excellent caching plugins for WordPress.

The most popular ones are W3 Total Cache and WP Super Cache. Personally I tend to use W3 Total Cache.

For most people, installing the plugin and leaving the default settings is enough, but to truly get the power out of them you need to tweak the settings.

A word of warning here, sometimes you will tweak something and it will go badly, especially if you minify JavaScript, so you may want to play around first on a development server or test site that you own.

The various parts of caching are as follows (I’m using W3 Total Cache in my examples):

Minify

What this does is remove all the comments and white space from CSS and JavaScript files. This makes it completely unreadable to people but much smaller, and browsers don’t care if it looks pretty.

Minified code
Minified code – looks ugly but browsers love it!

Another aspect of this is to combine the files into one file. This reduces the number of file requests and helps decrease page load speed, but this is where you need to be careful.

If the plugin combines the CSS files in the wrong load order, your CSS may get messed up. If the same happens for the JavaScript it can break JavaScript functionality on your site.

W3 Total Cache minify settings
The default minify setting is usually fine unless you really need to tweak for speed

Personally I tend to leave combining JavaScript files alone, though minifying them is still a really good idea.

Page cache

As you may guess, page cache caches your posts and pages in order to server them up quickly. This should definitely be selected if your cache plugin offers it.

Object caching

Often plugins and themes do the same processes over and over again. By enabling object caching the cache plugin tries to store some of the plugin’s and theme’s code results so that they can be reused without having to redo the actual function. Not all plugins and themes will benefit from this, but it’s definitely another one to make sure is enabled.

Database caching

Another method of caching that should be fairly obvious from the name. Instead of making numerous calls to the database, the database cache tries to provide data there and then.

Browser caching

Most modern web browsers have built in cache systems where they store images and the like. Enabling this option in your WordPress cache plugin will leverage the browsers cache and only request new files if they have changed on the server.

Requesting to see if the file has changed is much quicker than actually pulling the file so it helps to speed up page for existing visitors.

Server caching

This method of caching is sometimes done by your host and is often used on complex and high usage sites. More and more “standard” type of hosting are being given server level caching so you should consider it when choosing a host.

Load order

Web pages are loaded in your browser in a top to bottom synchronous way. What this means is that the browser reads from top to bottom and loads CSS and JavaScript in the order it finds them. As it is synchronous and load files in order, if you have large CSS (or more likely) JavaScript files near the top, it will slow down page load speed as it needs to wait for those files to be downloaded before it continues.

The obvious answer to this is to put as many of you larger files as possible towards the end of your webpage, in the WordPress footer.

Plugins and themes should do this for you but only if they follow WordPress coding practices and not all of them do.

W3 Total Cache manual minify mode
The manual minify mode allows you to select JS and CSS file order and placement. Use with caution unless you know what you’re doing.

Some caching plugins such as W3 Total Cache can do this for you if your theme and plugins don’t already follow best practices. There is also a plugin called Scripts to Footer that can help move wayward files down there.

Just remember, like with combining files, load order is important so having jQuery.js load after other JavaScript files will likely break your JavaScript functionality.

Optimize your DB

Some optimisation techniques don’t seem to do much in terms of visible performance increases, but are a good idea to do from time to time and database optimisation is one of them.

The key ways to optimize your database is to:

  • Remove spam comments – they just make your database larger and longer to search
  • Remove trackbacks and pingbacks and disable them – same as spam comments trackbacks and pingbacks just add clutter to your database. Unless you have an absolute need for them (I’d love to hear one, because I can’t think of any) then it’s a good idea to disable them via your sites Discussion settings. – Having them is a good way of finding out when you’ve been linked to – Dom
  • Delete unused drafts – These are just bulking up your database unnecessarily.
  • Reduce the number of revisions stored – reducing this amount can reduce the size of your database. See below.
spam
Spam: Ugly in your comments, ugly in your database.

Revisions are copies of posts that you have updated or saved as draft. For example if you create a post and update it 7 times, there will be 8 copies of just that post in your database. Personally I love the power of revisions, they can be really useful, but generally you don’t need that many.

If you think you can cope with fewer revisions per post, then add the following towards the top of your sites wp-config.php file:

define( 'WP_POST_REVISIONS', 3 );

That code will reduce the possible number of revisions down to just 3 per post. Please note that it will not remove existing revisions.

A plugin such as WP Optimize can be used to clear the above clutter as well as other database clutter such as trashed posts and comments and transients.

Image Optimisation

I mentioned earlier that thinking about site optimisation from the very beginning of your site’s life is the best way to go, and the main reason for this in my opinion, is regarding images.

Images are by and far the largest files that your site will send to your visitors browsers, and even in this day and age of super fast internet connections, optimising images is important.

There are two parts to image optimisation: image size and file size.

Image size

This refers to the visual size of the image, whether it is 250px wide or 2500px wide.

If most of your images are for featured images or additional images in blog posts, then consider how wide the post area is in your site. Depending on the them it could be as little as 500px or 800px and wider.

While WordPress will take an image and duplicate it in different sizes for you, these don’t always match what your theme will use.

As such I tend to do two things. Firstly in the Settings > Media page I change the default widths of the thumbnail, medium and large images to better match how my theme displays images.

Secondly I tend to only use images that are 800px wide, as this covers most image needs. Of course you may need to use wider images depending on your theme.

If you already have images on your site, and then change any Media settings you will need to install and use the Regenerate Thumbnails plugin, to change the sizes of the images that already exist in your site.

File size

This refers to the number of kilobytes (or megabytes!) that an image uses on the hard drive of your server. This is important as the larger it is, the longer it will take the visitor to download and view the image.

Kraken.io

After resizing the images to 800px (or whatever) I then use a free service called Kraken.io which allows you to optimize the image file size even further by using compression techniques. Using the Lossy compression, you can easily save 10 – 60% on the file size!

Only then do I upload the image to WordPress.

Choose plugins and themes wisely

With so many plugins and themes to choose from it often becomes an issue to decide between them. One factor to consider, though to be fair it’s really hard to do, is to consider the quality of the plugin’s code.

This is not just about whether it gives you the features you want or need, but whether it is poorly coded or not.

Badly coded plugins and themes do_everything_wrong() and can actually cause page and content load errors.

It’s a good idea to try to use plugins and themes from well respected vendors or on the advice of respected peers. This isn’t always possible and certainly isn’t perfect but it gives you a head start.

Another option would be to use the P3 plugin (Plugin Performance Profiler) to see which of your plugins are performing badly. P3 is not perfect, far from it, but it should provide a good enough indication of any plugin that is dragging your site down.

Plus, if you feel your site is loading slowly, P3 is a good start for investigating the cause.

Hosting

Hosting is like most hings products: you tend to get what you pay for. It’s human nature to try and get the cheapest deal possible, but when it comes to hosting, spending a bit more can improve your site speeds.

Cheap $5 a month hosting is awesome for starting out with but really it provides poor performance. You often have hundreds of sites on a single server all sharing the server’s memory, processor and bandwidth. If another site that’s out of your control starts hogging the server resources your site will suffer.

Using a VPS (Virtual Private Server) is somewhat better. The server specifications are usually a bit better, and while there are still other people on the same server as you, the number is vastly smaller. As such your site will tend to get more server resource to play with.

Finally you could go all out and get a dedicated server.This is a server that is for you and your site (or sites) only, so you get the full benefit of the server resources. There are also various levels of dedicated servers, each in turn being more expensive but providing more powerful servers.

The bottom line here, is that unless your site is about pictures of your cat, investing in a decent server is the way forward.

CDN (Content Delivery Network)

Let’s say that your website is hosted in the United States. If someone from Australia decides to visit your site, they have to get the files all the way from the States which can be a slower process than if they were in Texas.

You can counter this by using a CDN.

A CDN is a bit like using a cache plugin on steroids. What it basically does is store a cache of your content and files at distributed locations around the world.

Then when a visitor goes to your site, it provides as much as possible of the content from the nearest cache to their locale. For instance, the Australian guy might get served all the content from a cache based out of Sydney.

CDN’s are a service, so you will need to set up an account at one of the many CDN service providers out there. I recommend either CloudFlare or MaxCDN.

Also, decent WordPress caching plugins can work in conjunction with your CDN provider meaning that set up is much easier.

Testing your tweaks

When looking to optimise your website, you will of course need to test it to make sure that things are indeed speeding up.

There are several ways to do this.

The first, and most unreliable, is the “eyeball” method. This basically means that you do a test and reload your site in your browser after clearing your browser cache.

This is useful if you are testing things like minifying files, but doesn’t really help you see more fractional speed increases.

PRO TIP: If you are eyeballing your site in this way, make sure you either log out or use a different browser. Being logged in adds extra files to your site that slows your site down, but these files are only added when you’re logged in, your normal visitor wont be affected by them.

The second and more accurate way of testing your optimisation tweaks is to use a web service that tests your site speed for you.

Some examples are:

These services will check your site for various metrics and see exactly how fast the site loads. They will provide you with a score and pointers for anything that didn’t pass muster.

PageSpeed Insights
Not bad, but could be better!

Bear in mind that the scores for each service will vary slightly as they use similar but different metrics, so I would advise to pick one and just use that one.

My personal favourite is Google PageSpeed.

PRO TIP: Whichever you choose, make sure you run a test before you start making any changes so that you have a baseline score to compare against.

Conclusion

As you can see there are many ways to help improve the page load time and the general speed of your site. You don’t need to use all of them to add some zip to your site, but obviously the more you use the more likely you will improve the speeds.

While it’s often easier to implement optimization from the start of a site, there’s still no excuse not to implement them now! Even things like image optimization can still be done retroactively!

Do you have any ideas on how to improve your site speed? If so I’d love to hear about them in the comments section.

2 Comments

  1. Graham Hoffman

    Interesting read Dean, I’m using most methods but I should really re-visit my thumbnail/image sizes for the new theme I’m using.

    Out of interest, have you ever used the JetPack CDN (Photon)? It’s free and offered by WP provided you have a WP.com account. I’d love to hear any feedback if you had some.

    • Hi Graham,

      I actually haven’t used the JetPack CDN. I’ve never been much of a fan of JetPack, as I found it too bloated for the number of things that I might actually use. Perhaps it’s improved since the last time I’ve tried it so I’ll take another look.

      Definitely take a look at your images, it’s amazing what you can shave off them file size wise.

Leave a Comment

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