search

basics / nuxt-booster

nuxt-booster will help you to improve the lighthouse performance score (100/100) of your website. 🚀
https://basics.github.io/nuxt-booster/
MIT License
649 stars 32 forks source link

Disable Critters #849

Closed StirStudios closed 1 year ago

StirStudios commented 1 year ago

Could a feature be added to disable critters?

We've been testing on a website that uses color mode switching, but we're having trouble getting it to recognize the modes and remove non-critical elements.

Currently, we're using Nuxt Purge with the following settings, and color modes are functioning properly:

[
      'nuxt-purgecss',
      {
        enabled: process.env.NODE_ENV === 'production' ? true : false,
        content: [
          'node_modules/bootstrap/**/*.js',
          'node_modules/bootstrap-vue-next/**/*.js',
          'node_modules/aos/**/*.js',
        ],
        safelist: {
          standard: [/^navbar/, /^fixed-top/, /^btn-/, /^row-/],
          deep: [],
          greedy: [],
          keyframes: [],
          variables: [],
        },
      },
    ],

When we include Nuxt Speed Kit, our Lighthouse score improves to 100 in all aspects, which is excellent. However, it disrupts the color mode.

Since your module includes critters, we have attempted to assign importance to the selectors:

  critters: {
    // Options passed directly to critters: https://github.com/GoogleChromeLabs/critters#critters-2
    config: {
      // Default: 'media'
      preload: 'swap',
      includeSelectors: [/^navbar/, /^fixed-top/],
    },
  },

But absolutely no luck.

ThornWalli commented 1 year ago

@StirStudios Critters should be easy to disable via disableNuxtCritters.

https://nuxt-speedkit.grabarzundpartner.dev/v3/guide/options#disablenuxtcritters

StirStudios commented 1 year ago

@ThornWalli so sorry I missed that and wasting your time responding! Just tested and it works perfectly and we are still getting 100 lighthouse score. Keep up the great work!

ThornWalli commented 1 year ago

Hello @StirStudios ,

I have made another modifications... Critters is now disabled by default, makes problems when you work with fonts in nuxt-speedkit because the HTML is emptied and you can not simply disable certain things.

But now there is a greater modification. With Nuxt 3.7.2 the CSS in the Vite-Build can now be extracted, so it was possible to put the start CSS of Vite directly into the markup. Instead of loading a CSS file or inserting it from critters.

But this also means that with the use of nuxt-speedkit you have to use the latest version of Nuxt... 3.7.2.

Would be happy about a feedback from your side 🙂

856 856

StirStudios commented 1 year ago

Hello @ThornWalli,

Thanks so much for keeping us posted on progress!

We updated to Nuxt 3.7.2 and set disableNuxtCritters: false but we get the following error on generate:


 ERROR  <css input>:1:1: Unknown word                                                                                                                                                                                                                         2:46:09 AM

  at Input.error (node_modules/.pnpm/postcss@8.4.29/node_modules/postcss/lib/input.js:106:16)
  at Parser.unknownWord (node_modules/.pnpm/postcss@8.4.29/node_modules/postcss/lib/parser.js:594:22)
  at Parser.other (node_modules/.pnpm/postcss@8.4.29/node_modules/postcss/lib/parser.js:436:12)
  at Parser.parse (node_modules/.pnpm/postcss@8.4.29/node_modules/postcss/lib/parser.js:471:16)
  at parse (node_modules/.pnpm/postcss@8.4.29/node_modules/postcss/lib/parse.js:11:12)
  at parseStylesheet (/project/node_modules/.pnpm/critters@0.0.19/node_modules/critters/dist/critters.mjs:776:10)
  at Critters.processStyle (/project/node_modules/.pnpm/critters@0.0.19/node_modules/critters/dist/critters.mjs:1390:17)
  at /project/node_modules/.pnpm/critters@0.0.19/node_modules/critters/dist/critters.mjs:1135:48
  at Array.map (<anonymous>)
  at Critters.process (/project/node_modules/.pnpm/critters@0.0.19/node_modules/critters/dist/critters.mjs:1135:30)

Just in case we deleted node_modules and ran pnpm i

Any ideas?

ThornWalli commented 1 year ago

@StirStudios I'll take a look! Now with Critters again? 🙃

ThornWalli commented 1 year ago

@StirStudios I have now updated and understood that I have to be careful with critters.

  1. if Critters is activated, the CSS is loaded normally. Here you can choose via vite.build.cssCodeSplit whether one or x files are loaded per component. Critters then decides which CSS from the files comes into the markup, a disadvantage I see in it, it is unnecessarily CSS reloaded.

  2. if Critters is disabled, I take all CSS files that are initially available and embed them in the HTML files.

StirStudios commented 1 year ago

@ThornWalli just wanting to check something is not broken on my end:

