CSS
Unanswered
Bombay-duck posted this in #help-forum
Bombay-duckOP
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
Bombay-duckOP
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