 So, we've been talking a bunch about web performance lately and the term first meaningful paint has come up a bunch. I've been avoiding all those discussions just purely from the standpoint of everyone's going to have opinion, they're always going to be different and it doesn't matter because everyone's going to have a different web app that needs different things. You realize your site is going to become the focus of this episode. Because it's so good. Fantastic. So, the Chromium Loading Performance Group had this really nice thread where they walk through what they thought first meaningful paint was and I thought it would be good to summarize that. So, there's sort of three key user moments. People need to keep an eye on when it comes to this stuff. Is it happening? So, time to first paint. Is it useful? So, time to first meaningful paint. And is it usable? So, time to stable layout. Okay. So, let's walk through all of that stuff in the context of your site. So, this is your staging site which you tell me is fast. It's faster. Faster. We're going to try this out on GPRS. So, I've GPRS'ed it up currently in Timeline. And you've got all these transitions and things in your site. So, we've clicked on a link and we've got this loading indicator. It's nice that, ooh, look at that. It's nice and feels good. So, that happens after the first render. First, it's important. You don't just load up my site and you get that. So, this is sort of your first paint in this particular case. When you're doing a navigation, yes. You're doing a navigation. And then you go straight for the content right after that. Yeah. So, all that's happening is when you go from the first page to static render, it'll animate out. And before it starts the animation, it does a query to get the extra content from whatever you're going to go to. So, once it's done that animation out, if the query isn't finished, then it shows up the spinner saying, right, we'll wait until that's done. And once it's done, loads it all up and animates it in. Cool. Now, the isn't happening user moment. So, the time to first paint. Usually, the things that that would include are like your splash screen loading up. If you have a splash screen and a loading indicator. So, your site's got a loading indicator. Basically, any feedback that lets the user know that navigation has started in the page. So, I'm going to debate that somewhat because my site only does the loading indicator when it's going from one transition to the next. The first render, if you control refresh it, it's just a static render. It's important because it's faster, I think. It's important because it makes you look better. No. So, I think everyone should be going for a static render for their first load because otherwise you're sending HTML, you're sending CSS, you're sending JavaScript just to do a load, like just showing a loading spinner on splash screen, which, in some cases, maybe it's unavoidable, but I think generally people should try and avoid it as much as they can. So, the isn't useful moments of time to first meaningful paint is usually focused on paints of your above the fold, like your body text, your headline text, maybe a hero image. In your case, you're using like a static server-side render for this stuff, so it's all coming down really quickly. We're going to take a look at your home page, which does things a little bit differently. So, again, you're server-side rendering your content. So, this is like about five, six hundred milliseconds in. You've got content on the screen, so you've got your first paint. You've got body text here as well. Arguably, this is first meaningful paint, but I guess it's really down to you because you don't have headline text or navigation in place just yet. Yes, the headline text and navigation are using a custom font. I am pretty much waiting for the font display parameter to land because basically the font isn't important in my head, but I want it to be there, so it's one of those things of, well, I can't manage the caching or anything like that. I just basically want to say, if it's cached in there, use it if not, then don't bother, but I can't yet. Okay, I mean, in this case, just to keep things super, super clear, we could say, okay, well, this is time to first paint, and then once you've actually got your headlines and everything else in, that's sort of meaningful. In this case, because, again, you've got navigation and stuff in place, the next things happening are sort of your CSS, I guess, asynchronously being loaded in in your case. Yes, so I've got the critical pass CSS, so the first thing we'll have like inline CSS, so it stops the layout from popping and everything else, but then I load all the extra stuff. So background images that aren't important or little bits of UI that are nice to have, but not critical. Cool, so at this point, I imagine a user could probably navigate around your site. So you've got stable layout and everything at that point. Beyond those key user moments, and again, once you've got stable layout, the person should be able to interact with the app or your navigation. I think it was Paul Irish that actually enumerated some of these. So when your page feels ready to interact with, it could be the case that the user agent is completed with its loading indicator, you've got your primary text and images painted, all of your layout has stabilized. Once all that stuff is done, you're in a fairly good state. You could consider that there's stuff after that that applies to RAIL, the performance model that we've been talking about in the past. Is it delightful? Is there anything else that needs to load on the page in order to enrich that user experience? But I think looking at normal speeds or cable speeds, your site's actually doing pretty well. The way that I treat a lot of this stuff is if all you receive was the HTML and nothing else, the page should be stable, it should be usable and it should paint everything that's needed to just be usable. The way that I see all of this is if you treat that as just like the very first thing that you get is HTML and it all works, everything plus that is just useful. So yeah, that's how I try and treat it as much as I can because I feel like one way or another that's the fastest I'm going to get. So what we recommend people to check out the first meaningful paint times on, DevTools, NetworkPanel, Timeline. So WebPageTest is another really great thing to check it out on. Because you get the film strip view. The film strip view, which is nice and shows you the breakdown. Really good on sites that've got just a lot of activity going on. So that's worth checking out. Yeah, it's about it for first meaningful paints. Yeah, just see what you're doing.