Optimize WordPress loading times

I'm using WordPress as the blogging software of choice for Ghacks and all of my other blogs. After reading Paul Stamatious article on optimizing CSS for WordPress I decided to give it a try and see if page loading times would benefit at all from it. I also had to check if the optimization would change the way my blog would be displayed or would throw up errors.

I began by analyzing the page loading times of my blog without any optimization. The result for the front page was that my blog had a total size of 166K that visitors had to transfer to their computer. This was made up of HTML, CSS, JavaScript, Images and other files that were loaded during connection.

This meant that users on ISDN (128 Kbit) would have to wait 18.55 seconds before my site was fully loaded. Users on T1 connections, meaning 1.44 Mbps, would have to wait 9.28 seconds.

The figures are of course only valid if they do not use part of their download speed for other transfers at the same time. The first thing that I decided to do was to enable gzip compression in WordPress. Before I enabled it I did a quick check to make sure that the web server the site was running on supported the gzip command. You can run a simple phpinfo() command for example to find out about that.

I tested the result and the page size went down almost 35%! It went down 58K to 108K total. The time users with ISDN had to wait before the full page is loaded was reduced by almost 4 seconds from 18.55 seconds to 14.80 seconds. The loading time for T1 users was reduced by 0.51 seconds to 8.77 seconds in total.

I still did not apply the optimization that Paul suggested and that is what I intended to do next. His suggestion was to gzip compress the css file as well to reduce loading time even further.

I found reference to a nice WordPress plugin in the comments of his post. The plugin is called css-compress. It just has to be activated in the plugin tab in WordPress. The advantage of using css-compress over Paul's method is that css compress compresses all css files even those of third parties such as those from advertisers or other plugins.

Another check reported that the total size of my blogs frontpage was again reduced by almost 10k from 108K to 98K. Loading time was again reduced by 1.17 seconds for ISDN users and 0.65 seconds for users with a T1 connection.

I was not able to witness any negative effects on my blogs design, the functions or server load. Sure it uses a little bit processing power but this should only be a problem for weak shared hosts.

You can check the loading speed of websites using the nice script available at website optimization.

Other WordPress optimization tips

• When you are running the web page speed report script linked above, look at the files that are loaded. If you find many small CSS files here check out where they are coming from. Some WordPress plugins load their own CSS and with it images that get automatically loaded on every connection, even if the images are not displayed at all on the screen. Many small files increase the time it takes to load a website fully so make sure you only keep those included if they are needed.
• You can usually remove them by editing the CSS files that the plugins ship with manually. Look for gif, png or jpg references here and remove the complete line to block the files from being loaded.
• If you are loading multiple smaller images try to combine them using CSS Image Sprites.
• I'm not using CSS Compress anymore. Instead, I'm using WP Minify on all websites as it can minify CSS and JavaScript files.
• You need to enable gzip on the web server. If you do not have access to that, install a caching plugin like WP Super Cache to enable it here.
• Check your images to make sure they are optimized before you upload them. You can use programs like PNG Gauntlet, RIOT or Caesium for that.

Advertisement