Mastering Chrome Developer Tools Challenge 3 Solution, Part 2

Transcript from the "Challenge 3 Solution, Part 2" Lesson

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

[00:00:04]
>> Jon Kuperman: Cool, so yeah, we've got kind of back over here we've got a ton of JavaScript. A lot of it, it is it's like the YouTube players. If you were able to run it with all four images, those images are really huge, there's like two things we could do there.

[00:00:17] The first thing is to get an image editor and shrink them down because they just don't need to be 2,000 pixels wide. The second thing is using one of those programs, like I mentioned ImageOptim. And I'll just show that real quick because I really like it. It's just this little drag and drop area.

[00:00:31] There is a command line version you can use with your build process. And then you can just do something like. I can go into my Public folder, and go into my images, and I can just grab those four, and slide them in here. And it just kind of goes to work and you can see, hopefully, the savings are like 60 to 70% and it changes them inline.

[00:00:50] You don't need to like export or save them back, or anything like that. Looks like there was nothing to be done with the fave icon and [LAUGH] it might have even choked on this, this one looks like it's still working. But anyway, so a program like that, I mean it's so easy, it has no bad effect on the user, you can put it into your build tool and it can have just tremendous effect and again this is like all that metadata, it's all lossless so you're not losing image quality, so yeah never discount the power of a tool like ImageOptim or any lossless image compression.

[00:01:20] Cool and then like the other way that you could kind of have taken a look at this which we hadn't really gotten to yet is in this summary panel. I'm gonna go ahead and pop these out so I get a little bit more view. So we're looking in the timeline.

[00:01:31] We're looking at the summary panel. You can switch it over to something like bottom up, which is really handy cuz then you get, this what I, I kind of mentioned this before like, there's self time and total time whenever you're profiling any program, so self time is like how long the function foo took to execute and total time is like if foo calls bar and bar takes three seconds.

[00:01:54] Foo is total time is not only how long it took to execute but how long everything it called took to execute. So basically what you'll see if you search by total time you'll see the order in which everything happened right. Like what called what called what. If you search by self time which is the default, you'll see what the most expensive time wise functions are so the first thing that we see is like the most expensive thing was just compiling and evaluating scripts unavoidable unless you have less scripts.

[00:02:20] But then the second thing that we'll see kind of right away is like this anonymous function and this is based.js it's the YouTube video game. So we kind of look for here is like searching by the most expensive. We can kind of see like when is that we get to any of our own staff?

[00:02:35] If we get to any of our own staff, so if you had seen like one of your application files in this bottom up view, it would be really worth looking into. If you're seeing other people's files like these, you can see they're all coming from www.YouTubeimage.com. There's not much you can do except for you can make things asynchronous like a good example, we talked about AMP earlier.

[00:02:57] And I think what they do is they make a YouTube call just to get the image using the You Tube API and they put the image there as a placeholder. After the page loads, they replace it with an embedded video. Just in the hopes that it's way better to hit the page and it takes a second before the video's clickable, than it is to be stuck there hanging waiting for the page to be interactive because you're loading all these videos or something like that.

[00:03:22] So I think it's just something to be careful about. Obviously embeds provide a really rich experience, but can you make them asynchronous, can you have less of them, can you control them in some way like loading a picture and then loading in?
>> Speaker 2: Couple questions.
>> Jon Kuperman: Yeah.
>> Speaker 2: Olga is asking if the timeline is able to use source maps?

[00:03:43]
>> Jon Kuperman: Yeah so yeah generally source maps do work well with dev tools. So yeah they it should pick up mapping all those functions over.
>> Speaker 2: Amberley is, she's seeing JavaScript from her extensions is it better to run.
>> Jon Kuperman: Yeah. [CROSSTALK] That's a great question. And that comes up a lot.

[00:04:04] It's another opinion one so yeah you will see like depending on what Chrome extensions that you have sometimes you'll see that the slowest function is not the app at all but it's just something that your Chrome browser runs all the time. I think it's cool to do the profiling with your Chrome extensions on both for your own personal knowledge of like if you have some really slow extensions.

[00:04:23] But also most people rock a few extensions so it's good to get a feel. However, yeah if it is not auditable for your app. So what I would kind of recommend doing there is like do some profiling and then open in Incognito tab which by default doesn't enable any extensions and run a profile in the Incognito tab to see you know purely what your app is causing.

[00:04:42] It's easier than like than turning them off all the time and turning it back on whenever. The other thing you can do is like have no extensions for Chrome canary. But yeah it's kind of good but it is misleading for sure.
>> Speaker 2: And then Richard is asking why audit didn't have a recommendation to compress the images?

[00:04:58]
>> Jon Kuperman: Yeah that's a good call. It does offer that sometimes I'm really not sure what its logic is behind when it suggests it and when it doesn't but the rule for me would just be losslessly compress everything because otherwise I mean it's invisible meta data that you're making every user download.

[00:05:18] It's a good call. Okay. Awesome okay cool. So that's like an intro to the timeline panel, it's a really overwhelming looking panel. But kind of ultimately my hope is that you'll get to the point where you don't have to read every single thing, you just start looking for these patterns.

[00:05:36] Are you seeing a ton of green? Like this stands out to me, I'm like why am I doing all that repainting, all that page jank and I look and I see it's the YouTube videos. Or like this is a ton of JavaScript, is it something that I can fix in some way?

[00:05:50] I just thought of an optimization here which is like you'll notice it's like the same thing happening over and over again. That's because each iFrame right is like reaching out and grabbing the same, so I'm getting five videos means I have five copies of YouTube's base.js right like that's a lot of copies of YouTube base.js.

[00:06:08] So if you're using their API instead of just an easy embed you could grab one copy of YouTube's base.js and then user API to publish those but you start getting like a view of what's going on. Where you can win or where you can I can't really prescribe like an easy win, like don't use embeds.

[00:06:26] Obviously, embeds are great and they provide really rich experiences. But it's just good to know at least like where all that time is going or why things are janking around, and to be able to like kind of look through and click in like this. Yeah. And then the summary and the bottom up are really helpful for that stuff too.

[00:06:43] Think ImageOptim finally finished. All right.
>> Speaker 2: It looks like ImageOptim is Mac only, is there a good?
>> Jon Kuperman: Yeah. Actually, I don't have them all right now there's a really good totally tooling tips. I don't know if you've ever seen that, it's a YouTube video series, where I think like Matt Gott and Andy Asmati talk about all the best image optimizers.

[00:07:05] There's a lot of really good ones out there I'm just struggling to think of the names right now. But I would personally recommend finding ones that work with your build process, as opposed to a GUI, so it's always automated. So if you go to Gulp, or Grunt, or Webpack, whatever you use and look at their plugins to find.

[00:07:22] I'm sure there's a lossless image compressor. Same with all the content management systems like WordPress has things called like ewww, e-w-w-w or something like that and it automatically losslessly compresses every image you upload. So I would just pick whatever tool you're already using find one that works for that tool.