Boost Your Nuxt Website Performance and Lighthouse Score with Critical CSS (Fix render blocking CSS)

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 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:

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

📦 Quick Setup:

1. Add nuxt-beastcss dependency to your project

# Using pnpm
pnpm add -D nuxt-beastcss

# Using yarn
yarn add --dev nuxt-beastcss

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

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

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:

// 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.

👏 Thanks

Thanks to @freddy38510 for his work on beastcss and thanks to @leeoniya for dropcss the magic behind HTML parsing speed.

Comments

[Juan David Gómez Escobar]

I have a question this module work for a site without prerendered views? I was trying to use it in my nuxt application that generate a normal build and the run nitro but trying to understand the module it seems to only optimize the final html inside the prerender:generate hook