This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Performance Audit: tauck.com" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Speaker 2: We got two more.
>> Jon: Cool.
>> Speaker 2: www.tauck.com.
>> Jon: Okay, so again, gonna go back here, do an audit. Stop, do a very fresh audit. I really only use the audit present state if it's a single page app, like if it's something I've had open for a while and I've been running and I kind of want to know about.
[00:00:31] Otherwise, I'd really prefer the like cache free restart, just kind of get that experience of hitting the site for the first time. We are stuck on something here. Some resource.
>> Jon: Come on.
>> Jon: It's still loading something. I'm not sure what it is. We'll find out soon enough, though.
[00:01:06]
>> Jon: It looks complete to me, I would ship it. I would and maybe something's missing here. I don't know. It's still loading up here. Stuff is coming down though, it was at 133 a minute ago. Just another second, I hope more stuff. Okay, so one thing that's going on here is stuff that is blocking that is obviously not required for the site.
[00:01:33] And it's really taking quite a while.
>> Speaker 3: Can you go to the network tab and see how many requests are still pending?
>> Jon: Yeah, but the only problem is I'll have to re-refresh it.
>> [LAUGH]
>> Speaker 3: Yeah, you can write down for me too?
>> Jon: But yeah, I'll go ahead and do that just so we can kind of see what's going on.
[00:01:47]
>> Speaker 3: It might just be like-
>> Jon: See that one went real fast.
>> Speaker 3: [CROSSTALK] Server?
>> Jon: I wonder what's going on there? Okay, so from the network tab, I kind of wanted to take a look at size first and see. Yeah, so we've got some stuff like this.
[00:02:03] We've got someone to CDN, which is good, but this CSS files is pretty big. There's a couple of things that are over 100 kilobytes here. The total size coming down is actually not bad. I do want to do that audit just to see what's going on there. But I also kind of wanted to check out.
[00:02:21] Okay, so here's the point where the refresh starts. So the first stuff that loads in it's pretty blank you've got your search in the register button. So here's, yeah these are things that can be problematic, right? So we've got stuff floating in that's kind of out of order.
[00:02:37] You don't have a logo. You don't have any text to greet the user yet. So if the user's on a slow connection, for example, if we go to, where am I at, just gotta close the screenshots. It's no throttling. So if we're like on a good 3G connection here and I refresh the page, I'm going to be like as it loads, see I'm stuck for a little while with not much to be able to do.
[00:02:59] Does that makes sense? You can really see it if I was on a regular 2G connection here. I refreshed here, after it goes white,there's going to be a period of time where I'm getting style stuff, I'm getting that green bar, but I don't have any content that I can play with.
[00:03:14] It's a little bit of a hard fix sometimes, because it's actually about the order that your markup is in. So here, I've got nothing that I can do yet. It's just styles filling in. I'm assuming web fonts, web fonts are like, man web fonts. They're just part of our performance nightmare.
[00:03:32] And, I forget what it was, there's something, I'm trying to remember what it is now. I wish I remembered, there's a talk at Google iO about it where it downloads a web font. And then it does stuff in a crazy order like. Basically, it grabs the whole web font and loads it in and then it like parses through the document, parses the CSS to see if it needs to be used on them,applies it later after the factors of why you get like this flash here.
[00:04:02] Web fonts are tough, but if you that that's your design, that's your design totally. So yeah, so I guess one thing though that I got off track. One thing that I wanted to talk about was just, we have a good period of time where the site is not usable.
[00:04:17] So it'd be really nice to change some of this ordering with the actual markup that comes down. I would really love to see the navigation and some forums show up right away. So you can at least feel like, I'm here. And then like especially it's a little bit tricky to, this text would be nice to send down earlier if you can.
[00:04:34] This is all an image but it is just nice to have if the page is loading really slow, give these or something to do whether it's now, where they can click on or like an intro text they can read.
>> Speaker 3: I remember with those sliders, back in 2005 what we did was paint the background black and drop in some type of topography or font.
[00:04:58] It didn't look great, but it was at least, you knew exactly what you what was going to come, and then you know image loaded and- Yeah totally. Later. [CROSSTALK] You kinda trick, at least show something [CROSSTALK]
>> Jon: I think that's a little thing I think so. The thing you're trying to prevent most of all these people is leaving your page, right?
[00:05:16] That's the reason you worry about slow performance on page load is because you don't want people to go, I don't want this, and hit back, or whatever. So the sooner you engage with them, we're you're like, Welcome. Buy shoes, or whatever it is that your site is doing, I think the better that experience is going to be.
[00:05:34] I'm gonna try an audit. Here the audit loaded. Nothing all that bad. So, okay. So here's the thing. This file I remember from back over here, I believe, as being, let me see where I'm at here. I could be wrong. I think I was wrong. All right, well I thought it was the biggest file.
[00:05:57] It's not the biggest. No, it is. What am I doing? Yes, okay. So this file here, component CSS, is not only the largest file. But then when I go over to the Audit tab, it says that it's 92% unused by the current page. So to me, I think there's a real big win here.
[00:06:14] And I am sure some of the cells are using on other pages. But I would imagine some of them, you're not.
>> Speaker 3: Especially on a highly used page.
>> Jon: Yeah, so again, if you have in this scenario, if you do need all those styles like your app is really complex.
[00:06:31] Here's a situation where I'd recommend breaking it up into two files. So you'd have init.CSS, or boot,CSS. Which would literally just be able to paint that home screen. And then later, after it load in all the rest of the CSS for stuff. Just because that first network doesn't fly down.
[00:06:46] You can see the page and then load the rest of the stuff in. So that's probably my biggest one that I've seen here so far. And we can do a Timeline Record to mess around, hover around some things.
>> Speaker 4: It's 27,000 lines long if you it.
>> Jon: Yeah, I could tell by the size that it was pretty big.
[00:07:05] I'm assuming it's a bundle and I'm assuming there CSS frameworks in there. Yeah, it's okay. We have two memory leaks here. Okay, so this there's actually not a lot of work being done. It's nice the site's resting pretty well. There's a little bit of render jink happening and it looks like it's blaming.
[00:07:23] I don't know what this is, C C E T R K, I'm assuming it's like analytics ads testing one of those kind of libraries. So again, I'm not sure what this product is but this is causing a little bit of page jank, probably wouldn't worry about it. I do see not a ton but look at this,this jigsaw here of the JS heap is definitely leaking some memory especially on a page that's pretty static.
[00:07:45] So I'd compare some snapshots and see what's adding all that JS heap memory there.