Last 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.
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.
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.
The various parts of caching are as follows (I'm using W3 Total Cache in my examples):
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.