Style.css as Render blocking?

Morning haslamjj ;
2 things seem to be happening (going wrong) here:

1. none of the 5 theme CSS files is picked up by AO actually
2. I suppose you have “critical CSS” active, but there seem to be no rules yet, as a result of which the aggregated CSS is inlined (which is only block-library/style.min.css) and the non-aggregated CSS is left as is (not deferred)

wrt (1); I’m assuming you don’t have the theme excluded from CSS optimization, so something is likely going wrong. I don’t know what, but I do see the URL’s for the theme do not include the hostname, which WordPress normally does not do (and which is not the case for the block-library/style.min.css file). do you have any idea what is removing the hostname from the theme’s stylesheet URL’s?

wrt (2); can you confirm you indeed have critical CSS active? do you see rules, or only jobs?

and a simple workaround to end off with; create a default rule for Autoptimize to use and nothing should be render-blocking any more.

hope this helps,
frank

Hi Frank,

I do have “Auto” rules for the various templates and tags like is_page. And Out of precaution, I had removed all rules and let Critical rebuild after making the CSS change.

The only exceptions are: wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css

As to URLs, ‘maybe’ our set-up in wp-config?
//Relative URLs for swapping across app service deployment slots
define(‘WP_HOME’,’https://’. $_SERVER[‘HTTP_HOST’]);
define(‘WP_SITEURL’,’https://’. $_SERVER[‘HTTP_HOST’]);
define(‘WP_CONTENT_URL’, ‘/wp-content’);
define(‘DOMAIN_CURRENT_SITE’, $_SERVER[‘HTTP_HOST’]);

/** Absolute path to the WordPress directory. */
if ( ! defined( ‘ABSPATH’ ) ) {
define( ‘ABSPATH’, dirname( __FILE__ ) . ‘/’ );
}

/** Sets up WordPress vars and included files. */
require_once(ABSPATH . ‘wp-settings.php’);

OK, so re. not aggregating, what happens if you comment out define(‘WP_CONTENT_URL’, ‘/wp-content’); ?

and re. critical CSS; looks like the is_front_page rule is not there (yet)? on e.g. https://cyber-security.degree/online-degrees/ I do see critical CSS added and there the CSS is no longer render-blocking.

I guess progress of a sort. I completely wiped all rules again, put CloudFlare into DEV mode to by-pass cache, and let CriticalCSS rebuild rules.

Have these Auto:
is_front_page ccss_0f8ae60e1953f8a99a624aad34df538b.css
is_single
is_page
template-blank.php
is_paged
template-scholarships.php
template-homepage.php ccss_958ec7c5225daf555b72c12a66494fd1.css

In Dev Tools am seeing wp-content/cache/autoptimize/autoptimize_8d45dda549da5c5a763a8fc12825da7e.php
But, cannot tell if that relates to is_front-page or template-homepage.php

Am still seeing the other theme css showing up though. Have not commented out wp-content-url yet, am going to do that on DEV.cyber-security.degree <– saw domain there was bound to production. Cleared everything out, waiting for that to rebuild.

I do have Fetch Original CSS as Checked. Should I disable that?

well, now you have a is_front_page rule, I indeed see critical CSS used and the CSS-files are now loaded in a deferred manner (media=print, changed to correct media-type by JS at onLoad) e.g.:

<link rel='stylesheet' id='cybersecuritydegreetheme-themestyle-css'  href='/wp-content/themes/CyberSecurity/style.css' type='text/css' media='print' onload="this.onload=null;this.media='all';" />

for reasons I can only explain as “a false positive”, that file is still listed as being render-blocking by GPSI though even if (as per above code) it should not be render-blocking ..

Done. Your suggestion, as usual, was spot on. Tech team was using that technique to make it easier to deploy DEV environments. Keeping URLs relative. That was in effect blinding AO. Commenting it out solves the problem. Appreciate the assist Frank!
Josepf

happy to read so Josepf ??