Critical CSS plugin

sage
16

There you go, but it uses some variables from sage, so it might differ a little from your cfg.

webpack.config.optimize.js:

module.exports = {
  plugins: [
    new ImageminPlugin({
     ...
    }),
    new HtmlCriticalWebpackPlugin({
      base: config.paths.dist,
      src: config.devUrl,
      dest: 'styles/critical-home.css',
      inline: false,
      minify: true,
      extract: false,
      width: 375,
      height: 565,
      penthouse: {
        blockJSRequests: false,
      }
    }),
    new UglifyJsPlugin({
       ...
    })
  ],
};

No, php generates the HTML server-side and what the browser (and html-critical-webpack-plugin) get is already HTML.

In my case, the critical css is generated only for the homepage, but you can run the script on how many pages you want. You’ll just need to instantiate html-critical-webpack-plugin for each page.
It may be possible to parse multiples pages at once and extract the critical css for all these pages, but I didn’t try it for now.

1 Like