Critical CSS plugin


I’m looking to use webpack-plugin-critical in the webpack.config.optimize.js file, but I have no idea what settings would be needed as the example gives index.html as the src and dest, but as its WordPress its not a single page application.

Does anyone have any experience with using this (or other working packages) with WordPress and would you be able to share a working example?



What about using pagespeed for nginx?

And for static:


You’re overthinking it imo. Just import/compile all of your critical CSS to something like critical.css and inline it with something like:

 * Inject critical assets
add_action('wp_head', function () {
    $critical = @realpath(config('theme.dir').'/dist/styles/critical.css');
    if (file_exists($critical)) {
        echo '<style>'.@file_get_contents($critical).'</style>';
}, 10);


Thanks for this. Is there a webpack package you would you use to generate the critical.css file? I used to use penthouse with gulp but I don’t have much experience with webpack.


I’m sure there’s something out there but depending on the project size I’d probably just resort to @importing all of the above the fold / scaffolding CSS into critical.css. I have no suggestions past that though as I haven’t had to do much more. :frowning:


So I’ve managed to make some progress using critical-webpack-plugin. I’ve added the following to the webpack.config.optimize.js file to get it to generate a critical css file and then use the above code example to inject critical assets. (Replacing path/to/site with the url to your site).

const CriticalWebpackPlugin = require('critical-webpack-plugin');
module.exports = {
plugins: [
new ImageMinPlugin(...),
new CriticalWebpackPlugin({
      src: 'http://path/to/site',
      dest: 'critical.css',
      width: 480,
      height: 800,
      pathPrefix: '/styles',
      minify: true