Jai's Web blog - Supercharged

Key Takeaways

[Music] hello 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 J's web blog uh he's a UI engineer at flipcart and an X yoan and when I saw this site I thought 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 juns a little bit when it comes out on a desktop and I wonder if it's just doing something a little bit funny and uh what it would look like on a mobile device so what we're going to do is we're going to 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 going to load up and I can do inspect and it brings up Chrome's Dev tools as we know and love so oh 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 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 um this Riz 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 that's well about four five times so I about 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 no let's leave it on why not we're all friends here um ah okay so the straight away 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 going to trigger layout it's going to trigger paint and it's going to 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 want to just stick to composite operations so we can do that with just by using say a transform and in this case a transform with a whole body would actually work really well rather than using margin left so what I'm going to do is I'm going to go back and check out CSS trigger. comom I mean I built it so I'm going to you know promote it but still pretty cool anyway let's have a look we have Dev have tools open still so rather than margin left what do we say we're going to do a transform and let's translate X 15.75 em we have a transition which we're going to change from margin to transform trans form there we go there is a the webkit version here and the mo and O so you could do the vend of prefix version as well if you we're doing something similar to this and let's see now if we switch on show P 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're are doing a transform we should tell Chrome in this casee that we will we'll be changing the transform of the elements in question so that 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 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 a a jump there which may or may not be something depending on how we did but you can see that we've we've hit 60 frames a second we're in a really good spot um instead of animating uh margin left or any of the properties that would trigger layout and paint you 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 you know 30 frames second is all the way up to 60 so take a look at your animations uh see if there's opportunities to switch out those kind of expensive operations for the uh the easier cheaper ones and uh 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 oh