Mastering Chrome Developer Tools Performance Audit: frontendmasters.com

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Jon Kuperman: Actually, let's let's do group guided, if we can use words, where should we start?
>> Speaker 2: A timeline.
>> Speaker 3: Opening dev tools.
>> Jon Kuperman: Opening dev tools, I like that. Yeah, we could do the timeline, I am always torn between timeline and audit, and I audit because it's easier.

[00:00:18] My brain doesn't like working my way into this mode. It's all refreshed and do on audit of frontendmasters.com. Okay, so you've got eight scripts coming down, some of these I don't think you'll be able to combine is wistia-
>> Speaker 4: Wistia's our video host.
>> Jon Kuperman: Okay, so that you're probably you do what you have to do, you might be able to make those script tags a sync or deferred, maybe.

[00:00:46]
>> Speaker 4: Did you open this in incognito, too?
>> Jon Kuperman: No.
>> Speaker 4: Because you might be logged in.
>> Jon Kuperman: I'm not, I checked.
>> Speaker 4: Are you not, okay.
>> Jon Kuperman: So yeah, eight plus the CSS and plus the document means that there's going to be more than some stuff is going to be-

[00:01:01]
>> Speaker 4: Yeah, I'm surprised that we have five, I thought we combined those checks.
>> Jon Kuperman: Soon we'll do not work tab some G.'s of stuff again this is misleading in the sense that these aren't files that you own like mail munch and we packs are not things that you have control over G.'s it being so.

[00:01:19] Browser caching, a lot of things don't have expirations on them like your pictures and things like that, so I don't know what you like WordPress or something like that you can do things.
>> Speaker 4: Just piece, it's just served from a theme.
>> Jon Kuperman: Yeah.
>> Speaker 4: It was like that but with a source tag.

[00:01:36]
>> Jon Kuperman: Yeah, but like to say I like to be the total cash could add some max ages, images to it or something like that, if you wanted to have browser caching turned on?
>> Speaker 4: Yeah, I think we have W3 total cache.
>> Jon Kuperman: There's also with CMS is you alway get this issue where you have plug ins kind of fighting each other sometimes, so a lot like WordPress.

[00:01:54] I see this all the time where every WordPress plugin has its own JavaScript and CSS, right? You get into this really tricky, like we keep talking about important it is to bundle them, but a lot of times when you're in CMS land, you don't really have that option.

[00:02:07] So, like every plugin wants to look it's way and function it's way. It's like a lot of times each plugin you add brings with it its own JavaScript and CSS file, and then can't necessarily be cached by other plugins. So, it might just be something like that, these are just things that happen or whatever, like cookies.

[00:02:26] I think that's probably fine.
>> Speaker 4: We were serving the static assets from a CDN which was Kolas/sp,
>> Jon Kuperman: Uh-huh.
>> Speaker 4: But then it was like, to keep this CDN with the newest version and sometimes there would be like a day lag.
>> Jon Kuperman: Yeah.
>> Speaker 4: I think it was before Amazon allowed you to purge stuff.

[00:02:49] Now you can just purge it, but that process of deployment is just annoying.
>> Jon Kuperman: Totally man.
>> Speaker 4: I'm just making excuses.
>> Jon Kuperman: No hey, man it's good the site looks fine. I use it, everybody here uses it it's a good. You've got images that don't have their sizes, I can just help with the pre-renders and stuff like that, not a huge deal.

[00:03:13] CSS again like these are things that you'll get, so there's three style blocks, we can look into those that are not in the head. I'm assuming those come from plugins in some way that are like adding them places.
>> Speaker 4: All right.
>> Jon Kuperman: I've used CSS pros but again I mean whatever that happens and it's probably one, so there's another thing I forgot to mention.

[00:03:30] So the unused CSS rules. It's a problem in the sense that you can have like a sync like more mark ups showing up, but it's also if you only have one C.S.S. file then you have other pages right? So it's like there could be rules that are used on other pages just not the page that you're on.

[00:03:46] And I wouldn't recommend making a C.S.S. file for each page or I mean that's just a lot of hassle or whatever. I think it's OK to send your style that C.S.S. Yeah we've got those things order of styles and scripts. These are basically like two two sides of the same coin or it's saying like C-S-S files for us to get the highest priority but you have C-S-S files that come after JavaScript files so how can I make the C-S-S a higher priority than.

[00:04:14] JavaScript. So then we take a look at a network refresh. We can even take a look at some screenshots. Actually, I'll turn those back on and refresh again. So kind of see how everything loads in here. So this is another weird caveat with a refresh, is when you Hit Refresh to start the recording.

[00:04:34] It actually starts the recording before the page refreshes. So you'll always see like you not always but often you'll see a frame or two and then the white of the refresh just to keep in mind that like it's like this is when the refresh has started but it hasn't flashed off the content of the page yet, and then it goes white.

