From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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:
- 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.
- 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!
Pingback: How I Speeded Up Our Wordpress Blog | Codrops
Pingback: links for 2009-12-09 | dies und das | XSBlog2.0beta
Yeah your site loads really fast, good work. Your changes optimized it for sure but I’m curious what host are you using?
@Anders, we are using Valcato Hosting which I can only recommend. They have a great service and support!
Pingback: Wordpress: consejos para optimizar los tiempos de carga de tu blog - elWebmaster.com
I was reading this article with a lot of interest (even though our small fansite is only a small traffic site) as it had actual practical advice – thank you – although the biggest surprise was really finding out you’re also hosted by Valcato as well.
John and Adam are brilliant! 🙂
Hi Flick,
yeah, Valcato is great (let’s do some advertising here :-)) We are already using the name “John” in reference to any problem. When we cannot solve something, we use to say “Ask John, he will solve it!” because he always helped us so much. He is our hero 😀
Greetings,
ML
Hi Mary Lou
I absolutely agree! John is really amazing – I don’t know how he juggles it all; my support tickets are always resolved so quickly. I only wish I had the skills to utilise all the other cool functions they support now – like Ruby on Rails, Django etc.
p/s: I’m sure Valcato had a directory of Customer Websites on their website somewhere – CODROPS should be listed on there!
Thanks for your kind words guys. It’s seeing comments like these that make our hard work worth while 🙂
Incidentally our Customer Websites Directory can be found at http://hosted.valcatohosting.com
Some good tips here, and some nice comments about us too 🙂
In addition to all the optimisation tips already mentioned, I’d strongly recommend that anyone using WordPress also use the WP Super Cache plugin (http://wordpress.org/extend/plugins/wp-super-cache/). It saves a cached, gzipped copy of pages to disk, which then get served directly by Apache — this means pages can be served without executing any PHP code, and since the cached files are gzipped you get the benefit of reducing data transfer to a fraction of the full size of the HTML, without having to compress the output for each page load. I wouldn’t be surprised if you shaved off a few more seconds just by installing it.
i appreciate interesting article. I was initially pleased once i checked out ones piece of writing and now have made a membership into it. Make sure you revise this short article when you can because I’d like more information.
This was a great post, changes I learned here decreased my sites load times by 46% thanks will give a trackback- Thanks
Thanks for the hosting rec. I signed up today and their speed blows away what I had previously! Thanks much.
I speeded up my wp-powered site with hiphop-php + varnish cache + compressed css/js(css image sprite files included in css file as base64 encoded strings)
Nice post
Cache and sprites for images can improve the website performances