Gravity Forms 2.7 | Huge Payload Added to Website

Get Help
,
1

*** APOLOGIES FOR THIS LONG NOTE. A CUP OF COFFEE AND SEVERAL DOUGHNUTS WILL HELP :slight_smile: ***

Good Day!

Recently, we noticed our website loading speed increased as soon as Gravity Forms 2.7 was installed on our website.

Upon reviewing its file structure, we were unpleasantly surprised about the size of some of the added JS and CSS files (see below). Major impact to our website is being cause by the JS file gform_simplebar and the CSS files theme_foundation, theme_framework, and gform_theme.

Based on our finding, we need help with the following:

(1) Please provide an explanation for each file. What is their main function? Where can we find this info?

(2) Which files can we dequeue without impacting the basic functionality of Gravity Forms?

(3) If we do not use WooCommerce or are not capturing and monitoring sales data, do we still need the file gform_simplebar and all of its dependent JS and CSS files? If we do use WooCommerce or are capturing and monitoring sales data, is it safe to only enqueue this file in the backend?

(4) What would be the impact of dequeuing the CSS file theme_framework? Our testing is revealing mixed results. For example, when this file is dequeued, the styling of some of our confirmation messages breaks.

(5) Some of our Gravity Forms exist in the form of a modal (pop-up). Can you provide a code snippet that will help us defer (or delay) the triggering of all Gravity Forms’ JS and CSS until the appropriate button that triggers the modal is pressed?

(6) We noticed Gravity Forms Changelog has not yet been updated to reflect Gravity Forms 2.7. Can you guys kindly update it this week? Would be helpful.

Thank you.

Jonathan

Gravity Forms 2.7 Files:

Data Handle | JS File | Payload:

gform_chosen [/wp-content/plugins/gravityforms/js/chosen.jquery.min.js] 28.4 KB
gform_json [/wp-content/plugins/gravityforms/js/jquery.json.min.js] 1.8 KB
gform_gravityforms [/wp-content/plugins/gravityforms/js/gravityforms.min.js] 45 KB gform_gravityforms_utils [/wp-content/plugins/gravityforms/assets/js/dist/utils.min.js] 39.8 KB
gform_placeholder [/wp-content/plugins/gravityforms/js/placeholders.jquery.min.js] 4.5 KB
gform_gravityforms_theme_vendors [/wp-content/plugins/gravityforms/assets/js/dist/vendor-theme.min.js] 14.9 KB
gform_gravityforms_theme [/wp-content/plugins/gravityforms/assets/js/dist/scripts-theme.min.js] 3.9 KB
gform_simplebar [/wp-content/uploads/gform_simplebar.min.js] 58.1 KB

Data Handle | CSS File | Payload:

gravity_forms_theme_reset [/wp-content/plugins/gravityforms/assets/css/dist/gravity-forms-theme-reset.min.css] 1.6 KB
gravity_forms_theme_foundation [/wp-content/plugins/gravityforms/assets/css/dist/gravity-forms-theme-foundation.min.css] 44.1 KB
gravity_forms_theme_framework [/wp-content/plugins/gravityforms/assets/css/dist/gravity-forms-theme-framework.min.css] 224.5 KB
gravity_forms_orbital_theme [/wp-content/plugins/gravityforms/assets/css/dist/gravity-forms-orbital-theme.min.css] 0 KB
gform_basic [/wp-content/plugins/gravityforms/assets/css/dist/basic.min.css] 47.5 KB
gform_theme_components [/wp-content/plugins/gravityforms/assets/css/dist/theme-components.min.css] 0 KB
gform_theme_ie11 [/wp-content/plugins/gravityforms/assets/css/dist/theme-ie11.min.css] 1.7 KB
gform_theme [/wp-content/plugins/gravityforms/assets/css/dist/theme.min.css] 29.4 KB

2

Hi Jonathan! Thanks for reaching out and sharing this with us. Sam and I are going to tag team this, I’ll take the CSS focused questions and Sam the JS.

(1) Please provide an explanation for each file. What is their main function? Where can we find this info?
(2) Which files can we dequeue without impacting the basic functionality of Gravity Forms?
(4) What would be the impact of dequeuing the CSS file theme_framework ? Our testing is revealing mixed results. For example, when this file is dequeued, the styling of some of our confirmation messages breaks.

This will depend on a variety of things and how your form(s) are configured.

2.7.0 is a big release in particular for the frontend display of forms. We have created a form theme framework and CSS API which is leveraged by the new block theme settings available to allow for simpler no-code theming of your forms to look good on your site. That is where some of these newer stylesheets are coming from. More than that however, the form theme framework will pave the way moving forward into and for the future of where WordPress is headed.

