Hack Your Wordpress Plugins for Speed

Back in September 2007, Steve Souders published his book High Performance Web Sites. This book is describing ways to improve your site speed and at the same time to create a better user experience. In the book there is one rule that says: CSS at the Top. By this, Steve is saying that you should put the CSS in the Head section of your HTML using the LINK tag. The reason for this is because the page renders progressively: first text then styling.

In order to improve the speed and performance of a Wordpress site, I have to tell you to kinda drop that rule. That is mainly because almost every Wordpress site has multiple plugins installed. For instance, Graphic Rating has several plugins but 3 of them have a direct impact on the speed of the web site. When the page is rendered, these plugins require their own CSS files to be linked to the site. That means that 3 more CSS files are added to the head of the page. Also some of the plugins have Javascript files that must be loaded (jQuery plugins, custom js).

…The Problem

So what seems to be the problem? The problem is that while these plugins are used in the site, they are useless in the front page. This means that every new user will see a slow webpage at first sight because of these plugins. The way to deal with this problem is to tell the plugins to load their stuff in the footer. In this way, the user will see the entire front page faster, while at the end of the loading time plugins’ stuff will get loaded.

The Solution

For now, the solution is to manually edit your plugins and change their position of rendering from header to footer. This is a tricky move because you must edit the plugins’ files. Another thing that you must consider is that you won’t find the same structure inside the plugins.

Steps to Solve Wordpress’ Speed Problem:

1. Navigate into the Plugins directory ( http://YourSite.com/wp-content/plugins/)
2. Edit the plugin’s .PHP file
3. Search where the fuction add_action is called
4. Change wp_head with wp_footer
5. Save, empty browser cache and reload broser.
7. View source and check

and The Result

After this operation, my footer contains 2 CSS (I coudn’t make the third CSS work :D ) files that were moved from the header and also 2 Javascript files. Also remember that the rest of the page below a Javascript link is blocked until the js file is loaded. So, as a conclusion, you can achieve better performance by putting the CSS on in the footer instead of the header for the secondary Wordpress elements (NOT the main style).

Cheers!

Spread This Post

Please share this post with others and spread the information contained in this article.

You can subscribe to our RSS Feed, follow us on Twitter or share this article on various News sites like Digg, Delicious, Facebook or StumbleUpon.

You can also share this article on othere sites that you like. Cheers!

30 Tweets 11 Other Comments

30 Responses to “Hack Your Wordpress Plugins for Speed”

Trackbacks/Pingbacks

  1. CSS Brigit | Hack Your Wordpress Plugins for Speed

Additional comments powered by BackType