[00:04:51] Stays white. And then at about one second, I get stuff in. And this is pretty good in the sense that I've got stuff to read and I have a good idea. I mean, we've got an image in there, an enroll button comes in right away.
>> Speaker 4: And the Frontend Masters logo is inlined SVG.

[00:05:06]
>> Jon Kuperman: Nice.
>> Speaker 4: So that's like
>> Jon Kuperman: Pretty fast that's good stuff. Again like a lot of pages that audit you know if the logo and the image were the only thing showing up before all this got in that would be problematic. Cut it's good you can read right away you can click all the important buttons.

[00:05:22] You get like that on style content, I'm not sure where that's coming from but it's like all.
>> Speaker 4: It's Web Fonts.
>> Jon Kuperman: Okay, yeah.
>> Speaker 4: That's where were using Web Fonts for this.
>> Jon Kuperman: Yeah I don't know. So the load looks pretty good to me, there's some like paints that are happening again.

[00:05:35] But everything above the fold is good there.
>> Speaker 4: Yeah the paints that are happening again, I think is because the video. Like I basically hook it to unload,
>> Jon Kuperman: Right.
>> Speaker 4: and then I say okay now dump in more DS scripts,
>> Jon Kuperman: Yeah, yeah
>> Speaker 4: for the sample video or whatever.

[00:05:49]
>> Jon Kuperman: Yeah totally. And I think that's great especially cuz the simple video is below the fold.
>> Speaker 4: Right, so I just wait untill
>> Jon Kuperman: Yeah, and that's really no hard and fast rules, like stuff that seems like bad practices can actually make for a way better experience because what you, people need to see they're, what they can see right away.

[00:06:04]
>> Speaker 4: Cuz I got the like full DOM unload on ready or whatever. From down in like seven or nine seconds down to one and a half or two or whatever it was.
>> Jon Kuperman: Yes, it was really good.
>> Speaker 4: By just making sure that [INAUDIBLE] with you doesn't block and other stuff doesn't block.

[00:06:21]
>> Jon Kuperman: And that's always really useful. People get into the problem of making everything.
>> Speaker 4: All of your trade offs that you just mentioned I wasn't surprised by.
>> Jon Kuperman: And then this seems pretty normal too, there's a couple things like over here. Again more A.P.I. stuff. I mean you see this is just a lot when you've got like You have your I frame or you have your script source and it hit it eight block.

[00:06:45] So it gets in there right away but then it has like all of its bootstrapping to do right. So it's like YouTube You have your little I frame that's all you put in for the YouTube but as soon as that gets parse it goes out and it's like give me some huge JavaScript a bunch of images and a bunch of do C.S. and they you know so it drags on.

[00:07:00] So you see this kind of pattern area of like your initial page load this waterfall And then you have a little bit of spotting is that it's like a bunch of new stuff and you know I mean it keeps kind of that this way of going.
>> Speaker 4: I hate segment because it's like it's nice for our marketers because they can just like inject Mail munch or whatever and like an accident the marketers can inject Remarketing scripts and stuff like that.

[00:07:27] Analytics mix kinda. All the stuff, right?
>> Jon Kuperman: So I think the lesson here, and this is almost always true is, it's probably not gonna be like, my JavaScript functions are too slow. It's almost always gonna be like, that ad platform or that analytics company that we have to use or I did the intelligence for ads on Twitter that was one of my big fights was always the ad team wants to know everything and get all this data and I'm Okay you can have it, but you can have it later you're not going to get it right away.

[00:07:59] So I think it's like this is really common I mean it's again it's just the embeds or it's like they provide a really rich user experience but they provide it at a cost, and.
>> Speaker 4: Yeah, segments, it's easy to just click a switch and drop in some code-

[00:08:15]
>> Jon Kuperman: [CROSSTALK]
>> Speaker 4: It just loads 200 kilobytes of JavaScript. Anyways.
>> Speaker 5: Sorry if you've covered this but could you just remind me what the vertical blue and red bars.
>> Jon Kuperman: Yeah those are the two events. Dom content loaded and then on load. So it's like showing you When those fire, I don't think I did cover that showing you when those fire and that so anything you do in JavaScript like on Dom content loaded will happen at that point.

[00:08:42]
>> Speaker 4: I also think that we're using VWO which I think is why we're getting so much distance between the blue and red
>> Jon Kuperman: OK.
>> Speaker 4: Because VWO the marketing guys will take a piece of, marketing guys with you know piece of the home page and swap out content and then that will affect how many users click, and how many potential customers click to the next Thing or whatever so there always measuring conversion rates and messing with context and titles and-

[00:09:18]
>> Jon Kuperman: So here's an interesting one as far as color goes I know I said on productions site you'll see a lot more color variation, but we're actually not seeing that much more here. But we're seeing one interesting one, I don't see a lot of purple So I could talk about before this script is actually coming down the pipeline really fast but we're stalled out waiting on the S-S-L handshake to finish.

[00:09:41] And so it's like this is what is a pipe dream that wisteria dot com So it's like it's getting in the queue really quickly the actual request sent after the S-S-L handshake is finished having really fast. Time to first bite looks good but look at we're spending like you know one hundred milliseconds.

