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!

Andy Gongea is a passionate UI/UX designer with a great appetite for technology and trends. Currently he owns, a future wife, a loan that comes with a monthly fee and some strange ideas about user interface and user interaction. Cheers!

Sponsors

Community Links

  • Create the Toyota logoHi there. In this tutorial you can learn to create the Toyota logo. It is all about circles and the Pathfinder panel. You will have to create a series of circles of exact dimensions. Regarding that,the grid and the snap to grid option will ease your work.
  • 60+ Creative And Well Designed PagesWhen doing my research for 404 error pages, I was surprised to see that three quarters of the websites I visited did not have custom 404 error pages.
  • Design an animated banner in PhotoshopIn this tutorial I will show you how to use Photoshop to create an animated leaderboard banner.
  • Top 10 Websites To Brush Up Your jQuery SkillsTo brush up your skills in jQuery, we present you Top 10 Websites For Free jQuery Tutorials that have been providing some cool demos and step by step guidelines, such that a beginner can master his skills of jQuery easily
  • Top 8 Principles of Effective Website DesigningEverything is guided by certain set of standards, rules and regulations. If the task is not driven by some guidelines, then it could face difficulties for its successful completion.
  • 61 Incredible Logo Designs #3Here’s yet another roundup of amazing logo designs. This is a series that we do frequently, so make sure to check out the past logo articles.
  • 20+ Amazing Product PSD files found on DeviantARTThese are a selection of over twenty PSD files which I have found over on DeviantART, specifically of various electronic products.
  • Create a documents icon in IllustratorHi there. In the next tutorial you’ll learn to create a pretty common icon. To reach this result you need to know how to use the Rectangle Tool, the Pen Tool or the Type Tool.
  • 10 Downing Tweets10 Downing Tweets is a Flash and Twitter based website created by twentysix Leeds. The site includes a twitter vote, a daily poll and an insight on the twitter noise the election is receiving. Will the final results on our site echo who gets elected?
  • 20 Clever Futuristic Free FontsFuturistic fonts were always one of my favorite font styles. I was never that much into grunge and similar styles. I rather keep it clean, but still cool looking. If you like this style, take a look at the collection of 20 free futuristic fonts I put toge

Friends