"scripts": { "build": "nuxi build", "dev": "nuxi dev", "generate": "nuxi generate", "preview": "nuxi preview", "postinstall": "nuxi prepare", "lint": "eslint --ext .ts,.js,.vue, --ignore-path .gitignore .", "release": "release-it" }, "devDependencies": { "@bootstrap-vue-next/nuxt": "^0.12.3", "@nuxt/devtools": "^0.8.3", "@nuxt/image": "rc", "@types/node": "^20.6.0", "@typescript-eslint/eslint-plugin": "^6.7.0", "@typescript-eslint/parser": "^6.7.0", "@vue/eslint-config-typescript": "^12.0.0", "bootstrap": "^5.3.1", "bootstrap-vue-next": "^0.12.3", "eslint": "^8.49.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-prettier": "^5.0.0", "eslint-plugin-vue": "^9.17.0", "nuxt": "^3.7.2", "nuxt-font-loader": "^2.3.4", "nuxt-gtag": "^1.1.0", "nuxt-icon": "^0.5.0", "nuxt-purgecss": "^2.0.0", "nuxt-seo-kit": "^1.3.13", "prettier": "^3.0.3", "release-it": "^16.1.5" }, "dependencies": { "aos": "^2.3.4", "nuxt-speedkit": "^3.0.0-next.24", "playwright": "^1.37.1" } }

I am always getting this now:

ERROR Cannot read properties of undefined (reading 'disableNuxtCritters')

Nuxt config:

 [
      'nuxt-speedkit',
      {
        disableNuxtCritters: true,
        disableNuxtFontaine: true,
        disableNuxtImage: true,

        detection: {
          performance: true,
          browserSupport: true,
        },

        performanceMetrics: {
          device: {
            hardwareConcurrency: { min: 2, max: 48 },
            deviceMemory: { min: 2 },
          },
          timing: {
            fcp: 800,
            dcl: 1200,
          },
        },

        componentAutoImport: false,
        componentPrefix: undefined,

        lazyOffset: {
          component: '0%',
          asset: '0%',
        },
      },
    ],

Any ideas?

ThornWalli commented 1 year ago

@StirStudios Gave another update 🙃 3.0.0-next.25

Had incorrectly retrieved the option.

StirStudios commented 1 year ago

mmm still getting the same error even with a node_modules purge.

Nuxt Config: "nuxt-speedkit": "3.0.0-next.25",

Complete error:

 ERROR  Cannot read properties of undefined (reading 'disableNuxtCritters')                                                                                                                                                                                   9:07:32 AM

  at optimizePreloads (/project/node_modules/.pnpm/nuxt-speedkit@3.0.0-next.25_browserslist@4.21.10_vue@3.3.4/node_modules/nuxt-speedkit/dist/module.mjs:300:31)
  at setup (/project/node_modules/.pnpm/nuxt-speedkit@3.0.0-next.25_browserslist@4.21.10_vue@3.3.4/node_modules/nuxt-speedkit/dist/module.mjs:471:7)
  at async normalizedModule (/project/node_modules/.pnpm/@nuxt+kit@3.7.2/node_modules/@nuxt/kit/dist/index.mjs:2141:17)
  at async installModule (/project/node_modules/.pnpm/@nuxt+kit@3.7.2/node_modules/@nuxt/kit/dist/index.mjs:2426:95)
  at async initNuxt (/project/node_modules/.pnpm/nuxt@3.7.2_@types+node@20.6.0_eslint@8.49.0_typescript@5.2.2/node_modules/nuxt/dist/index.mjs:3547:7)
  at async loadNuxt (/project/node_modules/.pnpm/nuxt@3.7.2_@types+node@20.6.0_eslint@8.49.0_typescript@5.2.2/node_modules/nuxt/dist/index.mjs:3632:5)
  at async loadNuxt (/project/node_modules/.pnpm/@nuxt+kit@3.7.2/node_modules/@nuxt/kit/dist/index.mjs:2571:19)
  at async Object.run (/project/node_modules/.pnpm/nuxi@3.8.3/node_modules/nuxi/dist/chunks/prepare.mjs:59:18)
  at async runCommand$1 (/project/node_modules/.pnpm/nuxi@3.8.3/node_modules/nuxi/dist/shared/nuxi.46d00f54.mjs:1647:7)
  at async runCommand$1 (/project/node_modules/.pnpm/nuxi@3.8.3/node_modules/nuxi/dist/shared/nuxi.46d00f54.mjs:1638:11) 

 ERROR  Cannot read properties of undefined (reading 'disableNuxtCritters')
ThornWalli commented 1 year ago

I'm ashamed to say I forgot something else. Not noticeable if property is included in the nuxt.config.

The next release should work. 3.0.0-next.26

https://github.com/GrabarzUndPartner/nuxt-speedkit/actions/runs/6175208685

StirStudios commented 1 year ago

No worries, this is a great module and glad I can help test and fix. This time it does work, I now only get a warning:

WARN [nuxt] Could not resolve /project/.nuxt/nuxt-speedkit/plugin.server.js.

ThornWalli commented 1 year ago

I get the message too, from time to time even from other plugins... Watch this, came with the latest Nuxt version.

StirStudios commented 1 year ago

Good too know, it is only a warning so assume it will get fixed with a Nuxt update! Keep up the great work and always happy to help.