CSS
Unanswered
Wuchang bream posted this in #help-forum
Wuchang breamOP
How to check which css files are needed for initial page load?
3 Replies
Western paper wasp
Open Chrome DevTools, go to the Network tab, reload the page, and check which CSS files are loaded and how much of them is actually used
@Western paper wasp Open Chrome DevTools, go to the Network tab, reload the page, and check which CSS files are loaded and how much of them is actually used
Wuchang breamOP
thats what i did, but can it be checked automatically?
Western paper wasp
As far as I know, there’s no fully automatic way in Next.js.
css is already split per route, but to understand what’s actually used on the initial render, you still need DevTools / Coverage or Lighthouse (optionally in CI).
Check these links:
https://developer.chrome.com/docs/devtools/coverage/
https://developer.chrome.com/docs/devtools/network/
https://nextjs.org/docs/app/building-your-application/styling/css
https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer
css is already split per route, but to understand what’s actually used on the initial render, you still need DevTools / Coverage or Lighthouse (optionally in CI).
Check these links:
https://developer.chrome.com/docs/devtools/coverage/
https://developer.chrome.com/docs/devtools/network/
https://nextjs.org/docs/app/building-your-application/styling/css
https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer