 This is Supercharged. It's the show where I take the sites that you've submitted and I go through them and I look for performance issues. Bollocks. Voice of an angel. Face of a pig. Last time we looked at the Guardian's page load performance. This time we're going to do pretty similar. It's going to be the Guardian because we're going to ring it for all its worth. Why wouldn't you? A little bit of something to clarify from last time. I showed my book Marklet which is really cool to toggle the styles on and off and switch off the remote styles and just leave the inline styles that were shipped with the page. There was a bug in the book Marklet which is why it was causing some of that page content to go a bit crazy. Who writes code with bugs? Not me. We've updated the source code so if you want it you can grab it yourself. What I'm going to do is I'm going to look this time at the scrolling performance and I'm going to do that on mobile because if you've got performance issues on a mobile device you're really going to feel it. You're really going to notice and so it's a really good opportunity to just step in and go well if I can fix it on mobile it's going to be amazing and blazing fast on desktop so it's a really good opportunity. So I have my trusty Nexus device here and what I'm going to do is I'm going to unlock it first of all for it is locked. I wear a lot of hats in this show. In my job I wear a lot of hats. This one is Jazz Hat. I'm going to go across to Chrome Inspect and you can see here that it's showing me that Chrome Dev is available which is good and there's a new tab. Ready to rumble. Ready to rumble. Grab that. Let's go open tab with URL and click on that and open it and that means we can also inspect it which brings up Chrome's DevTools. Urban ball. I'm street. I can be down with the kids you see. I'm cool like you and I am on the timeline which is my personal favorite place apart from well maybe the elements or the console. I just like them also much. It's like choosing a favorite child. I can't do it. I'm going to do scrolling performance because scrolling is an animation and if there's a problem with scrolling it's going to really kind of be the most obvious thing to users of the site and you know this is a content site so scrolling should be 60 frames a second and that kind of thing. So combo hat. Urban Jazz and I will record and I'm going to scroll like that and every time the frame rate drops during that scroll there's a bright yellow block which is the JavaScript and so you know it's good to know that it's JavaScript but I think we want a little bit more detail so what I'll do is I'll switch on the JavaScript profiler. Okay so we have the JavaScript profiler switched on. I'm going to hit record. I'm just going to do a bit of a scroll. Most of the time I rely on editing to sort the wheat from the chaff. Wheat being the one thing in every hundred that I say that's worth listening to most of the time it's like I don't like mung beans. So timeline timeline the line of time when you look at timelines it's often really good to try and break down the work and one of the things that the JavaScript profiler will do is it's going to color code the results based on the file so if you see the same color you know it's come from the same file and that's actually extremely useful when you're starting to kind of divide and say well where's the work coming from where's it you know what's responsible for the work. So you can see I think most of these are lazy load, load slot, there's a message JS I'm not sure what that is but my hunch is that they're trying to show a message but it is it's going through Raven.js which is an error capture so I guess that's just acting as a bit of a gateway. Pub ads in pull so there's something to do with ads here move along to the next one another animation frame more ads evaluate script there's an ads there let's have a look a ready state change so there's something going on where there's some presumably some Ajax in and we get some parse HTML here so that implies that there's something that's being lazy loaded in but that's causing a massive recalc style which is pretty pretty intense actually like 117 milliseconds and again this is all locking up the the main thread I actually went through the timeline and I think this is a really good exercise for everyone to do is go through a timeline recording and start marking out exactly what's going on so in this case I've got there's an outbrain some visitor tracking there's some some ad stuff the the Guardian itself is doing a bit of setup over multiple request animation frames there's a whole block here that's just garbage collection collecting the garbage taking the trash out I say trash in England it's rubbish one of the interesting ones is this recalc style you can see that it's recalculating the style then triggering a layer forcing a recalc style triggering a layout and this is a really bad state for us to be in however it is third party code and so there's only so much that you can do I think the thing to remember is that when you're running third party code it's running alongside your code and everybody's got contention for the main thread that one thread that everybody's on and so it's a bit like that time I had 10 people in a five person tent that was just awkward so there we go I think the the majority issues that they're facing are to do with scrolling performance and the fact that this code is not running at a time that's convenient for the browser or for the user really you know web performance has never just been about page load it's also about things like animations and about responding to user taps and things like that so I take a look at that and see if there's a way to just defer that a little bit more to when the user isn't interacting don't forget you can subscribe you should do that do it well done well done you clicked it well done yay and uh you can submit your sites also a good thing to do and I'll take a look at them and I will catch you next time yes come on throw a dart they said it'll be easy they said you ready miles off next time next time