Render Blocking loading Tailwind
Answered
Yellow-breasted Bunting posted this in #help-forum
Yellow-breasted BuntingOP
Hey all wondering if anyone could shed light on some performance issues im experiencing using next14 + tailwind. Basically on lighthouse we see all render blocking until tailwind has loaded the css file. This is normal behvioi imagine, but leads to bad performance scores. Is this just a trade off for using tailwind?
https://github.com/vercel/next.js/discussions/59814
https://github.com/vercel/next.js/discussions/59814
Answered by joulev
i see. yes for my case it is also slow but the downloads still happen in parallel (as expected)
11 Replies
@Yellow-breasted Bunting Hey all wondering if anyone could shed light on some performance issues im experiencing using next14 + tailwind. Basically on lighthouse we see all render blocking until tailwind has loaded the css file. This is normal behvioi imagine, but leads to bad performance scores. Is this just a trade off for using tailwind?
https://github.com/vercel/next.js/discussions/59814
tailwind is almost certainly not the culprit of that. the css file is only about 10kB, which is much smaller than the js bundle files of your app. the css should load in like 50ms, it's the js bundle files that cause slow loading time
Yellow-breasted BuntingOP
According to the waterfall the js bundles only load after the css
The css is just under 20kb downloaded
also css file taking 500ms is abnormal
are you using dev mode?
like, 20kB loaded in 500ms is highly abnormal unless you have very slow internet
Yellow-breasted BuntingOP
These results are from webpagetest.org they emulate a slower internet connection which is prob why its slow
@Yellow-breasted Bunting These results are from webpagetest.org they emulate a slower internet connection which is prob why its slow
i see. yes for my case it is also slow but the downloads still happen in parallel (as expected)
Answer
Yellow-breasted BuntingOP
Thanks for sharing, ill start a new project and run some tests
Awesome thats good news then. Should be able to fix it then. Thank you for sharing your results!