Optimizing Contact Form 7 for Better Performance

0
123
contact form 7

Contact form 7 is one of the most used free WordPress contact form plugin to send online emails directly from a website. Many WordPress themes made it mandatory to install this contact form plugin for their contact page templates. For a time being it is good to use this contact form until and unless it is not effecting your site load time but when you notice it’s JavaScript and CSS files are generating some extra HTTP requests negatively slowing down your site performance, you can consider to optimize contact form 7 plugin.

Why page speed is important? Because google has indicated site speed is one of the signals used by Google algorithm updates to rank high on Google. It is also important for a better user experience.

Minify CSS, JavaScript and HTML Codes

By optimizing your webpages code (including removing commas, spaces and other unnecessary characters), you can dramatically increase your page speed. Google recommends using YUI Compressor for JavaScript and CSS.

Well, here in this tutorial I’m not going in detail about Google page speed guide so back to the main topic on how to optimize contact form 7 for better performance.

Also see: Find out what wordpress theme a site is using.

The fact is Contact form 7 includes its JavaScript and CSS files on each and every page on your site. So probably you want to deregister these files from every webpages and want contact form 7 to load these CSS & JavaScript files only on the pages where you’re using the contact form 7 plugin.

It will save a bit of bandwidth and will also save your site from loading extra files on every page. Instead these files will be loaded on the pages with having contact forms.

Optimize Contact Form 7 WordPress Plugin – DeRegister CSS & JavaScript files

There are two different methods available on the web to remove contact form 7 CSS and JavaScript files. First method is officially introduced by the author of CF7 plugin – Takayuki Miyoshi and second one is WordPress functions php script made by any PHP script writer, I don’t know who is that great person but here I am introducing with both of the ways for optimizing contact form 7.

Method 1: Define Constants Values in WP-Config.PHP

Control CF7 behavior by defining some constant values in the wp-config.php file. Following are the steps to locate wp-config.php file.

  1. Launch FTP file manager from your web host cPanel.
  2. Locate the directory where you have installed your WordPress site (most likely it is /public_html).
  3. Look for wp-config.php file => select it and click on edit from top menu.
  4. Go to the end of the page => copy below code and paste it right above the /* That’s all, stop editing! Happy blogging. */
define ('WPCF7_LOAD_JS', false); // Added to disable JS loading
define ('WPCF7_LOAD_CSS', false); // Added to disable CSS loading

Now just save the file and it’s done. The code should be place correctly or else your site may be broken. Look at the below screenshot.

Optimize Contact Form 7
This is how it looks like after adding the above constant values.

If you’re not able to perform this method, don’t panic. Just contact your web hosting service provide to do this for you.

Method 2: Optimize CF7 By Adding a PHP Script in Functions.PHP

This may be an easy way for you for optimizing contact form 7. For this, first you will need to find the slug of the webpages on your site with contact form.

To do so go login to your WordPress back-end area and go to Pages. Click the Quick Edit on the pages having form and copy the slug. Suppose you have a page titled “Contact Us” which has a URL slug “contact-us”.

Go to Appearance => Editor and edit your theme’s functions.php file.

Deregistering Contact Form 7 CSS files

Copy below php function script and add it in the end of your theme’s function.php

// deregister Contact Form 7 styles from every page having no contact form
add_action( 'wp_print_styles', 'contact_form_7_deregister_styles', 100 );
function contact_form_7_deregister_styles() {
    if ( ! is_page( 'contact-us' ) ) {
        wp_deregister_style( 'contact-form-7' );
    }
}

Make sure you’ve replaced contact-us slug with your page’s URL slug in the fourth line of the code.

Deregistering Contact Form 7 JavaScript Files

Similarly, replace contact-us slug with your page’s URL slug in the below code (4th line) and add this in the end of functions.php file.

// deregister Contact Form 7 JavaScript files from every page having no contact form
add_action( 'wp_print_scripts', 'contact_form_7_deregister_javascript', 100 );
function contact_form_7_deregister_javascript() {
    if ( ! is_page( 'contact-us' ) ) {
        wp_deregister_script( 'contact-form-7' );
    }
}

That’s all, you have removed unnecessary HTTP requests from your site. Both of the above codes will check that if the webpage is not contact-us then it will automatically deregister the styles and JavaScript files from all other pages on your site.

Have Multiple Forms on Multiple Pages?

In this condition, you can use is_page() function in your code snippet. Referencing by WordPress Codex: is_page(). It can get parameter values as Page ID, Page Slug or Page Title. You can add an array of pages.

/**
 * is_page( array( ID, 'slug', 'Title' ) );
 * Returns true when the Pages displayed is either post ID 42, or post_name "about-me", or post_title 
 */
is_page( array( 42, 'about-me', 'Contact' ) );

These was the ways to optimize contact form 7 plugin by deregistering CSS and JavaScript files from the web pages without a contact form.

Share your Views / Comments / Suggestions ✍