defer..., which executes when page is loaded, It is better to stop it and use async for scripts.
This statement is false.
From mozilla:
defer
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.
whereas async is:
async
For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.
...
This attribute allows the elimination of parser-blocking JavaScript where the browser would have to load and evaluate scripts before continuing to parse. defer has a similar effect in this case.
What this means in plain English is that async will load the script in parallel while the html is parsed, then once the script is loaded, it will stop the html parsing and immediately evaluate the script, and then resume the html parsing where it left off. Whereas, defer will also load the script in parallel but it will wait until the html parsing has completed before evaluating the script. Both these methods should result in the same total load time as they both eliminate parser-blocking JS.
The difference will come down to timing, if you need the js to evaluate as quick as possible without blocking then use async (typical case is ATF ads), but this will come at the expense of delaying some HTML. If the js can wait then use defer, this will ensure that the html is render asap.
Just to be clear about rocket loader, Cloudflare describes it as:
Rocket Loader prioritises your website's content (text, images, fonts etc) by deferring the loading of all of your JavaScript until after rendering.
Note that it is after rendering, not after page load.
It continues with the following claims:
On pages with JavaScript, this results in a much faster loading experience for your users and improves the following performance metrics:
Time to First Paint (TTFP)
Time to First Contentful Paint (TTFCP)
Time to First Meaningful Paint (TTFMP)
Document Load
quotes from
[
support.cloudflare.com...]
More information about LCP can be found here:
[
web.dev...]
Which recommends the following:
Scripts and stylesheets are both render blocking resources which delay FCP, and consequently LCP. Defer any non-critical JavaScript and CSS to speed up loading of the main content of your web page.
As to most likely source of the OP's problem, it lies in the details of the above quote. Specifically:
Defer any non-critical JavaScript
If one defers JS that is needed for the "Largest Content", then that will obviously cause the LCP to be deferred as well. The solution is to be specific and not to defer the critical script, while still deferring then non-critical scripts. The Cloudflare link above provides a link to a how-to guide.
