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.

==>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

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

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

1. 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( 'wp_print_scripts', 'wpcf7_enqueue_scripts' );
remove_action( 'wp_print_styles', 'wpcf7_enqueue_styles' );
if ( $_SERVER['REQUEST_URI'] == "/contact/" ) {
   add_action( 'wp_print_scripts', 'wpcf7_enqueue_scripts' );
   add_action('wp_print_styles', 'wpcf7_enqueue_styles' );
}

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( 'wp_print_scripts', 'wpcf7_enqueue_scripts' );
remove_action( 'wp_print_styles', 'wpcf7_enqueue_styles' );
if ( $_SERVER['REQUEST_URI'] == "/" 
or   $_SERVER['REQUEST_URI'] == "/contact") {
   add_action( 'wp_print_scripts', 'wpcf7_enqueue_scripts' );
   add_action('wp_print_styles', 'wpcf7_enqueue_styles' );
}

“/” 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.

2. You need not to worry about the footer load of the scripts in the new version of Contact Form 7 (7.2.4.4). So skip this point!

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 or in includes => controller.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 ); 
}

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.