[EN] Angular Performance Tuning

good evening today I'm talking with my colleague Alex stalhama schwart lxt about the optimization of angular applications and for this we are going through a real example and Alex will show us how we can speed this application up Hello Alex hi my friend how are you yeah fine thanks and you I'm great awesome awesome so the thing is Alex is currently in a posturia he moved there because he is a big fan of skiing and I think snowboarding I think snowboarding comes first is that right yes whenever there's powder these days nice nice okay so I would say let's get started with your assembly of prepared for us with that you want to show us how to tune an angle application for this you need to share your screen it's one of the links below yes all right entire screen yes okay here we go so stage is yours Okay cool so I want to go um through this um audit tools quickly that I will um um show or talk about and the first one we will do in this demo is uh pitch pit inside and chrome Lighthouse this is a tool we can analyze a web property with on every website and every angular application we can run this tool and then there are some other tools which we will not discuss today but just to let you know um these are the tools I use when I do performance audits and most of them are focus on the initial load of website and this is also what we will focus in this short little video today so let's uh start on talking about all this page speed insight and chrome letters so these are two two very similar tools and under the hood they're both use the same um platform the lighthouse platform and Page speed inside is a tool that you can use on the Google server so that gives you a real user experience measurement and also the lighthouse lab results and you can go to this website pagefit.web.dev and enter any URL that's publicly available to test it with this page speed insights so the test is run on Google service and this is beneficial for example you can compare this test pretty good because it doesn't depend on the hardware you you're using for example and they also have some other tests here so not only performance is being measured but also things like accessibility and as you inverse this is a Chrome browser extension and you can run the same Lighthouse test that's been used in page speed inside on your own computer and the big Advantage here is that you can also do this in development during development when you run your angle application or any other website on your localhost and you can then yeah audit the application with this Lighthouse extension and then on me analyze and optimize the application and then run the same test again you just have to um yeah install the plugin for Chrome and I will know yeah basically show you an example on this okay so um let's write this for the moment I've also prepared an audit template document so I call this Wahoo this is um I was initially proposed by Chef cross from the from the NX team and I think it's important yeah to somehow document on the audit uh yeah for for to look up later and to compare um and so I um yeah I prepared this template which is pretty um similar to the one Chef cross has used um and the the first things actually I refer here is well the test environment so I'm using a chrome version or 110 with the mobile configuration on my computer and I want to test uh actually not an angular application but uh your website Android um so I will test the home page I think that's not a good idea uh honestly it's a website made from an agency and yeah yeah it's a good it's a good best case because we have some stuff to fix there okay cool it's a great uh yeah and everybody knows it and everybody can can rerun the test on this website I think that's that's pretty cool idea [Music] okay so um like I said we have two options we can either use this page speed web dev here so I can go to this URL and then enter any URL that's perfectly available over the internet and then click analyze and this will run these lighters performance test on the Google server like I said and this is this is cool for um if you want to compare the best results it will always more or less deliver the same performance result here or the alternative of course being um you go to the web website and then open the devtools the grand Dev tools and here you can see the the lighthouse extension tab which is of course there because I've installed the extension and then you can run an audit here you can select mobile or desktop and then you can check the category in this case we only need the performance and you can also uh do this Lighthouse test locally so this is really a cool feature if you want to test your angular application or any other web property on your localhost this is the main use I guess for using Lighthouse tool okay and now let's let's check the results so we get some different results which is quite interesting um for the same um property same URL I get different results on the Google servers compared to my my localhost and this might be because um here we have the cookie pop-up usable and of course um I can avoid this um because I've already accepted the cookies here so and this is so this is would be a more accurate um test I guess for for real users so that's quite interesting I think and then we can uh take a look at some metrics so for example we have our first contentful paint largest content propane and time to interactive and these are the metrics uh that I would suggest for example to um to note to my document and for this I would go to the Baseline audit part which is the first audit of course and here I have no um I've suggested to use the medium of three or or five samples because the yeah the result can can differ a bit quite a bit if you do it more often on it so it's basically a good idea to create a medium result but of course now for the for the demo I will just um yeah copy these results basically and insert them here so the first content will bring largest console brain and time to interactive these are three measurement three measurements basically what they mean is uh first Contact full payment you start to see something uh largest comfortable paint you see you see everything um in your viewport and then time to interactive is basically the app is ready to use and you can attack with the website or was it the angular application okay and so I would just note this results here performance score 43 of course uh there is something to improve there 43 of out of 100 is uh yeah definitely doable and okay the same thing I would do then um for detailed page of course we don't only want to analyze audit and analyze the front page but also the landing pages and detailed pages so I took um yeah the page of the workshop um that I offer together with you and there we see the the result is slightly different um yeah and of course I would also write this this out down same manner on the home page basically that we have here on five four depending for the score we had 53 so slightly better this is the first step just to do this audit and then um the second part would be uh to write down some observations interpretations and and solution or improvements and of course The Next Step then would be to yeah to try to implement them implement this improvements and then I would do another audit and I will continue this process until we set okay let's look at the recommendations that we get here from from Google so this is really the power of the page speed and Lighthouse tools they don't uh they're not only um audit um the performance and give us the metrics they also tell us opportunities so here in your case obviously the big problem is images your images should be served in a in a better way they should be efficiently encoded or even served in Next Generation formats exterioration formats or this webp and Avic our formats they provide a much better compression than PNG or gpac so for example one thing you could do in this case is you could use some CDN like the outflare who offers which offers this next chain format and then you would get a better result here so if you had an angular application here and you would get this these opportunities then the solution would probably be to use the angular optimized image directive together right it's pretty new isn't it yes it has been introduced with angular 14 but yeah in a beta version and now with angular 15 on the current or on version I think angular 16 is about to release now as well but with angular 15 this was made publicly um and productive production ready and it's really a cool feature to use this uh image directive together with this uh with this providers so you get four providers out of the box which you could use on that to optimize your images even further and to generate for example Source sets of images that you deliver on the image in the right resolution for for the current device so this is really powerful um tool which makes it much easier to optimize images application of course this NG optimized image directive won't work for your website since I think it's not an angular application with other WordPress yeah it was made externally yeah okay so and this is the general process on a high optimize websites or angle applications first I start to audit them then analyze the problem and we can try to optimize it and then measure the Improvement like we said with the next audit awesome awesome yeah so thanks for this overview and thanks for unveiling my little tiny Dirty Secrets here um is this all covered in your performance Workshop yeah sure sure of course in the performance workshop on I think uh we have generally we have these topics so first we start with this Wahoo framework by Jeff Cross from the NX team which I also like to use then I present these audit tools that I showed you on previously on this slide we start with this because the first step is always to measure the performance and then we talk a lot about the initial performance and of course also the runtime performance so runtime performance means not the loading of the website but during the usage of the web the website or the angle application should also be or should also have a good performance and yeah this is uh called Labs because we have some Labs here as well of course like in all um angular Architects Workshops the first one would be a performance audit uh like I just showed you basically and then uh we do a lap on initial low performance but also on we also work on the NG optimized image directive for example um together with these cdns and then we have a special app for engine lazy loading where I showed lazy loading techniques so we can use the lazy loading in angular via the router and there we can either use angular modules or angular Standalone components and of course we can also use lazy loading in a more Dynamic way when we load components on demand for example and both of these Solutions will implement in this lab as a reference for for the workshop participants on usage of course yeah and then another lab will be focused on the change detection angular how can we improve the change detection not run the change detection when it's not needed and of course uh yeah there will be a new uh way to do this in angular 16 with the signals and I I will also um give some preview on that oh wow wow I appreciate this yeah of course and then also some other runtime performance optimization that you can do or should do in angular besides uh the change detection optimization we will also talk about some other stuff um yeah how to use pipes for example um how to memorize things [Music] and finally some further topics about other things we can improve like service workers or using State Management like ngrx um yeah using something like optimistic updates and everything basically everything you can do to improve the the real and also the failed performance of our application that's the scope of the workshop I guess yeah nice nice yeah so thanks for sharing all of this with us and yeah have a nice day see you around see you man Fred thanks see you see ya

Channel: Manfred Steyer

Views: 1,620

Keywords:

Id: MfF0aRAXesE

Length: 17min 49sec (1069 seconds)

Published: Mon Mar 13 2023