This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Performance Audit: skillsilo.com" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Speaker 1: There is, someone wants to look at www.skillsilo.com.
>> Jon: Skillsilo. Is that how you spell those things?
>> Speaker 1: That looks like it.
>> Jon: Sweet. Learn a language 1-on-1 awesome. Okay. So again probably just I kind of do the same [LAUGH] workflow a lot basically, I'll just do an initial page audit, run it on a refresh.
[00:00:30] Kind of watch the the repaints a little bit, although the repaints look good to me, again what you're what you're wanting to watch out for is, are you repainting areas unnecessarily, and I don't see that happening. So we'll go back here. Seeing a lot of the same stuff this actually looks remarkably similar.
[00:00:48] We've got eight different JavaScript files coming down so that's mere more than can be handled. Gzip would be good. So whether you're using Igenex or Apache enabling Gzip would be great. These are the kinda same warnings that we saw. There's very few unused CSS rules so that's good.
[00:01:05] You do have, you have inline scripts that are in the head. Like I said before, that's sometimes necessary, like if you're doing stuff with web components, if you're doing stuff with Modernizr, you need that stuff to be in the head. If you're not doing those things, put your scripts in the body, so we can investigate that further.
[00:01:23] We can do a network. Some colors got some interesting colors. All right, so we'll take first a look at the refresh, yeah it seems good okay, so we start immediately, let me double-click on this, come on. So we start with this text which I think is pretty good.
[00:01:53] It takes, okay, so here's a problem right, like it takes a pretty substantial amount of time, before the navigation comes in. And so what's happening here is we've got this huge image, right? And the image is placed above, is place above the, what I would say some of the important parts of the navigation, so until this image is done loading, which is, we'll take a look at how big it is in a second.
[00:02:17] You're not able to click on How it Works, Courses, Pricing. Other than that, it looks really good cuz I like that you see the text right away, the button right away is good. But I would try to get that navigation mark up coming in before. Other than that, that stuff looks good.
[00:02:32] Might take a look by size just to try to find that image here. So like home page second maybe secondary cover, take a preview. I don't think that's the one right? No six and other one, I'm gonna close this if I can.
>> Jon: It looks like size wise.
[00:03:03]
>> Jon: Come on, my computers going real slow. This is pretty big These images are all pretty big. Yeah, losses compression would probably help a lot here. I don't have the images, but for me I'd run them through ImageOptim. It's just kind of a lot of stuff. So you can see over here, like, we've got like, I don't know, two and a half mg coming down.
[00:03:26] That's pretty substantial. I've definitely seen worse. But I would check out those images, both, how big are they in the sense of, if we click on into the preview that could actually be shrunken and then definitely if it can be lossly compressed I would do that. Let's take a look at the preview, yeah.
[00:03:43] So this is pictures 6000 pixels wide, and nobody's screen is gonna be 6000 pixels wide. So even if you're doing background cover which you are, I think I can't member what the current, there's people, there's blog posts on what's a good width for a full screen, website these days or whatever.
[00:04:01] But I imagine you could get it down to 1500 to 2000 pixels, which would be a ton of savings there, and then losslessly compress those images. So yeah. So move the navigation, losslessly compress those images, and shrink them down in size if you can. Heading over to Timeline.
[00:04:18] Do a, I guess a memory capture while the page is loaded, I'll scroll around a little bit. Again, then stop it.
>> Jon: Here we do have some growth. It's not a ton of memory, like total but we do have some stuff leaking. So I would look into the JS heap it looks like we're allocating something that's not getting garbage collected.
[00:04:42] We also have quite a bit of rendering going on. I'm not totally sure where that's coming from. You know what this is? I think I'm. Something that I see very often is when you have these big images that are blocking some kind of render, you see this big gap here where not a lot of work is getting done, but an image is coming in.
[00:05:05] I am I thinking that that's what's causing it, basically. Either some JavaScript, I'm not sure how this image is actually getting loaded. But in some way like this image is kind of being problematic only in the sense that it's getting a high priority and coming in before other stuff that we need, letting the refresh timeline load now.
[00:05:23] The only reason I want to dig into the memory ones is because they just take forever and I'll just be like okay we got arrays, where the arrays coming from by both front and masters and the site like are definitely leaking JS heep memory. It would be worth clicking through and figuring out where that stuff is coming from.
[00:05:41] Chrome Canary is freezing on me here, let me just close out of it. No, I lost the last page. Yeah, question?
>> Speaker 3: Would you on a typical site, would you do several audits, and use the device toolbar to do it in a mobile setting and?
>> Jon: Yeah. Yes I definitely.
[00:06:01] Yeah I definitely would. I mean, I think the audits are great especially if you use Page Speed Insights, it does a desktop and a mobile on it for you, which is very nice. It's kind of nice because so if you can experience performance problems with no emulation. That's that's another big performance problems right so it's like if you experience them on your laptop.
[00:06:23] They're definitely gonna be there on a lower device, that being said when you get your performance you're really happy with it on your laptop at that point I think it's worth doing a CPU and device simulation see kind of how things, how to experience things at that at that stage.
[00:06:39] So yeah that the pictures are probably the biggest thing here. I would say like not only are they too high up in the mark up. So they're blocking things but they're really really big and you could compress them by a good amount. Well, cool. We could do memory staff if we want but again this could be me up here fiddling for like 15 minutes.
[00:06:59] Do you wanna do any more, do you wanna call it?
>> Speaker 4: I have a question.
>> Jon: Yeah
>> Speaker 4: One of the recommendations I found on the site I did was parallel downloads across host names?
>> Jon: Yeah, so It's yeah, so it's it's not five requests that it can handle at a time.
[00:07:17] It's five requests per domain that it can handle at a time. So what you'll often see is people even just do the subdomains. So you'll see www.1.google.com or something like that right. So you have a couple choices. You can host him yourself like all your static assets with multiple subdomains or multiple domains or whatever.
[00:07:38] If you need to do more cuz if you can consolidate them that's probably the easiest win. The other thing that you can do is if you can do is if you use any sort of CDN, now you've got your host name for some stuff in the CDN for other stuff.
[00:07:52] So yeah, it's five per host not five per-
>> Speaker 4: So why are the browsers limiting it to, by subdomain if they couldn't they just lift that limit and it would-
>> Speaker 3: Yeah, I don't know why that is. It's just like something that I really dealt with as a reality.
[00:08:06]
>> Speaker 4: It seems like a silly workaround.
>> Jon: It does, yeah, it does. Especially, it seems to me they could have something to do with like maybe worrying about overloading the servers with a request, so it's like you've got multiple hosts names it can assume multiple servers even though they might all be on one server.
[00:08:23] So I wonder if it's just not wanting to flood the host with unlimited requests and parallel. I'm not sure though, actually I'll look into that.