I am going to assume you’re not using the new form theme (Orbital), but are using the default (Gravity) theme that came as part of 2.5 and have written some custom CSS on top of that. There are now three themes: Legacy (available as part of the legacy markup setting in each form), Gravity (default theme as of 2.5+), and Orbital (new as of 2.7 but not the default for now, you have to manually opt into using it within any given form block).

This is how those stylesheets you referenced break down:

Theme Framework Stylesheets (NEW)

  • gravity_forms_theme_reset [/wp-content/plugins/gravityforms/assets/css/dist/gravity-forms-theme-reset.min.css] 1.6 KB - Handles our more nuclear reset for the form theme foundation and framework styles
  • gravity_forms_theme_foundation [/wp-content/plugins/gravityforms/assets/css/dist/gravity-forms-theme-foundation.min.css] 44.1 KB - Similar but updated version of the gform_basic stylesheet noted below that provides styles for layout and more complex UI that any given form theme would require as a starting place
  • gravity_forms_theme_framework [/wp-content/plugins/gravityforms/assets/css/dist/gravity-forms-theme-framework.min.css] 224.5 KB - Provides the CSS API and Orbital form theme as the default which powers the form block theme settings and conversational forms add-on settings
  • gravity_forms_orbital_theme [/wp-content/plugins/gravityforms/assets/css/dist/gravity-forms-orbital-theme.min.css] 0 KB - In the near future this will serve more as some documentation, notes, and links to developers on how you would work with the form theme framework
  • gform_theme_components [/wp-content/plugins/gravityforms/assets/css/dist/theme-components.min.css] 0 KB - This doesn’t currently have any styles, but in the future might contain any shared or frontend specific component based styles

Gravity Theme Stylesheets (EXISTING)

  • gform_basic [/wp-content/plugins/gravityforms/assets/css/dist/basic.min.css] 47.5 KB - The base styles required for form functionality for forms using the Gravity Theme
  • gform_theme [/wp-content/plugins/gravityforms/assets/css/dist/theme.min.css] 29.4 KB - The Gravity Theme styles, a fairly unopinionated set of styles which attempt to pick up on site theme styles
  • gform_theme_ie11 [/wp-content/plugins/gravityforms/assets/css/dist/theme-ie11.min.css] 1.7 KB - Gravity Theme styles to fix miscellaneous IE11 display issues

Depending on the specifics of your site, if you are not currently using or planning on using the new Orbital theme and the theme framework, you could likely dequeue the new stylesheets for now and be ok, however do note that the form theme framework will play an increasingly large role for Gravity Forms moving forward. Also note that the form theme framework is used by Gravity Forms add-ons as well.

As part of this work, and to question 4 above, we’ve introduced the idea of all styles that are part of one of the three themes being scoped to their respective theme (via a form wrapper class)) so no theme is accidentally and unintentionally globally polluting every form that may be on the page. This protects the different form theme styles and also protects any per form/block theme customizations that have been implemented. The form theme classes are as follows:

  • Legacy theme (pre 2.5): .gform_legacy_markup_wrapper & .gform-theme--no-framework
  • Gravity theme (2.5+, current): .gravity-theme & .gform-theme--no-framework
  • Orbital Foundation theme: .gform-theme & .gform-theme--foundation
  • Orbital Framework theme: .gform-theme & .gform-theme--framework

So if you are having issues with certain styles not holding up when you dequeue some of the newer stylesheets, I’d recommend, again assuming you are using the Legacy or Gravity theme with some style customizations, going through your custom styles and updating them to include the appropriate form wrapper theme class.

(6) We noticed Gravity Forms Changelog has not yet been updated to reflect Gravity Forms 2.7. Can you guys kindly update it this week? Would be helpful.

Good eyes! Yep, that will get updated on Wednesday once we formally publish 2.7.0 as the new main version of core. We also have lot of documentation coming, so stay tuned!

I hope this is helpful, and don’t hesitate to follow up if you have more questions.

3 Likes
3

Hey Jonathan! And thanks Ryan. I’ll cover the js side of your questions here!

