critters VS critters

I'm interested in the notion of identifying "critical" CSS that should be inlined rather than live in its own stylesheet.

I was hoping there was some principled way of identifying critical and non-critical CSS (e.g. user interaction effects like :hover would always be considered non-critical), but it looks like the library it's using just tries to render your page and do a best-effort detection on which rules are considered critical, which is a little unsatisfying: https://github.com/GoogleChromeLabs/critters

https://github.com/GoogleChromeLabs/critters Might be a good starting point. It’s designed to inline the css afterward so it’s more focused on extracting used css than removing unused.

With the Pages dir, we had experimental support for critters. That was good enough for me

Critters does something similar but it is intended to inline only the CSS that is visible upon the page load (top of the page). There is also a Vite plugin that inlines everything that is possible to inline

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

I find critters[0] quite easy to work with and well worth implementing on my nextjs or Astro projects.

I build a lot of landing pages so there are very few multi page visits.

[0] https://github.com/GoogleChromeLabs/critters

Doesn't critters do this already? https://github.com/GoogleChromeLabs/critters I could be wrong though

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.