Good Day!
Can anyone share a code snippet and/or procedure for loading GF’s Stylesheets (CSS files) in the footer of our affected webpages?
You will notice, for example, in this webpagetest result where Gravity Forms stylesheets are causing render-blocking issues.
Thank you,
Jonathan
Good Day! (again)
So … after five cups of coffee and 14 donuts, I found a temporary solution.
Temporary Solution:
(1) Dequeue all Gravity Forms CSS files that are causing a render-blocking condition. I used the plugin “Perfmatters” for this purpose.
(2) For each CSS file you dequeued in (1) above, add the following line of code to the header of your website: (Space before </head>)
<link rel="preload" href="https://www.mywebsite.com/wp-content/plugins/gravityforms/css/basic.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
Note: Replace mywebsite with your own, and, basic.min.css with the name of the file you dequeued.
Result: Check our new webpagetest.org test result. All Gravity Forms CSS files are no longer render-blocking.
Caveat: The above file will be loaded on all of your webpages, but things should still run smoother for you.
Hope this helps someone out there. Still, I can use a permanent solution from the developers of Gravity Forms or some other guru in this forum.
Ideal Situation:
Gravity Forms needs to be updated to ensure most — if not all — of its JS and CSS are not render-blocking.
Cheers!
Jonathan, following WordPress coding best practices Gravity Forms uses WordPress core wp_enqueue_style() to enqueue the styles. This function doesn’t include a parameter to put styles in the footer, this is for a reason, moving styles to footer can produce styling glitches.
So there’s no way to tell WordPress to enqueue styles in the footer (without using “dirty hacks”), and we don’t recommend doing it anyway.
Regarding to scripts, since Gravity Forms 2.5, inline scripts are added to the footer and files have the “defer” attribute, allowing the browser to decide when to load the files. Which it’s the best practice as far as I know and shouldn’t cause any render blocking issue.
In any case, you’re very welcome to suggest any improvements to our product team using the (+) button at the bottom of our roadmap page: Gravity Forms Roadmap - Gravity Forms
That way your request will reach the product team directly and they will be able to consider your request and queue it in the workflow of a future version if it’s accepted.
Hi Samuel (@sacom),
Thank you so much for your reply!
What you stated makes perfect sense, so why are Gravity Forms’ CSS stylesheets still showing up as render-blocking? Also, we use the Avada theme which integrates Gravity Forms, so not sure if this could be part of the problem.
In any case, there should be a way to delay or defer GF’s CSS files until the form shows up above-the-fold. Not a coder, but a native solution would be nice. Something, perhaps, that can be added to the Settings section of Gravity Forms.
So, following my last comment above, we were able to fix the issue under the following options (non-native):
(1) Generate the Critical CSS for our website, then load stylesheets in the footer.
OR
(2) We used the new “Remove Unused CSS” feature of the plugin, Perfmatters. This feature was released 2 days ago.
Again, thank you for your reply. I’ll follow your suggestion and submit a recommendation for your team to look at and, hopefully, implement.
Cheers,
Jonathan