 So last time, we wrote our index PHP and our singular PHP to render our blog posts listings, as well as our individual blog posts. The next step is to implement the design that I had in mind. I'm not going to talk about that too much. You're welcome to go into the repository and take a look at the CSS files. There shouldn't be any surprises here. It's just CSS. It's mostly just Flexbox and some colors. But what I do want to talk about is what happens when I put our phone on a 3G network and see how loading is performing. 3G network basically means low bandwidth, high round time trips, and occasional packet loss. So let's take a look at how the blog behaves. So I have removed the blog entirely from this phone, cleared all the caches. It's as if this phone has never visited the blog. So if I now reload the blog, you can see that pretty much in one, two seconds, the blog is there. The content is there. It's still pretty rudimentary, like our styles are missing, but the user could start reading. After about 10 seconds, you can see the embellishments are there, the header logo has completed, and the blog seems like it's done loading over a 3G network. The interesting thing here is that in the background, the loading is actually continuing right now and will continue to do so for the next 40 or 50 seconds. But that doesn't matter because for the user, it seems complete. They're done loading and they can just start interacting with the page. And that's exactly what I want to talk about this time. I want to talk about how you can structure your CSS so it loads efficiently while still giving you all the creative flexibility that you need. I've adopted a fairly simple technique here. And so for every component that I have on the page and a component is something like a header or a footer or an article, I have two CSS files. And one of them is full of critical styles and the other file is what I call the lazy styles. To explain this a bit more, let's look at an example. As an example, let's look at the styles for an article. If you look at the critical styles, you will find only things that are concerned about layout and coloring and visual space allocation. Nothing about box shadows or images or fonts. All these embellishments are in the lazy styles. The reason I want to allocate the space for the element as soon as possible is that when the lazy styles eventually come in, I don't want to start things jumping around on the screen. We've all seen it on some website where you start reading and suddenly things shift to the bottom and that's just annoying. So I definitely didn't want that to happen. So all my critical styles make sure that the layout is there and that an element allocates as much space as it will need throughout this lifetime. But here's the twist. The critical styles are actually in line. So if we take a look at the header PHP, we can see that I use include to basically read the file and put it into the HTML file itself. That might not be very WordPress-y, so I apologize if any WordPress developer is offended by this approach, but it works, so it's kind of good enough, I guess. But the interesting thing is that even if the user only gets index PHP and all the other requests for lazy styles and whatnot take forever to arrive, the page is still useful to the user. They can start reading my blog post and that's exactly what I want. We can actually emulate this with DevTools by using request blocking. So I will block all requests for JavaScript and for styles, so that means only the index PHP will come through and if I do this and reload the page, you can see that immediately the content is there and nothing else happens. And I mean, sure, it's kind of a degraded experience. It's not as stylish as I would like it to be, but the functionality of the blog of reading my content still works. I can actually still even click links. There's not gonna be a nice transition, but it still works and that's what I think is really important to take away here. So this is my core technique to get on screen as fast as possible. Inline everything that you need for a first contentful page and lazy load everything else. If you do this and put everything that you need to render in your first response for your index HTML, whatever your landing page is, you will smash that time to first contentful page metric. Let's talk about the lazy styles. If you look a bit further down in my header PHP, you can see that I put all the lazy styles in a NoScript tag. This is a little trick I've been using for a while now and I wrote a piece of JavaScript that waits until the page is fully loaded and then looks for NoScript tags that have the lazy load class on them. And then it rips out all the children and appends them to the head, basically at that point, triggering the load of the lazy styles. The interesting bit here is that if the user has, for some reason, JavaScript disabled or it's not working, the NoScript tag will just enable these children by itself because that's the purpose of the NoScript tag and it will load these styles right away. Loading styles by default is a blocking process. So that means if you don't have JavaScript enabled, you will still get the full experience in terms of style, but it won't load as efficiently. But if you have JavaScript enabled, my own loading pipeline will kick in and will load the page much more efficiently, which is basically the trade-off that I'm choosing here. It's probably worth noting that instead of inlining my critical styles, I could have also used HTTP to push, to push these resources down to the client. But after reading Jake's article that I linked to in the description, I was kind of worried that it's way too hard to get push rights and worry about browser compliance and pushing things that I don't really need because they're already in the cache. So I was choosing to make a trade-off between compatibility and caching efficiency. Speaking of, that's exactly what we're gonna talk about in the next episode, caching headers. Something that's very important to me, it allows you to conserve a lot of bandwidth by only downloading things that are not already in the cache and even something that can be applied to dynamic content.