Hello World Angular CLI as Measured by Lighthouse(Why slow and enormous?)

Question

Do optimizations need to be applied to the Angular CLI Hello World or is this a valid "performance" result?

In applying Lighthouse to our live angular 4 project, we compared to the Angular CLI Hello World.

From console:

npm install -g @angular/cli
ng new my-dream-app
cd my-dream-app
ng serve --prod

In Chrome -> F12 -> Audits -> Run Lighthouse.

• Performance is 39/100.
• First Meaningful Paint is 15,250ms
• Perceptual Speed Index: 15,248 (target: < 1,250)
• Has enormous network payloads: Total size was 2,453 KB (target: < 1,600 KB)

Update 1

Thx to @Moshe, using:

ng serve --prod --build-optimizer

Gave the following: - Performance is 96/100. - First Meaningful Paint is 2,040ms - Perceptual Speed Index: 2,054 (target: < 1,250); Grade of 92/100

Ultimately had a difficult time forming a singular, concise question for this. I understand ng serve is not for production use, even with ags.. But this allows my to test on my localhost before publishing.

Answer 1

try this:

ng serve --prod --build-optimizer

build-optimizer flag is a new tree-shaking method built on top of the CLI.

Answer 2

ng serve is not meant to be completely optimized, it is meant to be a quick display of your project for testing. If you want the optimized version you have to run ng build --prod to generate the files, and then you have to host those files. Do a test on that and it will run much quicker.

Answer 3

After creating a PWA, with ng new <your app's name> --service-worker, the best Lighthouse audit result comes from the following:

1. Build the app with optimizations

   ng build --prod --build-optimizer

2. Host it somewhere with https to take advantage of HTTP2. For example for firebase (you need an account):

   npm install -g firebase-tools

   firebase login

And then at your root directory (the one above src and dist usually)

firebase init

There, select

Hosting: Configure and deploy Firebase Hosting sites

Add it to a firebase project, and when you are asked about the public directory

What do you want to use as your public directory?

type dist.

Afterwards

firebase deploy

3. Visit the url that the previous command returns, and audit there.

---

The result that you're getting from auditing the output of ng serve (or npm start), is not representative, as it focuses on compilation speed and ease of debugging.