Angular7 slow performance on Google Page Speed due to zone.js

Question

I use Angular 7 as ssr, and we found out that our application has heavy and serious problems with Google Page Speed and all the issues are funnelling to zone.js

Page speed complain about the script valuation is too high, after breaking down the app, we found the issues were related to polyfills, however, polyfills only containing

  import 'zone.js/dist/zone.js';  // Included with Angular CLI.
  import 'classlist.js/classList.min.js';
  import 'web-animations-js/web-animations.min.js';

then what we did was totally remove all the content on polyfills file, leave it empty, and add those files, directly from a CDN on the bottom of index.html as:

<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.1/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.201711092/classList.min.js"></script>

and the result was the same, the page speed still complaining about script valuation, however, we manage to reduce 50% of the script valuation, however, still and is really bad.

We were using a zone.js@0.8.10 then we upgrade to latest but nothing. Same result.

In fact, this is affecting all our apps no matter if we build as aot or server-side render, the result is the same.

Does anyone know how to solve this issue with page speed? Our ranking, is below 20 over 100 as SSR.

This doesn't make any sense, it supposes to be faster, not slower?

image page speed polyfills

package.json

      "scripts": {
  "ng": "ng",
  "start": "ng serve --watch --open --progress",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "build:ssr": "rimraf dist && npm run build:client-and-server-bundles && npm run webpack:server -p",
  "serve:ssr": "node dist/server.js",
  "build:client-and-server-bundles": "node --max_old_space_size=4000 node_modules/@angular/cli/bin/ng build --prod && ng run micksgarage-project:server",
  "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
  "bundle-report": "webpack-bundle-analyzer dist/*/stats.json"
},
"private": true,
"dependencies": {
  "@angular-devkit/build-optimizer": "^0.802.0",
  "@angular/common": "~7.2.0",
  "@angular/compiler": "~7.2.0",
  "@angular/core": "~7.2.0",
  "@angular/forms": "~7.2.0",
  "@angular/http": "~7.2.0",
  "@angular/platform-browser": "~7.2.0",
  "@angular/platform-browser-dynamic": "~7.2.0",
  "@angular/platform-server": "~7.1.0",
  "@angular/pwa": "^0.12.4",
  "@angular/router": "~7.2.0",
  "@angular/service-worker": "~7.2.0",
  "@nguniversal/express-engine": "~7.1.0",
  "@nguniversal/module-map-ngfactory-loader": "~7.1.0",
  "classlist.js": "^1.1.20150312",
  "core-js": "~2.5.4",
  "rxjs": "~6.3.3",
  "rxjs-compat": "~6.3.3",
  "zone.js": "^0.10.1"
},
"devDependencies": {

angular.json as angular.io SSR configuration plus:

          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": true,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": true,
          "commonChunk": true,
          "buildOptimizer": true,
          "statsJson": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            }
          ],
          "serviceWorker": true,
          "ngswConfigPath": "src/ngsw-config.json"

I even try zone-evergreen.min.js have a look on the screen shot

Also I found plenty of sites with the same issue, related to polyfills.ts or have problems with Google Page speed, you can see here https://www.madewithangular.com/categories/angular/ that any site made with Angular have this issue with zone.js. Please check any site, copy and paste the URL into Page Speed, and you will see the same issue, over and over again, this is not a coincidence.

• https://www.delta.com/eu/en
• https://www.forbes.com

and many more.

Answer 1

Basically, Angular uses Zone.js to run change detection every time some async event happened.

The problem is not the zone itself. Consider posting some parts of the application (on stackblitz maybe).

First guess: Are you using functions for template binding? (or getters!)

// component.HTML
<p>{{ getName() }}</p>

// component.TS
getName(): string {
    return 'John Doe';
}

If the answer is yes, function is called on each async event (mouse move, click..) and every time event is triggered, change detection is going to run and check all the values if they are changed.

Hope that helps.