 I say, it's time for Supercharged. My name is Paul, and I'm here to help. You know? Yes. Welcome to Supercharged. I'm Paul. This is the show where you submit your sites. I go through them, and I try and find the performance problems and recommend some fixes. Now, today, I've got The Guardian. I have spoken with them before, and I know they actually do a really good job with things like inlining and so on. But we're going to run it through web page test anyway. First view only. I'm going to run on mobile 3G with Nexus 5 this time and Chrome by watching Pain Dry. Welcome to Supercharged. I say this test is taking rather a long time. Making people wait their turn. Do you know who I am? You'll prioritize me if you know what's good for you. So we've got the web page test result, which looks good. And I'll tell you what we'll do. We'll dive into the filmstrip view because that's always good fun. I noticed that the speed index was about 6,700. And so I would expect something for the gold standard to be somewhere around the 3,000 mark. I mean, give or take. Now, as I scroll to the left, we're sort of blank white screen for about 4 and 1 half seconds. And then at five seconds, we're actually starting to see page content. Now, because if we look at the bottom, we can see that there's still the HTML, and that's coming in. And as we get to the end of that, we actually start to see render. So that means they are inlining styles because the only way we could get to the end of the HTML and start rendering is if there's some inline style. So that's a really good thing. Print CSS. I want a phone. I don't expect to print. It's a minor thing. It is extremely minor because it's only 2.9K. But it is a connection that we're making. And I wonder whether that needs to be made. But that's throwaway. I won't even worry about it unless you're worried about it. If you're worried about it, do something. No, I'm not saying you should worry. I'm not worried. That HTML does look quite large. It's 83K. 83K is even, I mean, there'll be GZipped as well. So it's a fair amount to be sending down as the initial burst of content. I wonder whether it would be better, even though they're inline styles, I wonder whether it would be better to actually send down less HTML and then use Ajax to pull things in. That might just boost things a tiny amount. Let's actually have a look at the HTML itself. Hey, they're hiring too. Bit of an advert in there. Busted that wide open for you. This looks like our inline styles here. OK, let's grab some of that. Because I am curious as to how much of inline styling we are seeing. I'm going to try that again in English. I'm wondering how much inline styles we're actually seeing. So let me grab all this. It keeps on going. Going to copy that. What I'm going to do is I'm going to fire up Sublime. And I'm going to paste it in. Let's save that on our desktop as like file.css. OK, so we've got the terminal open. So what we'll do is we will go to my desktop, where I saved that file, and we'll do ls-lah for file.css. And it is 179k of inline styles. But that's not fair, because what we should do is we should gzip file.css, just as I can. This is all finger in the air kind of stuff. Well, let's see what we get. So ls-lah, and then we'll just tab that up, and we'll go. OK, so it's 22k when it's gzip. So that's still quite small. But if you want to get something inside the initial response from a server, it's going to be in the first, I think, 14k or so to account for TCP slow start and all that good stuff. So this is probably quite a large amount of inline styles. But we have one other trick up our sleeves here, which I will show you. Now the credit for this goes to Matt Gaunt, one of my colleagues. He came up with this, and it's based off the filament groups load CSS library. What I've got here is a book marklet, which, when I click it, is going to switch off any styles that have been loaded in remotely and just leave the inline styles. What it does is it goes through the style sheets, and it switches off the remote styles by just giving them a media type that is rubbish. And it goes, well, these don't apply anymore. A ridge. Let's put it on the ridge. So this is what it looks like when there are no remote styles, just the inline styles applied. Sunny, in the United Kingdom, what is this? Global warming, you see, climate change. And I mean, unless they're doing work to undo these styles, it feels like the inline styles that have been applied don't set the layout up. Now, it could be that there's some other work that's gone on with the JavaScript to change things around. But as a first pass, I'll be looking at this going, hmm, when I switch off the remote styles, I want the inline styles to be color blocks and layout and stuff so that we stop things moving around, but mainly so that we can get something up on screen. The whole point of the inline CSS is hopefully to just kind of bootstrap up that initial viewport and get us going. So much for the page load then, which is actually really looking good. I think there are some tweaks that they could potentially make to crush down the inline styles and not put so much in there and put what is really important in there, not just what seems important. What we'll do next time is we'll actually dive into the performance characteristics of things like their scrolling and so on. So stick around for that and I'll see you next time. I'm the only one on camera, the only one they let on camera these days. Take two, or as I like to call it, the professional cut. I think there's a point on the top of my head. Paul Lewis, Man Boy.