 and welcome to Supercharged. I am Paul. This is the show where I take the websites that you've submitted and I go through them and I look for performance issues and I try and figure out what they are and how we can do a better job. So, today I have Jai's web blog. He's a UI engineer at Flipkart and an ex-Yahooian. And when I saw this site, I thought, hmm, there's an interesting thing here. Not the page load, which we normally do, but actually this side menu caught my attention because I thought that janks a little bit when it comes out on a desktop. And I wonder if it's just doing something a little bit funny and what it would look like on a mobile device. So, what we're gonna do is we're gonna hit Chrome Inspect, like so. I have my Nexus device, my Nexus 5 here plugged in. And what I can do is I can go and grab this URL and I can pop it in here and say open. And it opens a new tab on here, which is magical and wonderful. And it's gonna load up. And I can do Inspect and it brings up Chrome's DevTools as we know and love. What's so good? And that means that I can inspect what's going on on the phone in just the same way as I would on desktop, except that I also get this additional feature, which actually shows me what's on the device. So, if I click on this, it actually happens on the phone or I can click on here and it happens on the screen. It's magical, I love that. Even looking at what's on the phone, I can tell you that this animation isn't running at 60 frames a second. Let's give ourselves a baseline. We're in the timeline. So, what we'll do is we'll hit the record button, like so, and I will hit that button over there on the phone and you can see, yeah, goodness. Okay, so it's just about 60 frames a second sometimes and towards the end there, it's shooting off the top. This rasterize is, what's that, 72 milliseconds? I'm holding shift here as I click drag and that gives me a time range. So, 72 milliseconds for an animation like this, we want to be 16. So, what's that? Well, about four, five times. So, I don't know, 10, 12 frames a second, roughly. Let's figure out why we're doing an animation that's so slow. Right, the way to do this, let's switch off the device bit. Actually, I'll just leave it on, why not? We're all friends here. Ah, okay, so the straight way, actually, on the body there is a class of nav open, which feels like it's something that's relevant to our interests. Yes, okay, margin left. Now, I know from other work that if you do something like margin left, there we go, margin left, changing margin left is gonna trigger layout. It's gonna trigger paint and it's gonna trigger composite. All three tasks are quite expensive for us to do during an animation. What we want to do is if we're animating, we wanna just stick to composite operations. So, we can do that with just by using, say, a transform. And in this case, a transform of the whole body would actually work really well rather than using margin left. So, what I'm gonna do is I'm gonna go back and check out csstriggers.com. I mean, I built it, so I'm gonna, you know, promote it, but it's still pretty cool anyway. Let's have a look. There are tools open, still. So, rather than margin left, what do we say? We're gonna do a transform and let's translate x15.75ems. We have a transition, which we're gonna change from margin to transform. Transform, there we go. There is a webkit version here and the Moz and O. So, you could do the vendor prefix version as well if you were doing something similar to this. And let's see now. If we switch on show paper rectangles. So, with that in place, does that work? Oh, it's still painting. Ah, what we need to do, what we should do is since we are doing a transform, we should tell Chrome in this case that we will be changing the transform of the elements in question. So, there's a green flash there, which tells us that it's just promoted something to its own layer, I guess. So now, if we actually leave the show paint rectangles on, yeah, there's a green flash where the button was, which makes sense because it's probably got a selected state. And now, let's go back to timeline. Let's record again. There we go. We've gone from 10, 12 frames a second in some places to 60, there's a little bit of a jump there which may or may not be something depending on how we did. But you can see that we've hit 60 frames a second. We're in a really good spot. Instead of animating margin left or any of the properties that would trigger layout and paint, we just want to stick to things like transform and opacity where we can for animations. And certainly in this case, we definitely can. And by doing that, we've gone from 30 frames a second-ish all the way up to 60. So take a look at your animations, see if there's opportunities to switch out those kind of expensive operations for the easier, cheaper ones. And hopefully you'll get a good performance boost there too. Don't forget to subscribe and I'll catch you next time. Some mornings I get out of bed and I'm just Paul. Some days I am Paul, master of the performance, king of the timeline.