Bad performance in pagespeed due to polyfills

[Gnorro]

🐞 Bug report

We have very bad performance score in Google Pagespeed

Description

We have a big app in angular 8 and we have ever suffered of performance problems with Google Pagespeed. Score are 10, max 20 for mobile version.

We have already done every possible updates to our app for having lazy loading, lazy load images, changeDetection.OnPush and so on but this is not enough

🔬 Minimal Reproduction

Run pagespeed

🔥 Exception or Error

No error, only bad score

🌍 Your Environment

Angular CLI: 8.3.23
Node: 10.16.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.23
@angular-devkit/build-angular     0.803.23
@angular-devkit/build-optimizer   0.803.23
@angular-devkit/build-webpack     0.803.23
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cdk                      8.2.3
@angular/cli                      8.3.23
@angular/material                 8.2.3
@angular/pwa                      0.900.1
@ngtools/webpack                  8.3.23
@schematics/angular               8.3.23
@schematics/update                0.803.23
rxjs                              6.5.4
typescript                        3.5.3
webpack                           4.39.2

Anything else relevant?

I already read this thread: https://github.com/angular/angular-cli/issues/14871 And we have similar problems.

What I understand from that thread is that it could be a problem not related to polyfills, even Google Pagespeed says that. It could be something related to zone. My problem is that I don't know how to debug and to understand where js execution time is high.

I can give public address in private if needed

I attached a print screen of what I see in Google Pagespeed

My tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

My tsconfig.e2e.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
}

My package.json

{
  "name": "xxx",
  "version": "0.0.0",
  "scripts": {
    ...
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.7",
    "@agm/js-marker-clusterer": "1.1.0",
    "@angular/animations": "8.2.14",
    "@angular/cdk": "8.2.3",
    "@angular/common": "8.2.14",
    "@angular/compiler": "8.2.14",
    "@angular/core": "8.2.14",
    "@angular/forms": "8.2.14",
    "@angular/material": "8.2.3",
    "@angular/platform-browser": "8.2.14",
    "@angular/platform-browser-dynamic": "8.2.14",
    "@angular/platform-server": "8.2.14",
    "@angular/pwa": "0.900.1",
    "@angular/router": "8.2.14",
    "@angular/service-worker": "8.2.14",
    "@satispay/web-button-factory": "1.4.3",
    "angular4-social-login": "1.1.1",
    "basicrotate": "^1.1.0",
    "braintree-web": "3.57.0",
    "braintree-web-drop-in": "1.22.0",
    "classlist.js": "^1.1.20150312",
    "codice-fiscale-js": "2.2.4",
    "domino": "2.1.3",
    "express": "4.17.1",
    "font-awesome": "4.7.0",
    "hammerjs": "2.0.8",
    "js-marker-clusterer": "1.0.0",
    "lory.js": "2.5.3",
    "md5": "2.2.1",
    "moment-mini-ts": "2.20.1",
    "ng-lazyload-image": "7.0.1",
    "ng2-cookies": "1.0.12",
    "ngx-gallery": "5.10.0",
    "ngx-json-ld": "0.3.1",
    "ngx-loadable": "1.1.1",
    "ngx-responsive": "8.0.1",
    "ngx-swiper-wrapper": "8.0.2",
    "paypal-checkout": "4.0.311",
    "rxjs": "~6.5.4",
    "tslib": "1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.803.23",
    "@angular/cli": "8.3.23",
    "@angular/compiler-cli": "8.2.14",
    "@angular/language-service": "8.2.14",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~5.2.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.1",
    "karma-jasmine": "~3.1.0",
    "karma-jasmine-html-reporter": "1.5.1",
    "node-ts": "5.0.1",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "3.5.3",
    "webpack-bundle-analyzer": "3.3.2"
  }
}

Thanks

[alan-agius4]

Hi, from the screenshot above I can suggest a couple of things;

1) Reduce the DOM nodes, 7,000+ is massive. I don't know how how your DOM is structured but you should check and evaluate why there are so many DOM nodes. 2) Use source-map-explorer to analyse your bundles 3) Use Chrome profiling tools to analyse CPU usage, Re-flows and other important matrix. See https://developers.google.com/web/tools/chrome-devtools/evaluate-performance for more info. 4) I'd also check what's in Chunk 23, that seems to be used quite a lot of CPU time.

That being said, this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[angular-automatic-lock-bot[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.}