How to Go About Optimizing CSS and JS for Core Web Vitals

By: Mark Hansen | Asked: 09/07/2022
ForumsCategory: General questionsHow to Go About Optimizing CSS and JS for Core Web Vitals
Mark HansenMark Hansen asked 2 years ago
Hi All - Formidable Elite user here and hoping to gain some insight on optimizing the css and js in Formidable for maximizing the page load metrics for Google CWV. (Yes, I'm an SEO guy, obsessed with pagespeed metrics).  The css and js are render blocking and since I use some forms above the fold, moving it to the footer is worse since it causes a considerable layout shift. 

Overview - 

I have many 1-field forms that load on different pages (1 form per page) where the only fields are a single text field and the submit button. When the user submits the form, it sends the input data to a second page, containing the final form that's needed to complete their request. 

The problem with this is that due to the way Formidable only allows us to load css on "ALL" pages, or "Pages where needed" is that it loads up all of the CSS and all the JS from FormidablePro, and only about 1% of it is used on this first form page. I want to remove it from loading on these single-field form pages.

How can I eliminate the need for Formidable to automatically load it's supporting files on these pages, even though forms are present? 

Note: I already know which css is needed for these small forms and have separated it into a single css file I can load independently. The js file is small enough, I'll likely just allow it to remain loading.

Thanks in advance,
Mark
2 Answers
Bobby Clapp answered 2 years ago
Mark HansenMark Hansen replied 2 years ago

Thanks, Bobby - Those options are actually the crux of my issue.

1 - Every page of site.

This is what I'm trying to get away from, as 99% of the pages only use 25-30 lines of the formidable css. I've stripped this css to a separate file and it will handle the very small forms, without the 5,000 lines of css in the main file.

2 - Only on Applicable pages.

Since the majority of site pages contain the very small, single-field form, Formidable sees those as "applicable pages" and loads all css and js.

3 - Don't use Formidable Styling.

This may be my only option, but I prefer to use the Formidable styling and js on the final single long form, which makes use of both the css and jscript for form handling purposes.

Ideally, I'd be able to tell Formidable to wo on 1 single page, and simply include the css for the smaller forms in an independent file.

Thanks again,
Mark

Bobby Clapp answered 2 years ago

I would say 3 IS indeed your only option. If you are pulling code out and throwing it in a separate file you would want to call for it to enqueue on that page. You're then looking at a PHP function to determine that.

https://developer.wordpress.org/themes/basics/including-css-javascript/
https://wordpress.stackexchange.com/questions/61244/wp-enqueue-style-on-specific-page-templates

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right