Add additional delay JS exclusions

[Tabrisrp]

Description

Add additional delay JS exclusions to solve known issues.

Fixes #3941
Fixes #3950
Fixes #3959

Type of change

• Enhancement (non-breaking change which adds functionality)

How Has This Been Tested?

• Automated tests added for the patterns

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[Mai-Saad]

@Tabrisrp

• For 3941 , 3959 => fixed
• For 3950 => script smush-lazy-load.min.js?ver=3.8.5 is not delayed but still image is delayed till user make an action, can you please recheck this @piotrbak

[piotrbak]

3950 works fine for me too! 🤔

[piotrbak]

@Tabrisrp This PR fixes also #3932 right?

This one can be closed then?
#3972

[Tabrisrp]

This PR includes the code change yes, but I don't know if it was QA'ed for this part?

[Mai-Saad]

Here is a video for 3950
https://user-images.githubusercontent.com/76941962/120434702-170d2d80-c37d-11eb-9b56-0ce574ae8df9.mp4

So apparently auto exclude smush script only is not enough in this case, here are the rest of the scripts that were delayed and it's affecting the image

[GeekPress]

@Mai-Saad This seems to be another case and maybe something else is lazyloaded the image. If you try on a clean install with only Smush, the images must be displayed properly.

[Mai-Saad]

@GeekPress I tried the following:

• Using the same demo site, deactivated the rest of the plugins (mainly Elementor and Virtue/Ascend/Pinnacle Toolkit) then created a new page with some images, and still images are delayed.

• Created a new test site, using the default theme, created a new page with images, activated smush only with WPR and still, images are delayed.

Screencast.2021-06-02.09.11.13.mp4

• Tried on live test site while theme was newsportal (deactivated any other plugins than WPR +smush) => was working fine here but when used Twenty Twenty-one theme, it didn't work (even after excluding all js that were delayed) ... Please feel free to check it here https://new.rocketlabsqa.ovh/images22

[GeekPress]

@Mai-Saad You aren't using the latest Delay JS script version. You are using the one which has the exclusion issue.

[piotrbak]

@GeekPress When using additional animations in the Smush for lazy load, they're adding the no-js CSS which prevents images from being displayed:

<style>
	.no-js img.lazyload { display: none; }
	figure.wp-block-image img.lazyloading { min-width: 150px; }
	.lazyload, .lazyloading { opacity: 0; }
	.lazyloaded {
		opacity: 1;
		transition: opacity 400ms;
		transition-delay: 0ms;
}
</style>

The no-js class is removed with this script:

<script type="rocketlazyloadscript">document.body.classList.remove("no-js");</script>

It should not be delayed also. I think it's pretty safe to exclude it, even if any other solution is sharing the same code, we should remove any no-js classes as soon as possible.

[GeekPress]

@piotrbak I'm a little afraid to add a generic exclusion like no-js. We don't know the impact it's going to have.

What about this? We know it should concerns only Smush:
document.body.classList.remove("no-js")

[piotrbak]

@GeekPress Yes, I exactly meant that. This script is removing the no-js classes and it can be safely excluded, even if someone else is sharing it.

[Tabrisrp]

document.body.classList.remove("no-js") is now auto-excluded

[piotrbak]

@Tabrisrp @GeekPress When using Twenty One theme their script for handling the no-js is different. We need to exclude this one too 😞
document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );

[GeekPress]

@piotrbak @Tabrisrp We can exclude this to be shorter for Twenty One theme:

document.documentElement.className.replace( 'no-js', 'js' )

[Tabrisrp]

Those are added by the themes, not by Smush, are we going to add an exclusion for each theme using this kind of thing?

[piotrbak]

@Tabrisrp To be more specific, the same script is added twice. Once by Smush and once by TwentyOne:

There's also similar script in TwentySeventeen for no-svg and svg 😓

I think that the number of possible scripts that are removing the no-js is very limited though...

[Tabrisrp]

We will have to think about doing things differently, because we are only at 10% and already seeing the exclusion list growing. We know this kind of list is problematic to maintain on the long run, and it's only going to keep needing more and more.

[piotrbak]

Yes, the list here will grow rapidly...

[GeekPress]

For now, we don't have other choices to add this exclusion to totally improve the compatibility with Smush.

[GeekPress]

To be more specific, the same script is added twice. Once by Smush and once by TwentyOne:

@piotrbak Does it mean that Smush is adding

document.documentElement.className.replace( 'no-js', 'js' )

and

document.body.classList.remove("no-js")

? 🙄

[piotrbak]

@GeekPress For TwentyTwenty One:

1. Smush is adding both of them
2. Twenty Twenty One theme is not adding it
   In this case removing only the document.body.classList.remove("no-js") will do the job, as we'll completely remove the class. However, we won't have the js class then in the source then, as it the excluded script removed it.

For TwentyTwenty:

1. Smush is adding only the document.documentElement.className.replace( 'no-js', 'js' )
2. TwentyTwenty is adding the same script
   Since we don't have the script that's removing the no-js we need to exclude this one, so it changes the no-js to js

From my point of view, we need to exclude both of them.

[GeekPress]

@Tabrisrp After having a call with Piotr, we decided to have these exclusions:

document.body.classList.remove("no-js")
document.documentElement.className.replace( 'no-js', 'js' )

[Tabrisrp]

Additional pattern added to the exclusions

[Mai-Saad]

The latest changes fixed smush. Tested on 2020, 2021, 2019, university, Astra and Virtue