RUCSS compatibility with ​CloudFlare Server Push

[DahmaniAdame]

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

• [x] Made sure you’re on the latest version 3.10.7
• [x] Used the search feature to ensure that the bug hasn’t been reported before

Describe the bug When using the CloudFlare plugin and enabling Server Push using the following constant, CloudFlare will add all resources with the rel=preload hint on the page. Including CSS.

define('CLOUDFLARE_HTTP2_SERVER_PUSH_ACTIVE', true);

We will end up with resources loaded by the page. Example:

<link rel="preload" href="/wp-content/themes/astra/assets/css/minified/main.min.css?ver=3.7.7" as="style">
<link rel="preload" href="/wp-includes/css/dist/block-library/style.min.css?ver=5.9" as="style">

What this does is load the CSS resources even if Remove Unused CSS is used.

It will give a console warning:

The resource /wp-content/themes/astra/assets/css/minified/main.min.css?ver=3.7.7 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and is preloaded intentionally.

This warning might show on the PageSpeed Insights results as well.

The customer might think that the Remove Unused CSS is not operating properly. Or think that we are preloading the CSS files.

To Reproduce Steps to reproduce the behavior:

1. Using the official CloudFlare plugin
2. Add define('CLOUDFLARE_HTTP2_SERVER_PUSH_ACTIVE', true); to the wp-config.php file
3. See error

Expected behavior Ideally, we should remove the resources hints related to CSS from the page after adding the Used CSS.

Or at least warn the user using a notice that CLOUDFLARE_HTTP2_SERVER_PUSH_ACTIVE is set to true, and what it will implicate (loading CSS files + getting the warning about the preloaded assets).

Screenshots

Additional context Ticket - https://secure.helpscout.net/conversation/1763607803/320562/

Potentially linked to the effort for https://github.com/wp-media/wp-rocket/issues/3180 if running CF APO compatibility keeps Cloudflare's official plugin enabled.

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 display dismissable notice when this constant is defined.

[CrochetFeve0251]

Reproduce the problem

Ok

Identify the root problem

This is due to Cloudflare adding the preload after our process. However clearing the cache from Cloudflare after updating RUCSS on a page can maybe on that.

Scope a solution

To fix that problem we can create a thirdparty class for Cloudflare that uses the constant CLOUDFLARE_HTTP2_SERVER_PUSH_ACTIVE and rocket_is_cloudflare function to detect if cloudflare is present and active. Then it display a notification to the user by hooking admin_notices.

public function cloudflare_rucss_notice() {
$notice_name = 'rocket_warning_cloudflare_rucss';

		if (
		in_array(
			$notice_name,
			(array) get_user_meta( get_current_user_id(), 'rocket_boxes', true ),
			true
		)
		) {
			return;
		}



		rocket_notice_html(
			[
				'status'           => 'warning',
				'dismissible'      => '',
				'message'          => __('Cloudflare server pushing mode can create incompatiblities with Remove Unused CSS Functionnality', 'rocket'),
				'dismiss_button'   => $notice_name,
			]
		);
}

Estimate effort

S

PS: @piotrbak maybe we could try to hook in the Cloudflare addon on RUCSS to purge Cloudflare cache, what do you think?

[vmanthos]

I wasn't able to reproduce the issue. I didn't get a Push/Other initiator though.

@DahmaniAdame do you know if anything more is necessary in addition to having the Cloudflare plugin and setting CLOUDFLARE_HTTP2_SERVER_PUSH_ACTIVE to true?

By the way, I could see the preload resource hint added for JavaScript files but when Remove Unused CSS was applied no CSS files were added to the source code, and therefore preload wasn't there.

Notes

These are in case we want to do more than display a notice.

The Cloudflare plugin does 2 things when CLOUDFLARE_HTTP2_SERVER_PUSH_ACTIVE is set to true:

1. They add resource hints, i.e. preload by hooking to wp_head: https://plugins.trac.wordpress.org/browser/cloudflare/trunk/src/WordPress/HTTP2ServerPush.php#L29
2. They are sending a Link header for styles and scripts: https://plugins.trac.wordpress.org/browser/cloudflare/trunk/src/WordPress/HTTP2ServerPush.php#L42 Note: Although I logged this, I didn't see the headers added, which may explain what I mentioned previously about not getting Push/Other.

Maybe we can remove_filter() for this: add_filter('style_loader_src', array('\CF\WordPress\HTTP2ServerPush', 'http2LinkPreloadHeader'), 99, 1);

Unhooking http2ResourceHints from wp_head will also remove preload hints for JavaScript files. So this would need different handling.

They also have a http2_link_preload_src filter we could use to prevent sending the Link header for styles. https://plugins.trac.wordpress.org/browser/cloudflare/trunk/src/WordPress/HTTP2ServerPush.php#L50