Excessive modulepreload Links in Angular 18.0.0-next.4 Affecting Performance Metrics #27490
Description
Which @angular/* package(s) are the source of the bug?
platform-server
Is this a regression?
No
Description
I recently upgraded my Angular application to version 18.0.0-next.4 and migrated to esbuild and the new integrated SSR. However, I've noticed a significant impact on performance metrics, particularly First Contentful Paint (FCP) and Largest Contentful Paint (LCP), when using the new version.
Upon further investigation, I found that Angular now splits all JavaScript code into chunks and adds a <link rel="modulepreload"> for each chunk in the <head> of the page. Although the scripts are loaded asynchronously with @defer method, the preloaded scripts seem to be affecting the rendering of critical content, delaying FCP and LCP.
I've conducted tests using Lighthouse, and the results show that removing the modulepreload links improves FCP and LCP metrics. This issue seems to be similar to what was reported in these GitHub discussions:
GoogleChrome/lighthouse#11960
vitejs/vite#5991
In both discussions, users reported improvements in FCP and LCP metrics after disabling or reducing the number of modulepreload links.
Unfortunately, I couldn't find a way to selectively disable modulepreload links in Angular 18.0.0-next.4 based on specific use cases. Therefore, I would like to seek clarification and guidance on how to address this issue to improve performance.
Steps to Reproduce:
Upgrade an Angular application to version 18.0.0-next.4.
Enable SSR and use esbuild.
Analyze performance metrics using Lighthouse with and without the modulepreload links.
Expected Behavior:
I expect to see improved FCP and LCP metrics when excessive modulepreload links are removed or selectively disabled.
Additional Information:
I have attached screenshots of the Lighthouse test results, showing the impact of modulepreload links on performance metrics.
Screenshots:
Screenshot 1 - Lighthouse Test with modulepreload links
Screenshot 2 - Lighthouse Test without modulepreload links
Performed by removing all modulepreload links server side:
html = html.replace(
/<link .?rel="modulepreload" .*?href="(?<href>.+?\.js)".*?>/g,
''
);
Your assistance in resolving this issue would be greatly appreciated.
Thank you.
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 18.0.0-next.2
Node: 20.11.1
Package Manager: yarn 1.22.21
OS: win32 x64
Angular: 18.0.0-next.4
... animations, cdk, common, compiler, compiler-cli, core, forms
... google-maps, language-service, localize, material
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1800.0-next.2
@angular-devkit/build-angular 18.0.0-next.2
@angular-devkit/build-optimizer 0.1302.1
@angular-devkit/core 18.0.0-next.2
@angular-devkit/schematics 17.1.2
@angular/cli 18.0.0-next.2
@angular/ssr 18.0.0-next.2
@schematics/angular 18.0.0-next.2
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.4
Anything else?
No response