New WordPress Theme – Slow Performance

Well I did it again. Not being happy with my last theme, I decided to start a new theme from scratch. The good news was that I was able to reuse some of the PHP code from the last theme, so I saved some typing. I’m happy with how this theme turned out, so I’ll keep it for a while.

One issue I did notice was that this theme became slow after I applied it to Technically Easy. I couldn’t understand why, as the amount of code is actually less than my previous theme. Upon further investigation, I was able to determine a problem, which was unrelated to my theme, and was able to find a solution.

Performance Check

Pingdom Logo

Whenever I want to test the performance of my blog, I quickly turn to Pingdom Tool’s Full Page Test. I once again used the tool to find the performance problem. I simply entered my blog’s URL into the edit box on the web page, and clicked the “Test now” button.

Within a matter a seconds I received my results. The tool shows how long each object takes to download from the web server. When I viewed the results of the test I noticed that there were a few Javascript files being loaded. One of the files (prototype.js) was over 120 KB in size, so it was a big chunk of my blog’s download size.

After doing a quick search within the WordPress forums, I found out that that the prototype.js files was only needed within the admin pages of WordPress. So why was it loading when I displayed a page on Technically Easy?

As I read further, references were made to that fact that plugins can also load those files when needed. I quickly went back to my list of plugins.

Disabling a Plugin to Increase Performance

Many plugins load various files when they are used. In my case, a large Javascript file was being loaded on each page request. This slowed down the viewing of my blog, since the browser waited to download the file from the server.

I knew of one plugin that required Javascript files to display larger views of my images to a visitor. This plugin was called Lightbox 2. While I did enjoy using the plugin, I wanted to find a solution that would allow me to control when to load the Javascript files instead of loading them all the time. I also found out how to do that as well.

I came across a post on Yoast called Quick WP tip #2: Conditional Thickbox loading that explained how to load Thickbox Javascript files only when needed. Thickbox does the same thing as Lightbox, so I decided to disable the Lightbox 2 plugin, and use Thickbox.

After modifying my posts to use Thickbox, I added the function from the Yoast post into my theme’s functions.php file. I then disabled the Lightbox 2 plugin and tested the posts.

Each post that used the Thickbox script to display the larger images loaded the correct Thickbox Javascript files. The pages that didn’t use Thickbox, didn’t load the Thickbox files. I also no longer had the prototype.js file loaded when viewing my blog. This has increased the load of my blog dramatically.

If the performance of your WordPress blog is not where you want it to be, I suggest you perform a test to find out which object is causing the slowdown. From there you can research a solution to the problem.

Follow Me