YSlow And Wordpress - Plugins Kill Your Score

YSlow is a Firefox Add-on by Yahoo! that analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites.

Wordpress plugins kill your YSlow score. Everyone has always known that plugins can slow your blog on the backend, but YSlow reveals the drag some plugins can cause on the frontend.

YSlow scores HTTP requests heavily. The more HTTP requests your page makes, the less efficient and slower the page load. Plugins that call javascript functions as external files lower your YSlow score considerably. If you have 5 plugins that use javascript, that’s 5 external HTTP request that can slow your page.

There isn’t a lot that can be done to improve your YSlow HTTP request score if you have plugins calling external javascript.

Most plugins I’ve seen that have javascript also choose to put the javascript in the head of your page. Calling javascript in your head will lower your YSlow score. Most plugin authors seem to rely on the wordpress hook

add_action('wp_head', 'function')

to call javascript for their plugin.

Using wp_head to load plugin javascript is inefficient at times for a few reasons. The first reason is a general plugin problem - do you really need your plugin on every page? There was a time when most plugins required a blog owner to edit a template file to insert the plugin function. This was more efficient because you didn’t have plugins loading on every page when you weren’t using them on the page. The current preferred method of using a hook to call a plugin cannot be applied selectively to certain types of posts and pages so all elements of the plugin are loaded for every post or page even you are not using the plugin on that post or page.

The second reason wp_head is an inefficent method of calling some plugins and their javascript is that YSlow and the engineers at Yahoo! have determined that loading javascript in the head of a document can increase page load time. If javascript can be lowered in the document and called elsewhere, the page can load faster according to YSlow.

As an example, consider comment plugins like Live Comment Preview, one of our favorite popular plugins. This plugin uses javascript and calls the javascript using wp_head unnecessarily. The plugin will work if it loads the javascript with the Wordpress hook

add_action('wp_footer', 'lcp_add_js')

Loading the plugin when the footer is called lowers the javascript in the document, an element that will improve your YSlow score and speed up your blog.

Another way plugins can kill your YSlow score and slow down your blog is through the lack of an expires header in the plugin javascript. YSlow loves “expires headers”. An expires header tells a browser how long to store something so the browser doesn’t have to look it up everytime the browser loads a page. If a browser can use the file it has stored from the last time it visited your site and doesn’t have to load the file again, your blog will be faster.

Wordpress has an includes function ‘cache_javascript_headers()’ that will add an expries header to javascript automatically. It seems that most plugin authors are not taking full advantage of this feature. From the 10 or so plugins we evaluated this weekend, only one, Lester Chan’s WP-Ratings, uses the ‘cache_javasript_headers()’ feature.

The average blogger is probably not going to be too concerned with using YSlow to speed up there blog. Many of the elements are too complicated for the average or below average blogger to implement and the page load time increase may not be something worth the frustration. However, plugin authors should consider using YSlow to make their plugins as efficient as possible.