NextScript generates render blocking request
Unanswered
Florida White posted this in #help-forum
Florida WhiteOP
In my _document.tsx I have <NextScript /> used in this way
As far as I understand, the script should be marked as
but Chrome DevTools gives me an issue of 1,39 seconds to paint the page, with the messages
Render blocking request
Add an async or defer attribute to the script so that it can be executed later and not delay rendering (see attached image).
Is there something wrong from my side?
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head />
<body className="selection:bg-transparent">
<Main />
<NextScript />
</body>
</Html>
);
}As far as I understand, the script should be marked as
deferbut Chrome DevTools gives me an issue of 1,39 seconds to paint the page, with the messages
Render blocking request
Add an async or defer attribute to the script so that it can be executed later and not delay rendering (see attached image).
Is there something wrong from my side?
13 Replies
@Florida White In my _document.tsx I have <NextScript /> used in this way
JS
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head />
<body className="selection:bg-transparent">
<Main />
<NextScript />
</body>
</Html>
);
}
As far as I understand, the script should be marked as `defer`
but Chrome DevTools gives me an issue of 1,39 seconds to paint the page, with the messages
Render blocking request
Add an async or defer attribute to the script so that it can be executed later and not delay rendering (see attached image).
Is there something wrong from my side?
<NextScript /> is the main bundle of your application hence cannot be async’d or defer’d.
Are you benchmarking your app in dev mode?
Are you benchmarking your app in dev mode?
Florida WhiteOP
yes, in dev mode.
but the UX is really slow even in production mode. this is the reason why I'm profiling
the UX is slow when I leave one page to enter another one of my application
@Florida White yes, in dev mode.
Dev mode should never be used for benchmarking because it doesn’t have the necessary optimisations, and pages are only built on demand
Always use prod mode to benchmark
Florida WhiteOP
does Chrom DevTool work in prod mode too?
Why would it not?
Chrome doesn’t know – nor does it need to care – whether the site running on it is in dev or prod mode
Florida WhiteOP
I'm going to try in prod mode
Florida WhiteOP
I've been used profiling in dev mode becasue react profile in Chrome dev tools doesn't work in dev, but only in prod
and so I took this habit as a general habit
For debugging, you absolutely need dev mode. So if you use a browser extension or a browser tool to debug, you need to do it in dev mode. But dev mode is not optimised so it should never be done to benchmark applications.