Nuxt.js: extractCss build option doesn't preload the extracted styles

[simplenotezy]

Versions

• nuxt: v2.14.0
• node: v12.18.3

Reproduction

Please have a look at: https://github.com/nuxt/nuxt.js/issues/6980 perhaps reopen the issue as it seems to have drowned in closed issues. PageSpeed scores are getting hurt because stylesheets are not prefetched when using extractCSS: true in build configuration.

[farnabaz]

Could you provide a reproduction example on codesandbox?

[simplenotezy]

@farnabaz Created one here, although not sure how I can run yarn nuxt generate in codesandbox: https://codesandbox.io/s/sad-elbakyan-ot9p7?file=/pages/about.vue

[vanhoofmaarten]

Hi @farnabaz & @simplenotezy,

I'm experiencing also the same issue. I've decided to dig a little deeper and came to the following findings:

In my case, it's the nuxt-link smart prefetching mechanism that is causing a Lighthouse/Pagespeed penalty.

Disabling smart-prefetching in the nuxt.config.js improved PageSpeed Scores:

router: {
  prefetchLinks: false,
},

With smart prefetching
https://mrtnvh-f7gx0m4xt.vercel.app/
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmrtnvh-f7gx0m4xt.vercel.app%2F

Without smart prefetching
https://mrtnvh-8apsftmsa.vercel.app/
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmrtnvh-8apsftmsa.vercel.app%2F&tab=mobile

[farnabaz]

@simplenotezy Sorry for the late response, check out https://codesandbox.io/s/winter-tree-9qpyw
I have forked you CSB and modify commands to server static target, as you can see prelaod links are generated.

@vanhoofmaarten I guess this isn't an unexpected behavior, smart prefetching, prefetch data and assets of pages that users may visit after this page to reduce navigation delay and improve user experience.
On the other hand PageSpeed measure, just one page and and does not tolerate unused resources.

[vanhoofmaarten]

@farnabaz

I guess this isn't an unexpected behavior, smart prefetching, prefetch data and assets of pages that users may visit after this page to reduce navigation delay and improve user experience.

Agreed. The smart prefetching is a very good feature and provides a wonderful user-experience.

But, IMHO, there is room for improvement. The current implementation of smart prefetching not only fetches, but also evaluates the route chunks of which the <nuxt-link/>s are visible on screen. It simply injects <scripts> and <style>. Quicklink, on the other hand injects <link rel="prefetch">, which fetches and caches the resource without evaluating it.

I'd be happy to dig a little deeper and open a new issue for this when I know more.

---

On the other hand PageSpeed measure, just one page and and does not tolerate unused resources.

In my personal scenario, yes. But for websites with a larger amount of pages, where smart prefetching might load and evaluate several page chunks, this could have quite an impact on PageSpeed scores which both influence SEO ranking and UX.

---

I think that we can resolve this issue if we can get a preload functionality in extract-css-chunks-webpack-plugin, the Webpack plugin responsible for the extractCSS feature.

Luckily, mini-css-extract-plugin, of which extract-css-chunks-webpack-plugin seems to have a great resemblance, has an open PR for adding a preload functionality.

Some quick local experiments with a fork of extract-css-chunks-webpack-plugin where I ported the preload PR from mini-css-extract-plugin, have proven to be quite fruitful.

Test-scenario:

• Nuxt.js commit a748cf0ca350b3a6f92f54c86ea548a47fd394c2
• Example nested-routes
• Manually added extractCSS: true

Results:

• Default: without-preload-localhost_3000-20201013T082250.pdf
• Using a fork of extract-css-chunks-webpack-plugin with added preload functionality: with-preload-localhost_3000-20201013T082250.pdf

I'll continue further and try to publish a PR to extract-css-chunks-webpack-plugin.

[vanhoofmaarten]

Hi @farnabaz ,

extract-css-chunks-webpack-plugin has approved my merge-request. Updating to 4.8.0 will enable CSS preloading.

I see Renovate has already picked up the update in PR #8267. Merging that PR closes this issue.

[vanhoofmaarten]

8267 has been merged by @clarkdo .

This issue can be closed.