Contact form 7 render blocking CSS WordPress

“wp-content/plugins/contact-form-7/includes/css/styles.css” is loaded before the </body>, by default. If it’s not your case, try switching theme to the default one (twentysixteen).

I have done that and no change. what i am trying to do is to not have “wp-content/plugins/contact-form-7/includes/css/styles.css” in the header but footer.php

You can’t load CSS stylesheets in the footer.

This will fix the render-blocking.

Can you be more specific about this, please?

You can modify the code of wp-content/plugins/contact-form-7/includes/controller.php file.

First remove the code of loading styles.css from wpcf7_do_enqueue_scripts function.
And then add following codes.

add_action( 'wp_footer', 'wpcf7_do_enqueue_style_to_footer');
function wpcf7_do_enqueue_style_to_footer() {

	if ( wpcf7_load_css() ) {
		wpcf7_enqueue_styles();
	}
}

Let me know if it can help you.

@khanhoff, This really worked. Thank You!

@takayuki Miyoshi are we able to expect this on the next update as it really remove the issue of rendering CSS

Thank you both

So, what’s the issue?

without that fix the contact-form-7/includes/css/styles.css is blocking CSS resources. Which causes a delay in rendering page.

You can see that by using google speed test tool

I think you have the wrong idea. Take a look at the HTML source of your site. Where do you find other CSS stylesheets loaded?

Can you remove or move the render blocking script or CSS from this plugin Takayuki?

This way we all get better results from SEO checking programs and quicker sites.

I also thought it was normal to enqueue the files so they could be deferred etc.

Hi, thanks for the plugin, it’s great but I think the same as the rest, please you should update the plugin to avoid the Google block warning. In my configuration it is the only plugin that blocks and prevents us from getting a 100/100 It would be great to be able to get it without the hook. Thank you.

Is there anyway we can help you update the plugin?