Search code examples
angularangular-clilighthouse

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

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.

Solution

  • try this:

    ng serve --prod --build-optimizer

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