Boost Your Nuxt Website Performance and Lighthouse Score with Critical CSS (Fix render blocking CSS)
Tags: css, vue, webdev, node
Published: 2023-03-29 07:55:33

_When it comes to website performance, every millisecond counts. Slow loading times can lead to user frustration, higher bounce rates, and ultimately a negative impact on your business. This is where Critical CSS comes into play. In this post, we will explore how Critical CSS can improve your website performance and boost your Lighthouse score._

--------

## 👀 What is Critical CSS? 

Critical CSS is a technique that involves identifying the styles needed to render above-the-fold content on a page and prioritizing their loading to improve page speed. Above-the-fold content refers to the part of the page that is visible without scrolling. By prioritizing the styles needed to render this content, the page can be displayed faster, giving users a better experience.

## 🛎️ Why is Critical CSS important? 

One of the key metrics that Google's Lighthouse tool measures is website performance, which is influenced by various factors, including page speed and visual stability. Slow loading times can have a negative impact on user experience and can lead to higher bounce rates, which in turn can hurt your search engine rankings. Critical CSS helps improve these metrics by speeding up the time it takes for above-the-fold content to be displayed, making it an important tool for improving website performance.

## 🎉 Good News: [Nuxt-beastcss](https://github.com/bnznamco/nuxt-beastcss) does that for you! 

**Nuxt-beastcss** makes it easy to implement Critical CSS on your website without the need for complex configurations or manual code changes. Simply install the module and add a few lines of code to your **Nuxt** configuration, and you're ready to go! Beastcss handles the rest, identifying and prioritizing the styles needed to render above-the-fold content, and inlining them directly into the HTML file, reducing the number of HTTP requests required to load the critical CSS.

## ⭐️ Features:

- 🧙 &nbsp;Zero-configuration required
- 🧬 &nbsp;Auto Enables Nuxt CSS Extraction
- 📝 &nbsp;Inject critical CSS automatically to page html
- 🧼 &nbsp;Removes injected CSS from main files
- ⚡️ &nbsp;Lightning fast
- 🎭️ &nbsp;Working both in ssr and generate mode
- 👯 &nbsp;Both __Nuxt 3__ and __Nuxt 2__ supported.


## 📦 Quick Setup:

1. Add `nuxt-beastcss` dependency to your project

```bash
# Using pnpm
pnpm add -D nuxt-beastcss

# Using yarn
yarn add --dev nuxt-beastcss

# Using npm
npm install --save-dev nuxt-beastcss
```

2. Add `nuxt-beastcss` to the `modules` section of `nuxt.config.ts`

```js
export default defineNuxtConfig({
  modules: [
    'nuxt-beastcss'
  ]
})
```

That's it! You can now use Nuxt Beastcss in your Nuxt app ✨

## 🔨 Options:

You can write the `nuxt-beastcss` config like this:

```js
// nuxt.config.js
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  modules: ['nuxt-beastcss'],
  beastcss: {
    // Options passed directly to beastcss: https://github.com/freddy38510/beastcss/tree/master/packages/beastcss#options
    config: {
      // Default: false
      fontFace: true,
    },
  },
})
```

In the `config` object you can pass all [beastcss-official-options](https://github.com/freddy38510/beastcss/tree/master/packages/beastcss#options).

## 👏 Thanks

Thanks to [@freddy38510](https://github.com/freddy38510) for his work on [beastcss](https://github.com/freddy38510/beastcss) and thanks to [@leeoniya](https://github.com/leeoniya) for [dropcss](https://github.com/leeoniya/dropcss) the magic behind HTML parsing speed.