DEV Community

Cover image for Optimizing CSS Performance in Nuxt with Critters
Jakub Andrzejewski
Jakub Andrzejewski

Posted on

Optimizing CSS Performance in Nuxt with Critters

When working on imprving performance in websites, I always like to focus on one aspect or area at the time. It is rather difficult to take a performance checklist and include all recommendations at once, this just wont work.

In todays article, I would like to get you familiar with a tool that I discovered recently called Critters. This tool will help you optimize your CSS, what eventually will contribute to better performance of your website (one aspect at the time ;)

What is Critters?

Critters is a plugin that inlines your app's critical CSS and lazy-loads the rest. You can check the full documentation about it here.

Critters' design makes it a good fit when inlining critical CSS for prerendered/SSR'd Single Page Applications. It was developed to be an excellent compliment to prerender-loader, combining to dramatically improve first paint time for most Single Page Applications.

Usage in Nuxt

Using this tool in Nuxt is relatively simple because there is already a module for that. If you like to learn more, make sure to check out the following link.

The module provies:

  • Zero-configuration required
  • Enables CSS Extraction
  • Critical CSS automatically injected to page
  • Works with Nitro prerendering

In order to install the module make sure to use the following command:

yarn add @nuxtjs/critters # or npm install @nuxtjs/critters
Enter fullscreen mode Exit fullscreen mode

And include it in your modules array:

{
  modules: [
    '@nuxtjs/critters',
  ],
}
Enter fullscreen mode Exit fullscreen mode

You can also pass some options if you like:

// nuxt.config.js
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  modules: ['@nuxtjs/critters'],
  critters: {
    // Options passed directly to critters: https://github.com/GoogleChromeLabs/critters#critters-2
    config: {
      // Default: 'media'
      preload: 'swap',
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

Nuxt has a number of ways to optimize your CSS in production:

  • βœ… Nuxt uses cssnano in the build step to minify CSS rules
  • πŸ“¦ You can enable purgecss to remove unused CSS rules from your bundle.
  • βœ… with @nuxtjs/critters you can now extract CSS files and load them separately, just inlining the CSS necessary to render the page.

Summary

And that's it! You have successfully managed to install and configure critters in your nuxt project. This is another step to make your Nuxt apps more performant! Let me know what other tools you would like me to try out next!

Top comments (1)

Collapse
 
kissu profile image
Konstantin BIFERT

I'm not sure why Nuxt's module documentation doesn't state that you could install it as a devDependency (while the original one totally is) since it's done a build time anyway. πŸ€”

Maybe it will strip it anyway from the final bundle?
Anyway, thanks for the article Jakub! πŸ™πŸ»