How do you generate and in-line critical CSS using Tailwind and the App Router?
Unanswered
Red-tailed wasp posted this in #help-forum
Red-tailed waspOP
I’m in the process of updating a site from the pages router to the app router. Here’s the link to the site on staging: https://staging.hardcover.app/books/circe
I’ve gotten to the point where the biggest potential win is inlining critical CSS.
I saw that for the Pages router there was an “optimizeCSS†option using the Critters library, but it doesn’t appear to work with the App Router.
How are other people handling this with the app router? If the answer is manually adding those styles to the head of the page, is there a way to do that from an individual route now that next/head isn’t an option? Also, is there a way to set a CSS file that’s been loaded to defer or load async rather than immediately?
Curious to see how people are solving this, or if anyone else is trying to figure this out too. 😂
I’ve gotten to the point where the biggest potential win is inlining critical CSS.
I saw that for the Pages router there was an “optimizeCSS†option using the Critters library, but it doesn’t appear to work with the App Router.
How are other people handling this with the app router? If the answer is manually adding those styles to the head of the page, is there a way to do that from an individual route now that next/head isn’t an option? Also, is there a way to set a CSS file that’s been loaded to defer or load async rather than immediately?
Curious to see how people are solving this, or if anyone else is trying to figure this out too. 😂
17 Replies
i don't think the issue is css, it's only 20 kB, with modern internet connection it should load almost instantly. the issue is this much JS.
you need to reduce the JS client side bundle
when you run
npm run build (or yarn build or similar), you should see the bundle size for each route in your appcheck that number for this route
and reduce it
Yeah, as joulev mentioned it's not really that large.
And you can use some postcss plugins such as
And you can use some postcss plugins such as
postcss-lightningcss to minify your css output,Red-tailed waspOP
Yeah, the bundle size on that page is a big issue for sure. On a test page with just the layout it’s 80k, but on that pages it’s 300k. 😱
300 kB js bundle <- this is why
you need to optimise it
even if you remove all css, it will just be basically 320 kB -> 300 kB
negligible improvements
you need to improve on js not css
Red-tailed waspOP
Hmm, yeah. Im surprised JS is that high too, considering most of the page is server generated with few client components. Here’s a sample page without as much on it: https://staging.hardcover.app/test
whenever i get high js i always use this https://github.com/josselinbuils/next-bundle-analyzer to see what's causing such high js
Yeah for sure, my tips:
- Lazy load with
- Move heavy logic/components to server components
- Check which library/code is included in the bundle but it shouldn't be there
- Lazy load with
next/dynamic- Move heavy logic/components to server components
- Check which library/code is included in the bundle but it shouldn't be there
Red-tailed waspOP
Hmm, thanks to you both - I’ll give that a shot next rather than focusing on critical CSS.
For anyone searching for this thread and looking for an answer, I’d be curious if anyone has any other thoughts on critical css?
For anyone searching for this thread and looking for an answer, I’d be curious if anyone has any other thoughts on critical css?
Red-tailed waspOP
Oh, GraphQL 😂