LCP regression between angular 14.2.6 and 14.2.9

[MarcoGlauser]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

After upgrading from Angular 14.2.6 to 14.2.9 we noticed a spike in LCP timing on some SSR pages. After a day of diffing and trying to figure out what broke, we managed to narrow it down to upgrading Angular. What makes it a bit more complicated is that we can only reproduce it in production builds and on some components. We haven't figure out why only some components are affected.

This is the performance capture with 14.2.6

This is the performance capture with 14.2.9

As you can see, LCP happens later, after the hero image has been loaded.

This is the package.json diff for those two different results

diff --git a/frontend/package.json b/frontend/package.json
index 9962901a..a5bb3cda 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -54,19 +54,19 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "14.2.6",
-    "@angular/cdk": "14.2.6",
-    "@angular/common": "14.2.6",
-    "@angular/compiler": "14.2.6",
-    "@angular/core": "14.2.6",
-    "@angular/forms": "14.2.6",
-    "@angular/material": "14.2.6",
-    "@angular/material-luxon-adapter": "14.2.6",
-    "@angular/platform-browser": "14.2.6",
-    "@angular/platform-browser-dynamic": "14.2.6",
-    "@angular/platform-server": "14.2.6",
-    "@angular/router": "14.2.6",
-    "@angular/service-worker": "14.2.6",
+    "@angular/animations": "14.2.9",
+    "@angular/cdk": "14.2.7",
+    "@angular/common": "14.2.9",
+    "@angular/compiler": "14.2.9",
+    "@angular/core": "14.2.9",
+    "@angular/forms": "14.2.9",
+    "@angular/material": "14.2.7",
+    "@angular/material-luxon-adapter": "14.2.7",
+    "@angular/platform-browser": "14.2.9",
+    "@angular/platform-browser-dynamic": "14.2.9",
+    "@angular/platform-server": "14.2.9",
+    "@angular/router": "14.2.9",
+    "@angular/service-worker": "14.2.9",
     "@angular/youtube-player": "^14.0.0",
     "@auth0/angular-jwt": "^5.0.2",
     "@aws-sdk/client-cloudfront": "^3.107.0",
@@ -123,10 +123,10 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "14.2.6",
-    "@angular/cli": "14.2.6",
-    "@angular/compiler-cli": "14.2.6",
-    "@angular/language-service": "14.2.6",
+    "@angular-devkit/build-angular": "14.2.9",
+    "@angular/cli": "14.2.9",
+    "@angular/compiler-cli": "14.2.9",
+    "@angular/language-service": "14.2.9",
     "@graphql-codegen/cli": "2.13.12",
     "@graphql-codegen/introspection": "2.2.1",
     "@graphql-codegen/typescript": "2.8.2",

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)

This is from our production image:

Angular CLI: 14.2.9
Node: 16.18.1
Package Manager: npm 8.19.2 
OS: linux x64

Angular: 14.2.9
... animations, common, compiler, core, forms, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1402.9 (cli-only)
@angular-devkit/build-angular     <error>
@angular-devkit/core              14.2.9 (cli-only)
@angular-devkit/schematics        14.2.9 (cli-only)
@angular/cdk                      14.2.7
@angular/cli                      14.2.9 (cli-only)
@angular/compiler-cli             <error>
@angular/language-service         <error>
@angular/material                 14.2.7
@angular/material-luxon-adapter   14.2.7
@angular/youtube-player           14.2.7
@nguniversal/builders             <error>
@nguniversal/express-engine       14.2.2
@schematics/angular               14.2.9 (cli-only)
typescript                        4.7.4

Anything else?

Any help to further narrow this down would be greatly appreciated :)

[JoostK]

In the FW repo there have only been two relevant PRs that were merged between those versions: #47888 and #47903. They're both in the 14.2.9 release, you can try narrowing it down by manually reverting one locally in your node_modules, run ng cache clean and then retest; if that doesn't reveal any differences then it may be a change in the CLI and/or its dependencies (so another thing to consider is to update the FW independently from the CLI and vice versa).

[MarcoGlauser]

Hi,
Sorry, I haven't had time to explore further. I'll reserve some time this week to see if I can narrow it down to one of the commits.

Talking about gut feeling, #47888 seems more probable since the pages most affected don't use animations (however, the animations module is in the bundle since it needs to be in the root Module). Additionally, the pages most impacted have the biggest transfer state overall, since they are blog pages and contain a lot of text.

[MarcoGlauser]

Never mind what I wrote above. I guess my gut was wrong.
When forcing @angular/animations to 14.2.9, I can reproduce the behaviour.
Forcing @angular/platform-server to 14.2.9 has no impact.
Hence it seems to be related to #47903

[MarcoGlauser]

I can't seem to reproduce the behaviour anymore. Not exactly sure why, but maybe a Chrome/Lighthouse update fixed the issue in the meantime.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}