WordPress: Speed Optimize Your Contact Form 7

Optimize Your WordPress Site with CF7

If you run a WordPress site, chances are you might make use of one of the most popular free contact form plugins for WordPress. That is Contact Form 7.

Now, this is a pretty good plugin that does a good job. However, Contact Form 7 is per default set to load CSS and JavaScript file(s) on every single one of your pages, even if there’s no contact form. This is not necessary, and causes the site to load slightly slower. This is because of the 2x extra HTTP requests needed as well as the data size itself.

You know how important page speed is for SEO. So you really want to slim down your site as much as possible:

For page speed optimization every single little byte counts. Especially when trying to reach a page speed score of over 90/100 over at Google’s PageSpeed Insights.

So how can you include the needed CSS and JS files only on the page you actually have a contact form?

It’s pretty easy! You simply need to add the following 2x code snippets to the functions.php file that is located in your active themes folder:

1. Avoid loading the CSS file on every page except for your contact page

// Deregister Contact Form 7 styles
add_action( 'wp_print_styles', 'aa_deregister_styles', 100 );
function aa_deregister_styles() { 
	if ( ! is_page( 'contact' ) ) { 
	wp_deregister_style( 'contact-form-7' );
	 }
}

2. Avoid loading the JavaScript file on every page except for your contact page

// Deregister Contact Form 7 JavaScript files on all pages without a form
add_action( 'wp_print_scripts', 'aa_deregister_javascript', 100 );
function aa_deregister_javascript() {
		if ( ! is_page( 'contact' ) ) {
	    	wp_deregister_script( 'contact-form-7' );
	}
}

Note that you’ll need to adjust the if statement to contain the name of the slug (URL) you are using for your contact page. So if your contact page has the slug “contact-us” and is found at yoursite.com/contact-us you’d need to adjust to if ( ! is_page( 'contact-us' ) ) instead.

Big thanks out to Simon Carne who is using CF7 on his WordPress site over at I learned to Write who pointed out a typo in above JavaScript section: You’ve helped me improve my site! 😀

3. How to include multiple-forms on several pages?

You can use the is_page() function to add an array of pages. Use it to fetch the necessary parameters such as Page Title, Page Slug or Page ID:

is_page( array( 23, 'about-us', 'Contact' ) );

PageSpeed and loading times of your site are highly important for SEO and user experience. Because visitors bounce off slow sites really fast. Especially true in e-commerce, where a few seconds of extra page loading time means double digit bounces.

Speed and performance optimization is an integral part of my holistic SEO solutions. Your really want a website that is loading blazingly fast increase your conversion rates. It’s easy:

A fast loading site ranks higher in the search engines, and converts more visitors into buying customers.

Because of the importance of page speed optimization, I’ll be sharing more of my knowledge with you soon. And show you how I manage to reach a PageSpeed rank of more than 90/100 for core landing pages.