For the files themselves:

  • gform_chosen [/wp-content/plugins/gravityforms/js/chosen.jquery.min.js] 28.4 KB
    • This is loaded for the “Enable enhanced user interface” setting of the multiselect and dropdown fields. if not using those ever you could probably unregister this.
  • gform_json [/wp-content/plugins/gravityforms/js/jquery.json.min.js] 1.8 KB
    • This small file is required by some of our older code.
  • gform_gravityforms [/wp-content/plugins/gravityforms/js/gravityforms.min.js] 45 KB
    • This file is required and contains most of our pre 2.5 code for front end scripts.
  • gform_gravityforms_utils [/wp-content/plugins/gravityforms/assets/js/dist/utils.min.js] 39.8 KB
    • This file is required and contains all of our new util code for core and all add ons on the front end. This file will not grow much in size from here on, and willa ctually start reducing payload size in other areas as we abstract to a more shared code pattern across our ecosystem.
  • gform_placeholder [/wp-content/plugins/gravityforms/js/placeholders.jquery.min.js] 4.5 KB
    • This file is required and enables older placeholder support in jq code. We are looking at optimizing this in future releases.
  • gform_gravityforms_theme_vendors [/wp-content/plugins/gravityforms/assets/js/dist/vendor-theme.min.js] 14.9 KB
    • This file is required an contains all new vendor code for our frontend scripts. This, plus util and scripts-theme will takeover from the older code we refernced as we modernize our codebase and whittle away jQuery dependancy over time.
  • gform_gravityforms_theme [/wp-content/plugins/gravityforms/assets/js/dist/scripts-theme.min.js] 3.9 KB
    • This file is required and is where most new scripts for the front end will be added as we migrate from the old approaches. We will work very hard to make sure theme side scripts are optimized and as minimal as possible.
  • gform_simplebar [/wp-content/uploads/gform_simplebar.min.js] 58.1 KB
    • This file will be removed from the next release for front end and can be unregistered by its handle now by you if you like. Sorry about its inclusion.

For question 5 I will check with the team, but off the top of my head this would be quite difficult to do. We don’t have a built in mechanism, but it is possible you could create a separate page that renders the form and then ajax in all of its html into a modal on reveal to load and exec those scripts at the point, but it would be a bit tricky. I’ll get back on this if I can find previous examples of people doing this.

Thanks for the feedback!

3 Likes
4

Hi Ryan,

First of all, welcome to Gravity Forms’ Community :slight_smile: Also, sending you a high-five for your detailed and much-helpful reply.

Yes, we’re using Gravity Forms 2.5+, current (not Orbital), so we’ll use your information to help reduce what’s being loaded on our website.

EDIT: (Ignore paragraph below. Re-read your input. Understood now)

Still, of concern, is the file .gform_theme_framework (224.5 KB). This file is huge and, by virtue of not using Orbital, it’s adding a huge payload to our site. Also, in your handy-dandy file breakdown, you mentioned the file .gform_theme_no_framework." This file is not shown (nor available) anywhere in our backend. What did we miss? That’s probably the file we need ILO .gform_theme_framework.

Also, going forward, I’d like to recommend finding a way to load and execute only the files needed depending on the Gravity Forms version (Legacy, 2.5+, and Orbital) used by your customers. You could introduce a new Settings option to accomplish this. It would be extremely helpful. If this exists now, please guide us.

Again, thank you. Cheers for now :slight_smile:

1 Like
5

Hi Sam,

Wow, thank you as well for the valuable, detailed information. Very helpful. High-five to you too!

Based on your information:

  • We have dequeued gform_simplebar from the frontend. So far, no issues.

  • Concerning Item (5), thanks for looking into this. It would be EXTREMELY HELPFUL if you guys can come up with some type of code snippet or procedure that would only load Gravity Forms’ files when a button that activates a modal (i.e. gravity form) is pressed. As you know, currently, Gravity Forms is loading all JS and CSS files inline which means that the only way we can reduce our payload is by using a tool that removes “unused JS and CSS” until user interaction. These tools have helped, but many Gravity Forms files are still being loaded.

Again, thank you so much. You rock!

6

You are very welcome and thank you!

Yeah, that’s a legit thought regarding some mechanisms around file loading/execution. We’ve spent time and done work not that long ago to look into this as it would be huge in being able to do a variety of consequential things. It’s a big and complex technical challenge with how both WordPress and Gravity Forms work. We will continue to explore however and we are going to do some investigation around ways we can decrease the size of the theme framework stylesheet as that is quite large.

Also, in the near future, I imagine we will deprecate the legacy theme styles and form setting, so that will help a little bit in simplifying things.

Thanks again for your feedback, Jonathan!

2 Likes
7

Yeah this is a bad situation. Is there a dequeue function that disables this unwanted bloat but doesn’t break the standard Gravity Forms functionality? Forcing all these new unwanted scripts and styles is basically a big slap the face to anyone who cares about webpage performance. Every. Byte. Counts. Every. Request. Counts.

8

Hey @Stormbox

You can dequeue unwanted or unnecessary assets (JS and CSS files) via the plugin, Perfmatters. Affordable and worth every penny. We’re using it and works like a charm.

If you decide to use Perfmatters, you can trim additional “fat” from your website by changing the plugin’s settings to “MU” mode.

In any case, we look forward to the developers of Gravity Forms releasing a lighter version of their plugin – or – a version that incorporates the enhancement previously mentioned in this topic.

Hope this helps.

1 Like
9

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.