Speed up Wordpress plugins

One of the biggest problems with a Wordpress site is optimizing its speed.  If you use the popular plug-in for FireFox Yslow, or Google’s page speed they will always tell you to move the JavaScript to the footer in order to make your page load faster. Or, you have too many style sheets and scripts on one page and it wants you to combine them. I have a pretty simple solutions that you can use to tell any plug-in your using to only be displayed on the page it is being used AND put the JavaScript in the footer.

Optimize: Contact Form 7

One of the top Wordpress plug-ins to download is Contact Form 7 (best form plug-in in my opinion). One great thing about this plug-in is that it automatically moves its JavaScript to the footer of your site. But, the JavaScript is still used on every page as well as the style sheets. Now, if your like me you just need these styles and scripts to run on one page, not throughout the entire site. Here is how to fix this.

First things first, make sure you set up Contact Form 7 and its working 100% correctly out of the box before you begin editing its current functionality.

Step 1

Open the main PHP file for the plug-in, in this case its wp-contact-form-7.php located in the plug-in’s root folder. What I usually do is search for any reference to the scripts or styles that I want to move. If you do a search for .js you will come to several lines of code seen in the image below.

As you can see above wp_enqueue_script() is being used to queue the JavaScript into the Wordpress loop. The most important part of this function is the name of the script that is being queued, “contact-form-7″. Make note of this.

Step 2

Now one of the most important parts of moving this code around, so we can speed up our page, is to do it without editing any of the original plug-in files. And you ask “WHY?”.

Well, lets say you do all kinds of edits to this plug-in’s php files and you get your page to humm like a top and your all super happy eating ice-cream and smiling. Then the next time you open up your Wordpress dashboard you see a warning to update your plug-in because it has a security bug or something, put down the ice-cream, update your plug-in and watch all your awesome work go away…

Yeah sucks doesn’t it?

So, how can you edit what a plug-in does without touching it? MAGIC!! No, just kidding, all you need is your functions.php file in your child theme, or if you don’t have one just create it and add the code below.

[php]
<?php
function my_deregister_javascript() {
if (!is_page(‘contact’)){
wp_deregister_script( ‘contact-form-7′ );
}
}
add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );
?>
[/php]

Step 3

Now you can paste that code in your functions.php file and wonder why its not working or you can continue reading. Here is what this function is doing.

function my_deregister_javascript() {

The above line begins your function and names it, you can make it say whatever you want, as long as it is unique, but I like my_deregister_javascript().

if (!is_page('contact')){

This is very important! The above line looks for the pages that ARE NOT! named “contact”. So, if you have Contact Form 7 on a page called “snuffalupagus” then this line should read,

if (!is_page( ’snuffalupagus’ )){

If you have multiple forms on different pages then it would change to,

if(!is_page(array(‘page1′,’page2′,’page3′)){

wp_deregister_script( 'contact-form-7' );

The above line is the action line. It de-registers the script from the loop, kills it, stops it from running, EXTERMINATE! Sorry, was just watching some Doctor Who….

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

The above last line just ads our new function into the queue at position 100.

Step 4

Check to make sure that the scripts used for Contact Form 7 are no longer in the footer for every page except for the page/pages where your forms are being used, and pick up your ice-cream again.

Step 5

Paste the code below into your functions.php file. This will remove the Contact Form 7 style sheets from the head of all your pages except for the page named “contact”. Essentially, this is the same code as above, and you should adjust accordingly.

[php]
<?php
function remove_contact_style(){
if (!is_page(‘contact’)){
remove_action( ‘wp_head’, ‘wpcf7_wp_head’ );
}
}
add_action(‘wp_head’, ‘remove_contact_style’, 9);
?>
[/php]

Your Done!

Hopefully that wasn’t too hard .

Optimize: WP-Cufon

WP-Cufon is a great plug-in that i use on my site to turn all heading into a no web safe font. The JavaScript used for this plug-in is needed on every page but, using the code below you can remove the JavaScript from the head and put it in the footer where it belongs.

[php]
<?php
function remove_scripts() {
remove_action(‘wp_head’, ‘wpcufon_init’);
add_action(‘wp_footer’, ‘wpcufon_init’, 9);
}
add_action(‘init’, ‘remove_scripts’);
?>
[/php]

That’s all for now, more to come later…