optimizeCss incorrect behavior in Next.js 12 (Performance decrease)

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:54 PST 2021; root:xnu-8019.61.5~1/RELEASE_X86_64 Binaries: Node: 16.10.0 npm: 7.24.0 Yarn: N/A pnpm: N/A Relevant packages: next: 12.1.6 react: 17.0.2 react-dom: 17.0.2 critters: 0.0.7

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Here is the official documentation about how to use a CDN with Asset Prefix:

https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix

However, in Next.js 12 the publicPath of critters changed to use assetPrefix:

v10.2.3 vs v12.2.2

const Critters = require('critters')
const cssOptimizer = new Critters({
  ssrMode: true,
  reduceInlineStyles: false,
 path: renderOpts.distDir,
- publicPath: '/_next/',
+ publicPath: `${renderOpts.assetPrefix}/_next/`,
  preload: 'media',
  fonts: false,
  ...renderOpts.optimizeCss,
})

Now every page request is downloading the CSS from the CDN before calculate the critical CSS to inline, and this has a significant impact on page latency:

[32mInlined 5.76 kB (38% of original 15 kB) of https://cdn.vinissimus.com/front/_next/static/css/d9c4e8c06d2c316e.css.
Time 465.162456

Expected Behavior

Even if I use a CDN in my project, to access the CSS you would have to access the /_next directly as before, it doesn’t make sense to fetch it from a CDN.

Link to reproduction

https://stackblitz.com/edit/vercel-next-js-qqua8l?file=next.config.js

To Reproduce

In the link to the reproduction you need to change assetPrefix inside next.config.js to a correct CDN (hard to reproduce it without it). Then yarn build && yarn start and check the logs and performance.

Without the link to reproduction (all the process):

1. Activate optimizeCss on next.config.js and add a CDN inside assetPrefix:

{
  assetPrefix: cdnUrl,
  experimental: { optimizeCss: true }
}

1. yarn add critters@0.0.7
2. Add some CSS in some page
3. yarn build && yarn start
4. Check the logs and performance.

[fraitag]

Are you shure? I check code of next 12.3.1 and critters and i found place when assetPrefix is replaced. https://github.com/GoogleChromeLabs/critters/blob/main/packages/critters/src/index.js#L242

    if (normalizedPath.indexOf(pathPrefix) === 0) {
      normalizedPath = normalizedPath
        .substring(pathPrefix.length)
        .replace(/^\//, '');
    }

on normalizedPath i have https://cos/_next/static/css/5749cf13b9f9d25a.css on pathPrefix i have https://cos/_next/

on result in normalizedPath i have static/css/5749cf13b9f9d25a.css

I think i your case is not problem with using files from cdn becouse is getted from disk.

[baraeb92]

We have experienced this as well.

There is a spike in the CPU usage when using optimizeCSS. As it keep on requesting the CSS file on every load.

@SukkaW @janis