PageSpeed Insight is showing a low performance for an Angular SPA app

Question

I'm running an Angular app that is showing a very low score in PageSpeed Insight for mobile (41 for mobile, 86 for desktop).

I am attaching the screenshot of the errors here.

I could really use some help sorting out these problems. Any advice you've got would be awesome!

Some details about the app

• Angular 17.1
• I lazy-loaded all the routes and used only standalone component
• The app does have some third-party libraries example: Angular Material, Ngrx, Chartjs, ...

Pagespeed test

Low mobile score - 41

Reduce JavaScript execution time 1.5 s

Minimize main-thread work 2.4 s

Largest Contentful Paint element 5,640 ms

Answer 1

Are you running your pagespeed indexing on a production build? If you are running this whilst in development mode your application will not have been optimised and you will see misleading results.

If you are testing locally without deploying your build to a web server then for a simple test use ng serve --configuration=production and see if you achieve better performance results.

Answer 2

I saw it was Slow 4G throttling. Did you expect >80 score in slow throttle? Your performance is lowering mostly caused by LCP and Load Delay. It is a circumstances test not the actual experience of your clients.

On the other side, you've added fetchpriority="high" and loading="eager" to your logo_500x300.webp image.

You can add fetchpriority="high" to improve load delay but loading="eager" is doing nothing better than it was not included. Default is loading eagerly (unless your default is not set to lazy), loading="lazy"makes it slower.

We can't see did you use preload or preconnect or something to improve DNS loading. If you used them you can add fetchpriority="high" to them.