Critical CSS plugin

I have this https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Falmet.com.ua%2F Yes I tried to resolve by my self

I seem to have found a solution to this error: I had html-critical-webpack-plugin version 2.x installed, installing version 1.1.0 fixed this error.

1 Like

I did notice several issues resulting from using the setup outline in https://roots.io/guides/asynchronous-css-loading-in-sage/

If you are using soil and soil-clean-up, the filter referenced to set the media attribute to print for async loading will fail because all handles are removed.

also, if that same filter runs before the action used to inline your critical styles, your yarn build will fail because webpack will not see any usable stylesheets in the source.

I am going to try to tackle this today and report back, just thought I would add that info because the referenced article has a link that points here.

actually the yarn build fails because of the async load, has nothing to do with the action to inline critical styles. this obviously will not matter on production, but if you are testing/running on development/staging it will create an issue.

@ dhaynes1206 DId you find a workaround for that? I guess it’s what happens to me now. Locally it’s creating the critical CSS file, but it’s not in production, hence I see the page with no styles for half a second before the styles are loaded.

yarn build:production fails if I change my devUrl though, what URL should I use there? I tried with localhost:8000 (creates the file in localhost and works fine, not in dev), mydevdomain.com (build fails), myproddomain.com (build fails).

Any help appreciated!

Edit: Forgot to say that I’m running Sage in a docker container.

This only seems to work after running yarn build. This does not work when running yarn start:

$critical = asset_path('styles/critical.css');
if (@fopen($critical, 'r')){
echo '<style>'.@file_get_contents($critical).'</style>';
}
}, 1);

Hey all, I’m struggling a little bit with the guide https://roots.io/guides/asynchronous-css-loading-in-sage/, I was able to install all the packages, update all the files etc. However, I’m getting the following error when running yarn build:production:
95% emittingError: No usable stylesheets found in html source. Try to specify the stylesheets manually.

I feel as if the variables here are the culprits, as I’m not familiar enough with Sage, I’m not sure where they are set /resources/assets/build/webpack.config.optimize.js

  base: config.paths.dist,
  src: config.devUrl,

I’m thinking that the config.devUrl isn’t grabbing any data, or maybe that I don’t have it set as I don’t use Trellis, just Bedrock & Sage

They are set here: https://github.com/roots/sage/blob/9.0.9/resources/assets/config.json
and here: https://github.com/roots/sage/blob/9.0.9/resources/assets/build/config.js

I’m not personally familiar w/ this process because, but I’m assuming that it requires your VM to be up and running (i.e. there will need to be something at devUrl for the headless browser to visit), which may be a problem?

There are also plugins (i.e. WP Rocket) and services (i.e. criticalcss.com that can handle this process for you.

I had a weird issue which was getting the same error because my src URL in webpack.config.optimize.js was a wordpress-password protected post/page. As soon as I removed the password protection the yarn build was sucessful.