Excluding JS files from Defer JS

[GeekPress]

What are we proposing to do? 

WP Rocket will include a UI to exclude JavaScript files from being deferred. 

Why are we doing this? 

Excluding JavaScript files from defer currently needs a helper plugin and is not the most user-friendly experience. This update will make it easier for all of our users to configure WP Rocket faster. 

This is a feature that has been requested by our users many times as well. #2290

User expectations and experience. How will we do this feature?

This feature will be implemented after we remove the “Safe Mode for jQuery” option. The UI proposal is as follows:

Text area title: Excluded JavaScript Files

Text area description: Specify URLs of JavaScript files to be excluded from defer (one per line).

Placeholder: /wp-content/themes/some-theme/(.*).js

Technical Specs

• Current filter rocket_exclude_defer_js continues to work. This will make sure our current helper plugin works and existing customers won’t be impacted. 

• Exclusions can be made with keywords from the URL, just the domain part, wildcards, or the entire URL. Examples of how it is right now are mentioned in our doc. 

• Files excluded from defer can also be excluded from JavaScript combination if JS combination is enabled. They can still be minified. 

Risks

Since this is only a UI enhancement, we shouldn’t see risks of any kind. The existing helper plugin and the filter will continue to work as before. 

If anything, this should make things easier for users and support to resolve issues related to defer JS.

Acceptance Criteria

• The UI is as per specification.

• JavaScript files are excluded from defer based on full file name, keyword, or wildcards. All cases mentioned in the current doc works.

• When external domains are mentioned, they are deferred too. 

• Files excluded from defer are not combined by JavaScript combination. However, they are still minified. 

• The existing helper plugin works (using the filter rocket_exclude_defer_js).

Documentation and Translations

The following documents need to be updated: 

• https://docs.wp-rocket.me/article/976-exclude-files-from-defer-js

[GeekPress]

Link to feature: https://wp-media.productboard.com/feature-board/planning/features/5675722
Created by: @arunbasillal

[Tabrisrp]

Text area description: Specify URLs of JavaScript files to be excluded from defer (one per line).

This doesn't match with the line below:

Exclusions can be made with keywords from the URL, just the domain part, wildcards, or the entire URL. Examples of how it is right now are mentioned in our doc.

The description should be updated to reflect what is really expected in the field.

Files excluded from defer can also be excluded from JavaScript combination if JS combination is enabled. They can still be minified.

It doesn't work that way currently. Is this supposed to be a new enhancement, or was it an oversight?

[arunbasillal]

@Tabrisrp

Text area description: Specify URLs of JavaScript files to be excluded from defer (one per line).
This doesn't match with the line below:
Exclusions can be made with keywords from the URL, just the domain part, wildcards, or the entire URL. Examples of how it is right now are mentioned in our doc.
The description should be updated to reflect what is really expected in the field.

I thought about this and figured that using the word URLs was the simplest to be part of the UI.

• It works for internal files.
• It works for external files as well. They can specify the full URL and that will be excluded.
• The link to the documentation can show further examples which can be useful for advanced users.

@GeekPress @webtrainingwheels What do you think of this reasoning? ^ Please refer to Remy's comment for context if needed - #3233 (comment)

Files excluded from defer can also be excluded from JavaScript combination if JS combination is enabled. They can still be minified.
It doesn't work that way currently. Is this supposed to be a new enhancement, or was it an oversight?

Shouldn't this be done for defer to actually work? This was not an oversight.
If we combine the file that is excluded from defer and if that file is combined, then it defeats the purpose, right? Our current documentation says, If Minify JS or Combine JS is also active, you must exclude the files from that option as well.