[00:09:59] I'm waiting for the SSL handshakes that's you know that's like their sides every issue but interesting not just green and blue and grey everywhere. Yeah I don't there's a pretty good and then we could do a timeline out as well as well go Whole enchilada.
>> Speaker 4: Has anybody tried VWO or used it for AV testing?

[00:10:18]
>> Speaker 6: I have. It's a double edged sword.
>> Speaker 4: It's a double edged sword, yeah. It makes everything load slower, but at the same time you can test.
>> Speaker 7: I wanna do the AV test to see how many of my potential buyers drop off before they've actually loaded their experiment.

[00:10:35]
>> Jon Kuperman: Looks like we've got some memory leak in here.
>> Speaker 4: That's actually get a good AV test. One without VWO and one with.
>> Jon Kuperman: This isn't the jigsaw that we've seen before but the JS Heap is just getting bigger and bigger and bigger. So one thing I'd check actually what I'd like to do is see if it's just like Bigger until the page loads in the maybe it stops getting bigger or whether it keeps going.

[00:11:00] So instead of recording it on a refreshed I'm going to record it. Now that it's just sitting here and give it a couple seconds see if memory still leaking because you know as an absolute strapped it's not uncommon to see the memory go up what you want to know is like does it finally settle at some point or does it just keep going.

[00:11:15] So stop that.
>> Speaker 8: It settles like three seconds, and drops back down.
>> Jon Kuperman: Cool. Okay, so yeah there's like, yeah you're right. So at a certain point there's like a huge GC happens, right and it clears all that JavaScript tip. But it does appear to start building back up again I would again, this is like choose your battles, right?

[00:11:40] The bootstrapping is fine, it's whatever your app has to do. It drops back down, and then it starts crawling, but it is garbage collecting. But you can see that it is jigsawing a little bit. So it's jigsawing a little bit, but it's Going very slowly over time so I don't know I might wanna, I would look into this probably a little bit but it's low heap usage and it's slow growth.

[00:12:00] So it's not as like the examples I had were like these ridiculous jigsaws you know. It was kind of interesting. Let's hide the memory, hide the screenshots. I'll do a refresh again, just to get that initial paint load and all that kind of stuff.
>> Speaker 4: It's like someone digging through your dirty laundry.

[00:12:21] Why is this one so dirty?
>> Jon Kuperman: So we do see a good amount of repaints, again I would imagine, yeah this is like exactly what we just talked about like we see a sum paid junk It's when segments loading Google Ads Facebook Google Analytics intercom you know it's like all this stuff is coming in and it's really kind of whenever you have any like third party thing right.

[00:12:44] Like I said you have one I frame or one script. That's on your page. But as soon as that gets parsed, right, the company sends all their little minions over to start bootstrapping. Then it's like, here's my style sheet and here's a whole bunch of documents. It's just how everything works.

[00:12:58] So again, tradeoffs. There's a bunch of really, really useful stuff that I'm sure helps the business. But you can see that it has a pretty big impact on page performance. Again-
>> Speaker 4: Yeah inner com is just like so big but it's like the best tool in the world.

[00:13:14] It's amazing.
>> Jon Kuperman: I mean I think, that's almost always is gonna be the case, right. Like the most like feature rich, user friendly, awesome thing, I mean that comes at a cost, right. It's gonna be a lot of code. So yeah. I don't know. I don't know again like Using the CPU is that's what it's there for, it's there to be used.

[00:13:30] I might worry about the page jank except for when we saw, I mean we can do another here and just make sure that it's final turn paint flashing. And we don't see any problems here. So if the page jank is happening but it's happening down lower, it's really not something that I would worry about all that much.

[00:13:46] We saw a green flash for For a second when the model came up. But this doesn't seem bad to me. So if it's like, if the page is loading fine which we saw and there's a bunch of junkies stuff going on down low. Do you really need to worry about it?

[00:13:59] I mean the only way somebody would see it is if they hit the page and scroll immediately, they would see the video coming junky, but I think it's less of a concern. Just because it's out of the view port. Cool, I don't know, it seems good. I guess if it were me, I would beg to cut some of the bad stuff to see if we could get any wins there and then I'd investigate that memory leak but

[00:14:20]
>> Speaker 7: Many marketing is so effective.
>> Jon Kuperman: Yeah, I know, you're going I'm just saying, if it were me those are the things I would do, does anybody want to take a look at the other one
>> Speaker 3: Yeah, there's
>> Jon Kuperman: No yes I told questions.
>> Speaker 9: Is there a way to get like a Y.

[00:14:33] axis on this memory graph so we can see how much memory it's actually taking on?
>> Jon Kuperman: So you can see how much is taken up by hovering over the line. So you can see like how many nodes or how big the JS [INAUDIBLE] is in bytes. But I don't think you can change the UI but you can you can see this is like, whatever, 37, 33 million bytes and I'm bad at math, but you can see you can see the numbers there.