How I Speeded Up Our WordPress Blog

Our site was getting kind of slow, so I decided to read some articles about how to speed up a WordPress blog. While many give really great tips on what to do, I just want to add some own experiences.  The speed of loading this blog decreased from an average of more than 9 seconds to an average of 6 seconds.

This is not going to be another one of those articles that list all possible ways of optimizing your WordPress blog. Here, I will tell you some of the points of what exactly I did for our blog and what effect it had.

A very useful “tool” to see how long your site needs to load is the Resource Inspection of Google Chrome. When you open your site in Chrome you can right click and choose “Inspect element”. This will open the Inspector and you can choose the Tab “Resources” in order to see what takes how much time and a lot more.

Now you will have an exact overview of all the things that are being loaded in your site – don’t be shocked, it will be a lot more than you thought 🙂

Of course, loading times can vary a lot during periods of high and low traffic, check it at both times and you will get a feeling for how long your blog takes in average.

Here are the main reasons why our blog was slow and that you can check for your blog:

1. HTML document too big

If your document itself takes a long time to load, there can be some reasons, two important ones, that you can check are:

1. Amount of content: If the page that you are inspecting has a lot of content this will of course take it’s time to load. Especially the index of blogs can be very heavy sometimes. Check, how many previews of articles you are showing, make sure it is not too much. Our blog was showing more than 10 entries in the beginning and I decided to reduce that to 7, and it helped.
2. Your server: If you have a shared hosting plan, it might as well be the case that you are sharing the server with a lot of people and at high traffic times you notice that it takes longer for your blog to load. Ask your hosting company how many people are on the same server and if it’s packed full, you might want to consider changing to a dedicated server.

2. Uncompressed CSS

I was really surprised with how many CSS files were loaded. Because it is not only your main style file that get’s included, but also all style files associated to your plugins. So check what gets loaded and compress all the CSS file that are used. Don’t forget to do a backup of the non-compressed version for later editing 🙂
I personally like the compressor at cssdrive.com because it allows you to specify some parameters and you can see the percentage of compression.

Around 1.5 to 2 seconds were spared in our blog after we did that to all CSS files!

3. Unnecessary and uncompressed JavaScript

You will be as well surprised to see how much script code your page is loading, depending on how many plugins you have and other little script snippets that you had to include (e.g. Google Adsense, AddThis, BuyAndSellAds, Blog Directories, etc.).
As an example: We are using the Syntax Highlighter and Code Prettifier Plugin for WordPress to format our code sections nicely. I noticed that for each brush a JavaScript file gets loaded. But because we just use certain types of languages, not all are necessary.
So, I looked into the main php of the plugin and removed all unneeded script inclusions from the function that adds the references into the header.
This helped a lot because I reduced the amount of JavaScript files included by that plugin to half.
So, check your plugins and what exactly they are including in your pages, and get rid of the ones that you know are not needed.

If you find JavaScript files that look nicely formatted, you can as well spare some space by compressing them.

3. Non-existent images

Since I changed the whole style of our blog, I cleaned up the main CSS and also the images folder of the theme. By mistake I removed some images that were referred to in the CSS, but since I didn’t need them I was not noticing their absence when I was restyling the blog. The browser will try to load the image and this can increase the time it takes for the whole page to load. So, check if you don’t have any dead images in your page, it will help a lot to remove the reference to them.
This gave us almost another whole second less because we had three of them (tiny ones)!

After each compression, removal or fix that you do, check in Chrome how your pages load. You can clean your cache so that you can always watch a “fresh” loading of your page where images are not called from the cache of the browser. At the top right in Chrome you can click on the options icon and select “Clear Browsing Data”. Select that you want to clear the cache.

It will be a great feeling to see how it takes 3 seconds less because you cleaned up!

More articles about speeding up your WordPress blog can be found here:

4+1 Ways To Speed Up WordPress With Caching

38 ways to optimize and speed up your WordPress blog

Diggproof & Speed up Your WordPress Blog

I hope it helped a little! Enjoy!