Wp-rocket: Removing rocket-critical-css can lead to "delayed" FOUC in Firefox

[webtrainingwheels]

Tested with WP Rocket 3.6.1

In some cases removing the CPCSS can result in "delayed" FOUC.
Please see these gifs to demonstrate the difference in loading behaviour:

3.5.5.1 - http://recordit.co/Wcil5yYpgH (no fouc)
3.6.1 - http://recordit.co/PzpB8spSpN (fouc )
3.6.1 modified to keep the CPCSS - http://recordit.co/ljGzTvjIGe (no fouc)

It's not happening on all sites, so I'm not yet sure of the exact steps to reproduce.
Related ticket: https://secure.helpscout.net/conversation/1199425512/174160?folderId=377611
Slack conversation (Cristina is assisting): https://wp-media.slack.com/archives/C43T1AYMQ/p1593110340302700

This seems to be specific to Firefox

[vmanthos]

Related ticket: https://secure.helpscout.net/conversation/1206091840/175961/

Preventing the removal of the CPCSS, fixed the issue.

[vmanthos]

Another one: https://secure.helpscout.net/conversation/1206050175/175947?folderId=2135277

Again, preventing the removal of the CPCSS, fixed the issue.

[webtrainingwheels]

Per @crystinutzaa , this issue will be fixed with this change: https://github.com/wp-media/wp-rocket/issues/2658
See her comment here: https://github.com/wp-media/wp-rocket/pull/2786#issuecomment-651391552

[Tabrisrp]

Re-opening this issue since it seems it's not fixed. I added the grooming tag so that we can get the details on why it's happening (root cause), and how to fix it.

[webtrainingwheels]

https://secure.helpscout.net/conversation/1232024775/181715?folderId=377611

[wpsumo]

Preventing the removal of the CPCSS, fixed the issue.

I'm a user can confirm, same issue here the JS that removes CPCSS seems to be the issue. Did not happen before this DOM manipulation was implemented.

Suggested:
Remove feature or add opt-in or out of the feature
Implement individual CPCSS in bulk generation

[DahmaniAdame]

https://secure.helpscout.net/conversation/1235322939/182520/

[engahmeds3ed]

Reproduce the issue ✅
We identified it on one of a site of a customer as it was hard to replicate it locally.

Identify the root cause ✅
The issue is that removing cpcss code that is found here:
https://github.com/wp-media/wp-rocket/blob/5eef8bc68ce7f37998e08d4aca744d1fbd0dbf09/inc/Engine/CriticalPath/CriticalCSSSubscriber.php#L580-L600

for some timings reason is fired before this stylesheet onload here:
https://github.com/wp-media/wp-rocket/blob/5eef8bc68ce7f37998e08d4aca744d1fbd0dbf09/inc/Engine/CriticalPath/CriticalCSSSubscriber.php#L674

so on this case the stylesheet is not loaded into the browser and CPCSS is removed so till the stylesheet loads the page is appear without css.

Scope a solution ✅
I made some prototyping / discovery work and this code should work just fine:
https://github.com/wp-media/wp-rocket/blob/5eef8bc68ce7f37998e08d4aca744d1fbd0dbf09/inc/Engine/CriticalPath/CriticalCSSSubscriber.php#L580-L600

return '<script>const wprRemoveCPCSS = () => { if( document.querySelector("link[data-rocket-async=\'style\']") ){
                console.log("Timings are not valid, will try again after 500ms.");
                setTimeout(wprRemoveCPCSS, 200);
            }else{
                console.log("Removing CPCSS.");$elem = document.getElementById( "rocket-critical-css" ); if ( $elem ) { $elem.remove(); } }; 
            }
            if ( window.addEventListener ) { window.addEventListener( "load", wprRemoveCPCSS ); } else if ( window.attachEvent ) { window.attachEvent( "onload", wprRemoveCPCSS ); }</script>';

and we need to add this data attribute for link stylesheets data-rocket-async='style'
https://github.com/wp-media/wp-rocket/blob/5eef8bc68ce7f37998e08d4aca744d1fbd0dbf09/inc/Engine/CriticalPath/CriticalCSSSubscriber.php#L671

I added console.log to illustrate what is happening only (we need to remove them when writing the code).

Effort ✅
I would assume this will be an [S].

[wpsumo]

In my tests it shows in Chrome as well so it's not limited to Firefox anymore.

[camilamadronero]

Related https://secure.helpscout.net/conversation/1240653742/183688?folderId=2675957

[webtrainingwheels]

I have a customer still experiencing this issue:
http://recordit.co/dJNiGB2QYZ

Site: https://dogloverstore.com/
Seems to only be in Firefox still.

FWIW Using browserstack, I see it more often using Firefox 78 on Windows.

Customer says: "I am on windows 7. It happens on version 79 of firefox as well as the latest version of firefox which is version 80. apparently googles bots are seeing the same FOUC because our CLS failed pages are rising quickly each day."

This is an active ticket: https://secure.helpscout.net/conversation/1260627147/189029?folderId=377611

Slack: https://wp-media.slack.com/archives/C43T1AYMQ/p1598474879058700

[arunbasillal]

Documenting some general feedback:

• CPCSS will be replaced by something better in 3.8 and we are focused on the same.
• In the mean time, if there are severe issues related to CPCSS, please disable the feature or switch to WP Rocket 3.5.5.1 or before.
• Related internal discussion - https://wp-media.slack.com/archives/C43T1AYMQ/p1598474879058700

[tw-360vier]

One of our client's sites also shows this problem on 3.6.4.

We load a lot of stylesheets via webpack and we would need to wait for them before removing CPCSS.
I would like to add some custom code to achive this, but i would need to prevent wp-rocket from doing so first.

Again, preventing the removal of the CPCSS, fixed the issue.

@vmanthos How did you prevent CPCSS from being removed, other than editing the plugin source?

[vmanthos]

@tw-360vier

I edited the plugin's code, but that was only for testing purposes.

As you already know, you shouldn't edit the plugin's core files.

[wpsumo]

Please allow us to opt out from cpcss removal of the DOM somehow. This is casuing issues for many users.

[alfonso100]

a delayed FOUC case: https://secure.helpscout.net/conversation/1347861345/215839/ but for different reasons,
@engahmeds3ed discovered some skipped attributes.

Per Ahmed comments, it could be useful if we could add a new textarea under the critical css field to add missed css attributes to be added to the end of cpcss styles for this type of cases, as sometimes our generator removes some needed styles by browsers other than chrome -