Video details

Angular: Optimizing Apps with Resource Inlining

Angular
02.09.2021
English

Mark Thompson

Hi friends! In this video Angular team member Mark Thompson will be taking a look at ways to optimize your applications with resource inlining. Enjoy!
Learn more about the Font Inlining and Critical CSS Inlining → https://angular.io/guide/workspace-config#styles-optimization-options
Continue the conversation online! Angular Twitter → https://twitter.com/angular Mark's Twitter → https://twitter.com/marktechson

Transcript

Are you using Google fonts and want to optimize your performance? Well, stick around, because this video is for you. Hey, friends, I'm Mark from the English team at Google and welcome to India, update the series where we take a look at the features from the latest angular releases. And this episode, we are coming in clean with optimization tips for your Angular apps. If you're using Google in your applications and are on Angular Version 11, you can enjoy inline fonts. Mark, how will this benefit me? Hey, I am so glad that you asked when your page is being rendered, the browser has to follow the link tag for the font to get the stylesheet and then it has to make a request for the font itself. But this two step process delays the first content for paint, we can do better during bill time, the Google font length in your apps, and if that ASML will be in line. And as a result, the browser will only need to make a request for the font file itself. This means less stuff before you get to that first full page of your application. Now we can see this in action. Here's our request without font enlightening, we can see two requests in the network tab in chrome dev tools. Let's enable Font Enlargening and see the difference. Looking at the DOM, we can see the stylesheet for the font is now in line and over in the network tab, there's only one request for the font and we've sped up the time for the first content for paint. OK, that was great. But there's more to the story. There's another way to optimize your performance. That's why inline in critical styles and build time, we pass the costs and try to match the selectors against a printed page. If we find a match, we assume that the styles associated with that selector are part of the critical path and we inline them. I know you want to see this in action too, so let's do it. Here's our page. Render without any critical styles in line because the option is disabled. And take note that our style sheet is render blocking. Let's enable critical styles and check out the don here. We can see the critical styles are in line and as an added bonus, you can see that our script has been updated to load asynchronously very crisp. So how do you get these optimizations? Well, that's built with the latest version of Angular already have critical, enlightening, enabled by default. But you will need to enable in lining yourself. Here's how I head over to the optimization section of your angular JSON file and add the font property, then set the inline property to true and for styles, set the styles property and set in line critical to true. And there we have it friends. Go ahead and optimize your ass by and of your Google fonts and critical styles and thank me later. In the last video, you folks left a lot of feedback on what you wanted to see, keep it coming, comment down below and let us know which topics we should cover. Hey, be awesome and give us they like and subscribe if you haven't already. And until the next time friends go build great apps.