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!

32 ideas on “Hack Your WordPress Plugins for Speed

  1. mlane

    Hack Your WordPress Plugins for Speed – http://bit.ly/163w2e

    This comment was originally posted on Twitter

  2. mayoosuf

    Hack Your WordPress Plugins for Speed – http://bit.ly/163w2e via @wpstudios

    This comment was originally posted on Twitter

  3. JennMcGarity

    @spamboy RT @iamPariah: Hack Your WordPress Plugins for Speed http://tr.im/vvwq

    This comment was originally posted on Twitter

  4. Mauro

    Awesome!, I really like it. I’ll keep it in mind when optimizing my blog.

    Thanks!

  5. Pariah Burke

    Great idea! Thanks for documenting it.

    • Andy Gongea

      I’m glad you like it.

  6. piervix

    Hack your WordPress plugins for Speed – http://bit.ly/5TtU9

    This comment was originally posted on Twitter

  7. rodneyvanzee

    Reading: Hack Your WordPress Plugins for Speed http://tr.im/vz0W

    This comment was originally posted on Twitter

  8. buysellads

    need for speed – Hack Your #Wordpress Plugins for Speed http://bit.ly/xAvLf

    This comment was originally posted on Twitter

  9. joshlyford

    Currently reading http://bit.ly/5TtU9

    This comment was originally posted on Twitter

  10. bigtex23

    Nice! RT @joshlyford: Currently reading http://bit.ly/5TtU9

    This comment was originally posted on Twitter

  11. EasyWPAdmin

    Excellent suggestion. You get a cookie :)

    • Andy Gongea

      Thanks :D
      Nice blog you got there.

      Cheers!

  12. pererinha

    Hack Your WordPress Plugins for Speed http://bit.ly/5TtU9

    This comment was originally posted on Twitter

  13. pinceladasdaweb

    Hack Your WordPress Plugins for Speed: http://migre.me/4MuU

    This comment was originally posted on Twitter

  14. iodicdesign

    Hack Your WordPress Plugins for Speed – http://bit.ly/oX8ia #WordPress

    This comment was originally posted on Twitter

  15. nicolovolpato

    Hack Your WordPress Plugins for Speed http://bit.ly/5TtU9
    (via @andygongea)

    This comment was originally posted on Twitter

  16. Stephen Cronin

    Bad Advice! Sorry, but this will result in invalid HTML. The link element MUST be inside the head section.

    Now the JavaScript files can be added in the footer (in most cases), but not the CSS files.

    I believe future versions of WordPress will group the separate CSS files into one big one, which will speed up the page (because there will be less http requests), but I’m not sure when this will come in and it will only work if plugin developers call the CSS using the correct method. Still it should be an improvement.

    In the meantime, if you don’t want these files to be loaded on the front page, you could wrap the call to them in a:
    if (!is_front_page()) {

    }

    However, as you say all plugins are different and there are no guarantees that this won’t screw up your site! Be careful.

    • Andy Gongea

      Yes Stephen, you are right – this will make your HTML invalid. But believe me, between a valid and lazy site and a invalid but fast one – I choose the second one.

      This thing with validation is another topic – you can check multiple web design sites and see how much care for valid code. I’m sure we all want valid code but we also want sites that work fine which is the ultimate goal.

      Thanks for your comment Stephen,
      Cheers!

  17. Stephen Cronin

    Further to my comments above, I’d strongly recommend people reading Justin Tadlock’s recent article on how to do this properly.

    http://justintadlock.com/archives/2009/08/06/how-to-disable-scripts-and-styles

    Note: You still don’t want to try this unless you know what you’re doing, as you can break your site.

    • Andy Gongea

      Thanks for the link Stephen.
      The approach in Justin’s articles is much better, but then again you mustn’t be newbie.

  18. Valentino Aluigi

    that’s not the best way to place Javascript in the footer.

    a well-written plugin should use wp_enqueue_script to add Javascript.

    starting from WordPress 2.8 this function has a new parameter that define if the code is loaded in the header or in the footer

    more info: http://lesterchan.net/wordpress/2009/01/26/loading-javascript-in-footer-in-wordpress-28/

  19. prasadsambari

    Currently reading http://bit.ly/5TtU9

    This comment was originally posted on Twitter

  20. stefan_persson

    Hack Your WordPress Plugins for Speed http://bit.ly/163w2e

    This comment was originally posted on Twitter

  21. Shloka

    Hack Your WordPress Plugins for Speed http://bit.ly/fCsae (via feedly)

    This comment was originally posted on Twitter

  22. haRacz

    http://bit.ly/5TtU9
    hack your #wordpress plugins 4 speed

    This comment was originally posted on Twitter

  23. reese

    Hack your #wordpress plugins for speed http://ow.ly/jy41

    This comment was originally posted on Twitter

  24. fairminder

    WordPress: By simply moving code to the bottom of the page you can speed up page load. This is a gem. http://cli.gs/Plugin-Speed

    This comment was originally posted on Twitter

  25. JP

    What you showed in this article would actually slow down the site even further.
    What I suggest is to find out what css or js file the plugin adds to your header and stop the plugin from adding it to the header.

    Then, manually copy the css rules from the plugin and put it into your main css file.
    This way you’ll have less HTTP Requests which in turn speeds up your site.

    For more info website performance take a look at: http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website

  26. Shamima Sultana

    wow..its really great tips..thanks for sharing…

  27. yeşilçam sineması

    wordpress blog very nıce web side and wery speed

  28. hack

    thank you very much