Delay JS: automatic exclusion of lazysizes.js causes jQuery is not defined error

[NataliaDrause]

Before submitting an issue please check that you’ve completed the following steps:

• Made sure you’re on the latest version - 3.11.5
• Used the search feature to ensure that the bug hasn’t been reported before - yes

Describe the bug We automatically exclude lazysizes.js here as per https://github.com/wp-media/wp-rocket/issues/4162 Unlike Autoptimize's similar script, Avada's lazysizes.js script relies on jQuery. This causes jQuery is not defined error in the console:

Full-screen image: https://i.imgur.com/OkfuoR2.png

To Reproduce Reproduced on Mega Adava:

1. Go to Avada > Performance > Optimization settings and enable Avada option for Image Lazy Loading > Save Changes.
2. Go to WP Rocket settings > File Optimization tab and enable Delay JavaScript Execution option.
3. Visit any page with images in the incognito browser window - the error will be logged.

Expected behavior No error in the console.

We should either exclude jquery along with lazysizes.js for Avada, or not exclude Avada's lazysizes.js automatically.

Additional context Ticket: https://secure.helpscout.net/conversation/1970262540/360251?folderId=3864740

Backlog Grooming (for WP Media dev team use only)

• [ ] Reproduce the problem
• [ ] Identify the root cause
• [ ] Scope a solution
• [ ] Estimate the effort

[piotrbak]

We'll need to exclude jQuery when Avada's LL is enabled.

We also need to make sure that jQuery is not excluded when our LL is enabled as we have compatibility between LL scripts.

[mostafa-hisham]

Reproduce the problem

No

Identify the root cause

We need to exclude jQuery when Avada's LazyLoad is enabled.

Scope a solution

In /inc/ThirdParty/Themes/Avada.php we need to subscribe to rocket_exclude_delay_js filter then check if $avada_options['lazy_load'] === 'avada' (very similar to maybe_disable_lazyload function in the sam file) then exclude /jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js

Estimate the effort

[s]

[NataliaDrause]

UPDATE: The customer reported that excluding jQuery from the Delay JavaScript Execution caused additional problems with Fusion animations and carousel.

The following list of additional exclusions resolved the issue on the customer's site:

/Avada/includes/lib/assets/min/js/library/cssua.js
/Avada/includes/lib/assets/min/js/general/fusion.js
/fusion-builder/assets/js/min/general/fusion-animations.js
/Avada/includes/lib/assets/min/js/library/jquery.carouFredSel.js
/fusion-builder/assets/js/min/general/fusion-animations.js
/Avada/includes/lib/assets/min/js/general/fusion-carousel.js

I was able to reproduce a similar problem with a slider on the Mega Avada homepage. The following additional exclusions resolved the problem:

/fusion-core/js/min/avada-fusion-slider.js
/Avada/includes/lib/assets/min/js/library/jquery.flexslider.js

It seems, that just excluding jQuery will lead to random errors and broken elements on Avada. So we either have to cover all the cases (that could be very many scripts), or not exclude lazysizes.js by default.

[vmanthos]

There were a lot of problems after excluding jQuery

@piotrbak How about displaying a notice to disable Avada's lazyload and use ours when we detect:

1. Avada's lazyload feature is enabled.
2. Delay JS is enabled.
3. jquery is not excluded?