Core Web Vitals

[00:00:00]
>> Last, we have rendering patterns. Cuz yeah, we can render content in a lot of different ways nowadays and knowing how and where to fetch your data is key to your applications performance. Now maybe you're using a framework or some other library or maybe just React standalone, but they often all use different patterns like client-site rendering, static rendering, maybe even incremental static regeneration, service site rendering and so on.

[00:00:30]
Now, I'm not here to talk about which pattern is the best which is the worst. They all have trade-offs, best use cases and so on. Now before we start talking about the different rendering patterns, something to keep in mind is the Web Vitals. And this is a set of useful measurements that Chrome provides and also uses in their search index to measure how well your website performs and how your users experience it.

[00:00:54]
Now, a subset of that is called your Core Web Vitals. So here for example we have the Time to First Byte. So that's how long it takes when a user requests a website for your server to respond with the data. So before the browser gets the first bytes in order to first execute all that stuff.

[00:01:09]
Then we have the First Contentful Paint. So whenever your user actually sees something useful to the screen for the first time. Then we also have the Largest Contentful Paint. So the largest component has loaded maybe a big image or any large component. And then also Time to Interactive which is the time it takes before user can actually click on your components and it actually does something.

[00:01:31]
Cumulative Layout Shift, like we saw before a layout shift is just annoying for your users. We don't want to load a website and then stuff randomly renders in. You've probably experienced, it is a very frustrating experience. And then there's also First Input Delay which is the time for when the user interacts with the page and when the event handlers are actually able to run.

[00:01:51]
Now, we will be covering a couple of terms. Compiling like we saw before, the execution time, hydration which is attaching event and this will be more clear later on, but it's attaching the handlers to those static DOM nodes when they're just HTML and they're not interactive yet. Idle, the browser's state when it's not doing anything, browser's idle it will prefetch certain resources.

[00:02:16]
Main thread, parsing, processing, this will make sense later.