 Another day another journey. I know we did right how is how's your aim? Well Not great in the middle of the night, but I sometimes just sit down. No, I say I meant I meant your snooker your pool or in this case your billiards. Oh We're going to a billiard hall that we are sir So I Made a thing that's unusual for you. I know like to in this many months or something. Yeah Yeah, it's a new thing. I But it's really it's a little yes, it is a web app. It's a website. What's the difference? Shut up. We're not doing websites. I would say it's an app Flip the coin it's it's an app. No, it's not. It's a site It's it's it's a Wikipedia article viewer, okay, which I realize is what Wikipedia does already Yes, but this was more of an exercise in looking at like performance like page load time performance But you think you can beat Wikipedia at a server-side render. Yeah, I did Well, so this is a thing I so I was hosting on GitHub. So I was doing a client-side render I know all you said it seemed like a nice simple way to get into it And I so yeah, I was serving it just you know JavaScript down the wire Then JavaScript is going getting the content putting on page and I was seeing you looking at my official figures 2.6 seconds for first render, okay And 4.7 seconds for content which even at that point was faster than Wikipedia's actual official site But you know, I knew it could be better than that Okay, what was in that first render first render was just like the top toolbar that said like Wikipedia and a spin, okay But you but from a user's point of view, they've got something they know they're on the way Okay, and then I think it was 4.7 seconds to let the actual Wikipedia article came down So you've actually got see a good couple of seconds there where you're spinning up Way you like your app doesn't seem to be No, it's idle essentially. Yeah, I know you're pulling your side face, but don't worry I'm pulling a mulling face. I'm mulling over. Okay. Okay. Well, you know pulling your mulling face I will actually I can tell you what I did There's a happy better than my other faith is you okay? You're having a stroke So yeah, I Make the jet made the JavaScript async Okay, and put some markup on the page for that first render. Yes, and I inline the CSS for that first render Good and all normal. Well, you say normal when I first heard that rule is like I'll take some of your CSS out and put it in the head I was that oh, that's it. That's a big ask for them. Oh, whoa, big what? It's a request pal. Yeah, I know. Oh my god I hate you become a person you become a person. Yeah, next up You'd be asking to reason about things or using modulo to reason about I hate that one because it is just developers not wanting to say They don't understand. I should do like modulo, but yeah, so I do agree that it's too hard to async load CSS This is something that we have a problem with on the platform, right? I tried it. It's rubbish. Yeah We've got loads CSS from the filament group, but it's it's a bit it's quite it's more script than you shouldn't it should Be async on the link element should be declarative. Yeah, but more more over I think what Firefox and I do at the moment is actually really good. It's a bit of non-standard behavior I really like it put the link element on the page in the body just before the content that needs it and it will block the Rendering wait for it. It'll block the rendering of the subsequent content until that CSS loads It's not blocking all page rendering. Okay, it's just the elements after don't go into the render tree We should do that. Yes, we should take that one. We should also have async as well. Okay, so right So we had a parallelizable thing last time this that of where you had the JavaScript that went off to get the Wikipedia page And I'm saying that's bonkers and so yes, I came to the same conclusion. I thought this needs server rendering wise man Yep. Thank you. Let's let's do it. Cheers. Cheers to server rendering. Well, this is the nerdiest chair that ever went up So I'm like looking at my calculations once I introduced server rendering Things got slower Right my I was a bit annoying my my content render actually sort of came down a little bit not much, but my first render Why it was slower because? Connection goes off to my server is my server goes off to Wikipedia gets the data comes back The page sends it on you're looking at a white screen for longer now because you've got the bottleneck of your third party service You know by taking that just the the JavaScript CSS the basic page shell yeah down to naught point one seconds Like oh as good as instant. Yeah for that first render because it's all offline and But here's an interesting that happened is my content render went because I'm now back to doing client-side rendering Yep content renders gone up again Because it even though it's coming from the cache There was two problems as one that it was the request to wiki pedia is a little bit delayed because it has to pass The JavaScript to wiki pedia to wiki pedia It's delayed. I like that. It's always like here. I didn't do that on purpose really But yeah, so I cut that delay by as soon as the request went to the service worker had the service worker go off and get Fetched stuff for wiki. Oh, okay So how do you how do you then because you still want to send your response back with the app shell stuff? Yep, what you're talking about there is chunked encoding. Ah, okay So this is that the art of being able to see being able to quickly send data back Like you're without knowing your whole page content So so I was able to send back like the header and the first render stuff essentially So now the browser knows about the extra CSS and JavaScript needs meanwhile or like at the first possible opportunity My server's gone off to wiki pedia and it's okay gathering that and then as it arrives it just streams it through and and and that Slash the rendering time. We got down to well, so we were at 1.4 seconds for first render and I get the official figures up so that That would it was down to 2.4 seconds for the contents and that's like the two second saving compared to JavaScript That's good. Yeah. Yeah, it's pretty huge and can't really get any better than that. Can you oh, you can sir By using a little technology you might not have heard of before Service worker But yeah, as soon as you take the content the page shall offline that's that you can get that first rendering like Not point one seconds like the measurement came out, but it's instant really. Yeah But it was I took 9k of the content down the wire And once I had that wrote it to the page and then wrote again once I had the rest And it was a total hack to do that And this is why my next wish for the internet for the web web standard is streams Because I want to be able to just take some content that we're downloading pipe it into an element and it appears Is it and I think once we have that that kind of rendering as it goes along I think that's when we can see client-side rendering apps become Competitive with server a little drink to that cheers