LCP regression between angular 14.2.6 and 14.2.9

This issue has been created since 2022-11-22.

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
14 2 6

This is the performance capture with 14.2.9
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 wrote this answer on 2022-11-22

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).

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-12-01
Star Count 85220
Watcher Count 3042
Fork Count 22607
Issue Count 1316

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
How To Click an unfixed button 4 2022-04-01 2022-11-04
Adapt the Twitter crawler to output better text files 1 2021-08-06 2022-05-03
Difficulty setting up 8 2015-08-10 2022-11-25
Modern diag - diag_utils_mod circular dependency 0 2022-09-13 2022-11-22
@which errors when function is defined using parametric ComponentArray 1 2021-06-01 2022-08-05
osf_upload(...conflicts= 'skip') doesn't worl 1 2021-07-01 2022-11-26
[Listing] Request listing for {AnonymChain} 1 2021-04-30 2022-11-20
The sdk for v2 factory not working. 2 2021-04-27 2022-11-20
blog/love-types/ 1 2021-11-13 2022-01-02
blog/century-of-the-fruitbat/ 6 2021-11-13 2022-10-11
Have the same question as "Training with clean version #61" 3 2021-09-14 2022-11-24
--restore-database-mapping and ReplicatedMergeTree shall replace /db_name/ in replication path, also restore engine=Distributed shall replace underlying table 0 2022-10-23 2022-11-15
Compiling help: 8 2021-09-23 2022-01-09
Typo, Command chapter. 2 2021-08-13 2022-09-16
Whitening transformation in sm.GLS() 4 2022-07-19 2022-11-24
[BUG] same error results in multiple calls in release/profile build 2 2021-05-31 2022-11-22
[BUG] FlutterToastPage context is used after disposed 8 2021-05-02 2022-11-22
button "fit to window" not working propperly 0 2022-06-07 2022-08-27
There is a problem on HUAWEI phone devices.About zygisk. 1 2022-07-10 2022-11-18
Large numbers in timing terminal output should be formatted with commas 0 2022-07-14 2022-09-24
VSCode (Powershell) starts with two terminals open: Powershell Integrated and "pwsh" 14 2022-04-19 2022-11-27
Compiler AssertionError(msg="found nested Conditional") 1 2022-07-28 2022-09-16
LLVM under wine is excruciatingly slow 6 2022-07-29 2022-09-17
[URGENT][BUG][UI5-Table][UI5-List][Badge]Inner ui5-hidden-text element will result the error rendering of ui5-table, ui5-list in RTL mode 4 2021-07-14 2022-11-24
Documentation: `sap.ui.core.IAsyncContentCreation` is not mentioned in "Use Asynchronous Loading" of the Best Practices for App Developers 4 2021-09-15 2022-11-25
Pagefault calling parsersdptr 6 2021-01-15 2022-11-25
More Fields Window Truncates Options 2 2021-11-03 2022-10-04
[Bug]: The options from the Connection and Tracking Protection menu are not inverted 1 2021-09-09 2022-09-05
Is video blocking possible with Adguard? 0 2021-10-19 2022-10-17
[Bug report] Weird characters in `md` file. 4 2022-08-21 2022-11-13
Empty yaml property messes up output 0 2021-02-15 2022-11-21
15.0 partner_company_group was merged in 15.0 without taking the module split into account 1 2022-09-27 2022-11-27
Restoring modules from Azure CR occasionally fails with: Azure PowerShell authentication timed out 1 2022-05-13 2022-11-22
Implement user to share post (first some text based post only) 0 2021-07-30 2022-11-16
Written Parquet file way bigger than input files 3 2022-04-28 2022-10-06
Improve interpolation for copyResizeCropSquare 0 2022-09-04 2022-11-25
[Phase 2] Add cluster option to support colocation on-by-default on database 0 2022-06-01 2022-10-04
`*` Showing on optional inputs in a blueprint 1 2022-04-08 2022-11-10
Model weights in the Projects Directory - Creative Commons Attribution-ShareAlike 3.0 License? 0 2021-10-09 2022-11-28
Unable to purge the database when using a non-default connection string 2 2022-11-16 2022-11-19
Is it possible to suppress all vulnerabilities that are (only) via a specific dependency? 6 2022-11-14 2022-11-19
Create a Courses block based on Query Loop block 0 2022-08-04 2022-08-21
Updating to version 0.10.4 and supporting Gradle 7 2 2021-08-08 2022-11-01
Inconsistent behavior when user is logged in on two different browsers after changing password 3 2022-02-07 2022-10-07
docs: Mention the typical header of build.yml 0 2021-11-16 2022-11-10
cannot import name 'anchor_generator_pb2' from 'object_detection.protos' 7 2022-07-14 2022-10-29
Feature: Add support for k8s v1.22+ 1 2021-12-24 2022-09-29
Expression.setValue cannot parse complex expressions 2 2022-02-22 2022-11-11
The enum comments should be updated 0 2016-10-19 2022-11-24
On modern runtimes, HttpClient.GetAsync is really slow to localhost, really fast to 127.0.0.1 20 2022-02-15 2022-10-05