 Hello and welcome to Supercharged, I'm Paul. Ah, that's why we don't do a live action. The show where I take the sites that you've submitted and I go through them and I look for performance issues and I recommend some fixes. That's the show, welcome. Today I have Player FM and Player FM is an interesting one for me because it's run by Mike Marmove who is a small business owner and so he's dealing with the site and the app that he's built and lots of other things besides. And so for him, I suspect that performance is important but it's not necessarily what's on his mind day to day. He's just trying to run his business and do well there. So it was an opportunity to look at something where the constraints are a little bit different at least from the business side. Serious performance work about to take place. Yes, one has goggles, not strictly necessary, but they do make you look fabulous. I have the homepage up on screen here and what I wanted to do was just do a webpage test first and foremost and have a quick look and just see if there's anything quick and easy to fix in there. And I've gone to the filmstrip view which you can get if you check, check, check, check, check. If you check the box that says capture video it'll capture a video and that will give you the filmstrip view which is what we're looking at here. The thing I noticed first of all is that when you sort of look at where the first paint happens which is here it's actually that green line there on the waterfall I believe. You can see that it's actually blocking on a few things. There's the fonts, there's the page CSS which is quite big as well, it's like 100K or so so you'd really feel this on 3G. Now I'm not doing it on 3G today because I figure for most people if they're on mobile they've probably got the app for example so I opted to go with kind of a desktop audience here. So we have the page comes in, then there's the CSS, there's an image, there's the JavaScript, there's the fonts which then need to be transferred. There seem to be some, what's this? There's a Google JavaScript client there and then there's the web fonts and then eventually it goes right now I've got enough to render. So I think the first thing I'd say is it's a critical rendering path job here is to inline some styles. Let's have a look, see if there are any in the page source. Yeah. So I suspect there aren't any because they'd be here if they were and I think that's probably one of the options that we have here is to try and reprioritize the page load to try and get critical rendering path done. But even with that in play there's something quite interesting about this homepage which is the scrolling performance. Let me bring up DevTools and this has recently changed it seems and you can find the old school rendering tools under more tools and then rendering settings and then you can go to enable paint flashing flash. As you scroll you'll see that the whole page goes green, right? And that basically means the whole page is painting and also it's painting, you'll see it's pretty slow to paint. So let's have a look at why. We're in the timeline, we can hit record and we'll do a scroll test in the background. Stop scrolling. And you see these red triangles here in the corner is basically where Chrome's telling you that it's not able to hit 60 frames a second. And it's a little bit forgiving around the 60 frames a second mark. I can't remember the exact numbers. But we are at eight frames a second, 10, seven. So for something that should be scrolling at 60 frames a second we're really struggling. And what we can do is we can have a look at why and you see these tile workers which are basically the parts of Chrome that are doing the painting. They're all very, very clogged up. So we can have a look in, we can hit the W key on the keyboard which is like the zoom in and it says rasterize paint. And that correlates very closely with what we saw in that sort of green paint that we saw earlier. So let me see if we can figure out why. And I'm betting it's the parallax thing that's going on would be my guess because I've seen sites that do similar things. So we'll just inspect that element. Let's see if we can bring that up. Section. Yes, we have background position, sort of 50, blah, blah, blah. So these all look like, yeah, they've been changed by the JavaScript. So you can see that you can watch the numbers change up here. And the problem we have is that this is causing it to paint. What we'll do is we'll stop it doing this and then I will show you how you can actually have a proper look at this in more detail yourself. So what I'll do is I'm just gonna set background position to be, I'm just gonna do, what does he got? Like roughly 50% zero. And I'm gonna put important on it just so that it never changes. And those images are fixed right now. So when they're fixed, when we scroll, what's gonna happen is Chrome's gonna go, well, it's gotta be there still on the page. So it paints it again and again and again and again. So what we can do is we can find presumably a background attachment fixed. Yes, here it is. I'm just gonna toggle that off for a second so that they scroll with the page content. Now, even though these styles are being updated by the page in the JavaScript, they're not gonna change the actual position cause we changed it to important and don't move. So with that all in place, let's now go back over here and we're gonna hit record and we're gonna scroll. And we are pretty much back to 60 frames a second. There are a few things like these image decodes and so on, but the main gist of it is that by just not doing that background position scroll thing, we're in a lot better state. Yes. So a while ago, I wrote this post about parallaxing and in here is the option two, which is what I'd suggest it would be worth doing here for Player of Fam. It's using DOM elements rather than background position, put those images onto their own element and then use a 3D transform or even a 2D transform with something like Will Change or Translate Z hack. That's right, I'll hack if necessary. We're quite pragmatic around these parts and you can here see what it's like if you just use that approach. And what I'll do is I'll do a timeline recording just so that you can see it and scroll up and down and it's pretty much 60 frames a second everywhere and the reason it's 60 frames a second is because we're using transforms and transforms we can do if it's on its own layer, it can be done by the GPU and that's extremely fast. So you can do 60 frames a second parallax effects. I think right now the way that it's being done on this page where it uses background position, that's not gonna be 60 frames a second, but when you can do it with a transform and have it operate on individual elements, that you can do. I can't juggle, I can't, I don't even know why I tried. All right, cool, so that's the homepage done. So what we'll do is we'll actually switch across and we'll look at a details page and as in for one of the series and it just so happens I have exactly the right URL up my sleeve which involves two idiots, me and wakey-jakey Vegas doing an HTTP203 podcast. It's a subtle plug if you just pay the slightest attention. It's almost like I'm saying subscribe, subscribe, subscribe, subscribe, subscribe, subscribe, subscribe. This time we don't have any, I don't think any scroll performance issues particularly basically because the page is fairly static. However, I think what we can do is we can have ourselves another sneaky peek at webpage test. So, let's pop that in there, do that. We'll do it on Chrome, cable, seems good. Capture a video so you can do the video film strip thing. Oh no, yes, we're waiting. What's he going to do next? Yes, that's right, he's going to jettison his career. Here are the results. We've switched up to 10th for a second for the intervals and yet similar kind of story, I think, to the home page. Except this time we look to my eye like we're blocking on the, obviously the page, but then there's some JavaScript and then there's some CSS, bunch of image assets, which is fine, it's kind of expected, but then there's web fonts and then only after the web fonts have arrived do we actually do the initial paint. And yeah, actually you can see if you look into one of these pages you get that kind of blank white screen before the font is actually available. So, that can be quite frustrating for users depending on how long it takes for the font to come down. One option is to have the font essentially not be there, use a system font and then try and get the web font for the next time. So, to lazy load it and then deal with it next time. That can be a bit of a challenge to kind of orchestrate which is hopefully where things like font display will help. But for the time being, it might just be worth switching that this font back out to a system font if it is a web font, I mean it looks like it is. Or just using the web font for titles and leaving the system font for the majority of the content. There's a few things I would look at on both the homepage and the individual podcast pages. And you know, that's great. So, don't forget you can submit your sites. Don't forget to subscribe. You should click that button, that'd be awesome. And I will catch you next time. Haven't been allowed out of this room in three weeks. Put makeup on you before you go on camera, you know. Yeah, they said David and Paul, you've got a shiny head.