[THEME 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 Jai’s Weblog. He’s a UI engineer at
FlipKart and an ex-Yahooian. And when I saw this
site, I thought, hmmm, 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 jenks 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 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 could 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 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 see, yeah, goodness. OK. 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? That’s like four or 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, let’s leave it on. Why not? We’re all friends here. OK. So, 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. OK. 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 a two
composite operations. So we can do that by
using, say, a transform. And in this case, a
transform in the 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, check out csstriggers.com. I mean, I built it, so
I’m going to promote it. But it’s still
pretty cool anyway. Let’s have a look. We have dev tools open still. So rather than margin
left, what did we say? We’re going to do a transform. And let’s translate
X, 15.75 VMs, we have a transition,
which we’re going to change from
margin to transform. Transform. There we go. There is a Webkit version
here, [INAUDIBLE], so you could do the
[INAUDIBLE] prefix version as well
if you were doing something similar to this. And let’s see now, if we switch
on show paint rectangles. So with that in
place, does that work? Oh. It’s still painting. What we need to
do, what we should do is since we’re
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 to 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, 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 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 base 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.