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

And include it in your modules array:

{
  modules: [
    '@nuxtjs/critters',
  ],
}

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',
    },
  },
})

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!