What is Contact Form 7?
Contact Form 7 is a plugin for WordPress, which lets you create custom forms for your pages and posts. I will not go into the details of the plugin since I am assuming you already are using it and is aware of it. This article covers the issues of using Contact Form 7 plugin and how to fix it.
What is the issue?
- /wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.1.4 (Stylesheet file)
These extra files loading, as well as the HTML code used to call them, not to mention the inline code associated with the JS file, add up to the total size of the page: the number of HTTP requests and the HTML source code size (this is a minor thing, but when dealing with tens of files, it adds up).
The question is why? This is making my website slow. Why do my website readers need to download these files unnecessarily on every page they are viewing?
How to fix the issue?
You can still go ahead and use the Contact Form 7 plugin to create custom forms for your website. You can follow the steps mentioned below to fix the performance issues of Contact Form 7 plugin for WordPress. The final outcome would be:
- Both the files will be minified and as a result, the download size will reduce.
Enough said, let’s see how to fix it.
Step 1: Use W3 Total Cache plugin to minify.
Go to your Admin Dashboard -> Performance and click on Minify from the menu ( ** Install the W3 Total cache plugin if you have not). Now, Under JS minify settings, add the URL of your script file. Click on the Add a script button and paste the URL in the text input field.
Replace your_version with the version of your file.
See the screenshot below
Do the same for the stylesheet file under CSS Minify settings.
Step 2: Use Asset CleanUp plugin to unload Contact Form 7 from other pages
Install the Asset CleanUp: Page Speed Booster plugin, if you have not already done so.
Go to your Admin Dashboard -> Asset CleanUp and then click on CSS/JS Load Manager from the menu. This will show you a list of all the plugin files that are being downloaded on the home page, posts page, other pages and so on.
Refer to the screenshot below.
Using the Asset CleanUp plugin you can basically have total control of all such unwanted files, when and where to load them. You can disallow from the entire site or allow in specific pages where they are needed.
Once you have followed the steps, clear/purge your website cache and do a speed test. I am sure the numbers will improve. I have made my website faster by around 15%. This is a significant number when it comes to performance.
Give me a shoutout in the comments section if you have been able to follow the steps and improve your website’s performance. Cheers!!
What people say…
You may be interested in my other articles: