Angular and Core Web Vitals | Minko Gechev & Houssein | ng-conf 2021

[Music] hi everyone my name is hussein gerday and i work on the chrome team at google focusing on open source frameworks and tooling in the second half of this talk minko will be diving into some core features that chrome and angular collaborated on to improve end user performance for every angular application before we do that however i quickly wanted to talk about why chrome is even getting involved in the framework space to begin with javascript frameworks like angular have played a significant role enabling developers to build complex and interactive web experiences the chrome and web platform teams here at google care about user experience and we understand how hard it can be to continue to add features to a site while ensuring performance continues to meet an acceptable threshold the primary goal of our efforts is to enable success at scale by bringing solutions to the right layers of popular tech stacks and client-side frameworks like angular react next js and vue or next.js make up a very important layer by bridging the gap between browsers and frameworks we can land useful optimizations that solve problems developers wouldn't have to worry about themselves in addition this can all act as a feedback loop to improve the web platform itself by following this model we can take steps towards a world where high quality experiences become a side effect of building for the web to better understand how to quantify performance we could take a look at coord vitals or the set of metrics that let anyone measure the user experience of their site and identify opportunities to improve these are currently largest contentful paint an indicator of speed that measures how long it is taken for the largest elements on a page to fully load cumulative layout shift which measures visual stability by calculating the number of layout shifts that occur during a session and first input delay which provides an indicator of responsiveness and interactivity by measuring how long it takes a page to respond after the first user interaction although the set of metrics can evolve over time we plan on continuing to work with frameworks like angular to ensure that the default experience is a site that meets all the core vital thresholds and does not compromise performance when new features are added now the rest of this talk will be focusing on our collaboration with angular and i would like to cover a specific example of how working with the angular team has helped improve the design of core vitals namely largest contentable paint as a quick recap let's cover how server side rendering works in a traditional purely server render architecture incoming requests are handled entirely on the server and the requested content is rendered and returned as an html document angular provides an option to server render initial markup that will automatically fetch and render the required javascript to bootstrap the application instead of attaching event listeners to the dom angular takes the approach of rebuilding the entire dom tree once the required javascript has loaded so although there's no visible change to the ui elements on the page are actually removed and recreated this approach works great but the one issue with the previous implementation of lcp is that it did not take into account elements removed from the dom remember lcp looks for the largest element in the viewport so for the most part this makes sense imagine sites that load a splash screen before the main content we wouldn't want that to be the lcp candidate on the page unfortunately however the way angular hydrates content after server rendering means that the entire dom including the lcp elements will be removed and not considered until it gets rebuilt now this is a problem after the angular team and community flagged the issue with how lcp is measured in server rendered applications the chrome speed metrics team prioritizes development of an improved version of the metric that does take into account removed elements once the required changes were made and testing was done the new version of the metric was switched from experimental to stable and was updated in both the web performance api and internally within google this is all done before page experience including core vitals would be included in google search ranking now i wanted to highlight all of this as an example of how our collaboration with angular not only helped optimize framework but also pushed forward improvements to the rest of the ecosystem now for the rest of his talk minko will be explaining some specific optimizations to angular that have improved core vital scores christine thank you very much hello everyone my name is miku getchev i'm working on angular at google and today in this part of the presentation i would want to share with you a couple of optimizations that we have been working on in order to improve the core web vital metrics for all the angular applications out there as hussein mentioned anger has been closely working with the chrome team on the implementation of core web virals in particular with largest contentful paint we have been also collaborating on improving the core web vitals course for all the angular applications the chrome web sdk team identified a few opportunities for improvement across the entire javascript ecosystem and helped with enabling them by default for different frameworks as part of this talk i would want to share a few of them in particular we're going to cover google font and critical css inlining and the image component that is optimized with core web vitals in mind let us first look into font inlining a common scenario is adding angular material to your project the angular material component for icons uses the material icons font which ends up being part of your html let us run ng build prot and have a look at where index html references the font notice we have a link tag with href to google fonts that includes the material icons in the application if we open that font file we're going to find the following css which defines the font face via a reference to a waft2 file when the browser starts loading the application it will discover the link tag and load the font styles from there it needs to download the font phase definition these two requests needs to be sequential meaning we have to perform two round trips to the cdn that is hosting our resources finally when we fetch all these assets we'll be able to render the application let us see how index html will look like when we have fountain lining enabled notice we have styles directly inlined inside the head of the html file at build time the fountain lining will fetch the phone styles and inline them in index html this way at lowest time the browser will have to perform just a single request to download the font face given that loading styles is a blocking operation inlining the stylesheet at build time will help us load phone faster at runtime and improve the first and the largest contentful paint on the page at the same time our app could have a lot of styles which could delay both first contentful paint and largest contentful paint if you want to naively just load all the styles and synchronously for example by setting the media none and handling the unload event we can worsen the user experience the browser will first render the unstyled content after that load the styles and apply them such behavior will cause regression and user experience and cumulatively outshift the chrome team developed a tool called critters which at build time can match styles selectors to the dom and figure out the critical css in a performant way for example right here the first tile is applied to the bottom but the second style is unused and critters will be able to figure this out at build time angular cli uses critters under the hood in order to find the critical styles and inline them in the application hat the rest of the styles we just load lazy this optimizations improve both first contentful and largest contentful paints it is also applicable across the board which means that we can enable it for client-side rendered applications for application shell for pre-rendering and server-side rendering as well for all but server-side rendering it happens at build time which means you have zero runtime cost because server-side rendering builds the page markup on request we can discover the critical css and inline it at render time font inlining is currently enabled by default for everyone and starting in version 12 we're also going to enable critical css inlining by default all you need to do in order to take advantage of these two optimizations is run ng update once version 12 is out and until then just make sure that you give them a try and let us know what you think the last optimization i would want to talk about is a joint effort with the ng zoro team together with yadung and leon we've been collaborating on an image component which follows best practices to improve largest contentful paint and cumulative layout shift the image component has a lot of useful features including functionality for providing a fallback image it allows you to progressively load an image specify a layout and so on from performance perspective it can also help you to automatically generate the src set for predefined set of cdn providers allowing you to implement adapters for custom providers it also supports pre-loading of images in server-side rendered environments and also it has strict dimensions support in order to reduce commodity outshift well these are just a couple of the opportunities that we have been exploring in the future we are going to look into quite a few others for example conformance via linting we'll be looking into additional phone provider inlining we will be exploring core web vital reporting and so much more this is everything we have for you today thank you very much for joining our talk and happy cutting

Channel: ng-conf

Views: 1,253

Rating: 4.9024391 out of 5

Keywords: angular, angularjs, javascript, ngconf, ng-conf, programming, angular conference, ng conference, angular javascript, angular tutorial, Javascript Tutorial, Programming Tutorial, Computer Programming, Google Angular, Google Programming

Id: g04Lry655_g

Length: 11min 34sec (694 seconds)

Published: Wed Sep 22 2021