Why Angular 7 newly created project performance is bad in Lighthouse report ? improving performance.

1. Install lighthouse chrome plugin first to test speed.
2. ng new angular-new
3. run your angular app — ng serve
4. On right top of browser click on lighthouse plugin and generate report, it will take 40 seconds to generate report

click on generate report

Lighthouse report

What ? new angular app performance is very low ? Lighthouse and angular both are googles project so why such a bad report ?

1. Host website to real https server, if you dont have any server just — free npm plugin — npm install -g surge
2. ng build — prod
3. now go to your website folder enter command surge . Enter information and hosting ready :)

Host on dummy — domain

Lets test speed now — click on lighthouse icon and generate report

Hosting in real server — on gzip compression on your server (dummy server bydefault use compression)

Acheiving almost 100 percent do these step —

1. add meta tags for SEO

<meta name=”description” content=”Technical Academy “>

<meta name=”keywords” content=”Free JavaScript | Angular tutorials”>

<meta name=”author” content=”Shivam Gupta”>’

2. Add
<noscript>Your browser does not support JavaScript!</noscript>
inside body.
3. Make your angular app progressive web app using service worke

Note —

1. If you are using big project and going to use 3rd party libraries like bootstrap, moment.js ... So avoid using cdn install by npm .
2. use images in svg formats
3. Use only required network call while launch the application and other network call in lazy loaded mode (in which page required)

Example —
you want to use firebase.js from cdn in login.js page so add <script> in run time when open login page by —

Code to dynamic add script urls to head section

renderScript(“lib/firebase.js”, function() {

console.log(“Successfully rendered firebase.js. hmm”);

})

Thanks please give claps if this article is helpful for you.