Optimize Contact Form 7 Wordpress Plugin By Removing jQuery From Head

There are two optimizations that we can do in order to avoid the heavy jQuery library load on the web page if the Contact Form 7 wordpress plugin is activated on the blog.

==>Remove the load of jQuery.js, jQuery-form.js and/or contact-form-7.js from the head section of the blog post/page

==>The jQuery library, jQuery-form.js, contact-form-7.js as well as the Contact form 7 stylesheets should be included only when we want a contact form on that page. For all other pages, there is no need to include these libraries or files for Contact Form 7

Follow the below steps in order to optimize Contact Form 7:-

1. On the wp-admin panel, in the Plugins editor, select the editor for the Contact Form 7 plugin. Find the below code, it would be either in wp-contact-form-7.php or settings.php depending on your contact-form 7 version.

function wpcf7_enqueue_scripts() {
  $in_footer = true;
  if ( 'header' === WPCF7_LOAD_JS )
	$in_footer = false;

  wp_enqueue_script( 'contact-form-7',
  wpcf7_plugin_url( 'contact-form-7.js' ),
  array('jquery', 'jquery-form'), WPCF7_VERSION, $in_footer );
}

Replace the above code with the following code:-

function wpcf7_enqueue_scripts() {
  $in_footer = true;
  if ( 'header' === WPCF7_LOAD_JS )
     $in_footer = false;

  wp_register_script('jquery', false, false, false, $in_footer);
  wp_enqueue_script( 'contact-form-7',
     wpcf7_plugin_url( 'contact-form-7.js' ),
     array('jquery', 'jquery-form'), WPCF7_VERSION, $in_footer );
}

2. Add the below code in the functions.php that you could find in Appearance => Editor, on the right hand side of your wp-admin panel. Put the code at the end of the file before the closing php tag ?>

remove_action( 'init', 'wpcf7_enqueue_scripts' );
remove_action( 'wp_head', 'wpcf7_wp_head' );
if ( $_SERVER['REQUEST_URI'] == "/contact" ) {
   add_action( 'init', 'wpcf7_enqueue_scripts' );
   add_action('wp_head', 'wpcf7_wp_head' );
}

The $_SERVER['REQUEST_URI'] == "/contact" indicates that you have to include the script and styles only for the contact page with URI http://www.examplesite.com/contact. If I had to include it for home page also then my code for function.php would be as follows:-

remove_action( 'init', 'wpcf7_enqueue_scripts' );
remove_action('wp_head', 'wpcf7_wp_head' );
if ( $_SERVER['REQUEST_URI'] == "/"
or   $_SERVER['REQUEST_URI'] == "/contact") {
   add_action( 'init', 'wpcf7_enqueue_scripts' );
   add_action( 'wp_head', 'wpcf7_wp_head' );
}

“/” indicates “http://www.examplesite.com/”

Remember that you need to specify the condition depending on the URI (URL) of the page and not the page name in wordpress.

Thus, by adding the above code to optimize Contact Form 7 wordpress plugin, we would get the necessary scripts for Contact form 7 on only required pages and not all pages/posts. This is because, most of us want our post posts to be light weighted with small size, so that they load fast for those visitors who come from search engines searching something! And also, we do not want the scripts and styles loaded for that application which we are not using on that particular post.