This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Performance Audit: buchbinderei.it" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Speaker 1: There is one more on here.
>> Jon Kuperman: Okay.
>> Speaker 1: B-U-C-H.
>> Jon Kuperman: B-U-C-H.
>> Speaker 1: B-U-C-H.
>> Speaker 3: Might be easier if you look at the-
>> Speaker 1: Yeah, I mean I can read it but.
>> Speaker 4: That one.
>> Jon Kuperman: That one, all right, it is still not loaded. [LAUGH] It is still not loaded.
[00:00:27]
>> Speaker 3: You have the two G enabled.
>> Jon Kuperman: Did I tell you I did that on Twitter? I told you I did that on Twitter, do I have it? I do, boy, boy, boy, boy. I seriously, I had this like gyrotech and I was like it is unreasonable that blah blah blah blah blah.
[00:00:44]
>> [LAUGH]
>> Jon Kuperman: I can't get that on mine.
>> Speaker 3: On the highest source of-
>> Jon Kuperman: Yeah. I didn't have it on 2G I had it on 4G. So the throttling was just like a bit worse. Okay, cool, so this site's got some cool stuff going on.
>> Jon Kuperman: Okay, so that was like some serious jenki happening just I can see just visually.
[00:01:06] I think it might be a slider loading but you'll notice when I load it, it's pink. It that's what it is it's these cards. But they should probably be display hidden until they're placed correctly. Unless it's intended which it might be, I'm not sure. So we can start with an all, or actually got these here.
[00:01:26] So you can see this frame. It might be intended, but what's unintentional is that there's a big jenk, right? So it's like when the cards get pushed away you can see everything moves up, even this text up here is moving. So that's gonna cause a really big visual jenk.
[00:01:47] So I would work on that. There's like a million tricks to, like I said, you could just, actually there's like three. It's like three different experiences kind of, Yeah, okay so it's like the page is white, that's fine. And then a bunch of stuff comes in, good. There's text to read, all that stuff.
[00:02:02] To me and as not a designer, this is distracting I'm not sure if it's intentional. And then boom and it moves, so that's jarring. And then boom it moves again. So all the stuff that we actually render originally, I don't know where it goes it goes away. So you don't even get to experience it.
[00:02:20] So, yeah, that's definitely a big page jenk. And then let's see after that. After that we're all good, but, yeah, this page here with the hand in the books is like is nothing like the page that loads here. Cool, so that's definitely something, could run an audit.
>> Jon Kuperman: I see so these just get, all this just gets pushed down.
[00:02:54] Okay, I see what's going on, so this kind of experience is coming in. So again like, Mark was just mentioning this, but something a lot of people do is, so if an image is like one of your focal pieces, but you know images are slow, they take a while to download.
[00:03:08] First of all speed the image up as much as possible, optimize it, [INAUDIBLE] as they compress all that stuff. But, second of all reserve that space on the screen. You don't want to go from nothing to a 2000 pixel tall image. What you'd much rather do is like put a div even if it's just blank, that's 2000 pixels tall and fill it in with the image as the image comes in.
[00:03:26] Right, because you don't want the screen moving around like that. So you can have any, even that you would on the image, that's like a height, right? And so if you put a hight on the image in a width on the image, it reserves that space before the image even comes in.
[00:03:40] So that would be like a big win here, is whatever image this is just put a height on it. Similar stuff [INAUDIBLE], these get pretty good because they're like the same kind of hints over and over again. A good amount of CSS rules. Although this looks like there's a lot of stuff going on with this page.
[00:03:55] So I wouldn't be surprised if it moves around. Here's a big one that's not performances. Never, you never want this vertical overflow here. You just want the whole page to be view able. So I'm wondering, yeah, you just kind of have this. So yeah, basically what you would want, this is a little tricky.
[00:04:17] It's okay to have a wide site that's not responsive, right, like this is. But there's some definite design bugs here where, I mean you can just see, the picture is responsive, but the site itself isn't. And then when it's full screen, at least for me, I have this horizontal scroll, and it's even cutting off a little bit of this menu here.
[00:04:38] There's actually a cool, I don't know if I'll be able to find it, there's like this code snippet that I just love. That's, yeah, finding and fixing unintended body overflow. And it's just this little JavaScript snippet that iterate through each element in the DOM and sees if any of them are wider than the document width so you can see where your troublemakers are.
[00:05:00] So you can go into the console here and just run this little CSS tricks thing and it'll be like here are your troublemakers. These are all wider than my view port,, these are wider than the document. Cool, so that one's good. Yeah everything else looks pretty good. You know the g zip, the compression all that kind of stuff.
[00:05:18] And then and then I would dig in. Am I still on the right guy here I think for, I've audited about four pages at this point, I'm a little bit confused. But I'll do a timeline recording here, stop that. Okay, so yeah this is good. We don't have a memory leak at all.
[00:05:37] Yeah, it's like healthy memory, the app loads. It does something. I'm assuming some of this JS heap allocation is some fancy effects or stuff sliding or whatever. But anyway, and then it stays like really, really consistent. So that's great. So yeah, near the design work, claim that space right away with the image.
[00:05:56] And then fix the horizontal overflow I think those like the three big ones I'll do.
>> Speaker 1: One question related to fonts back from when you were talking about it earlier and you might wanna click the link at some point in the chat, but the question is, does the new font display for font face help with swapping fonts?
[00:06:15]
>> Jon Kuperman: Yeah, I think it does. I'm a little bit rusty on all the stuff that you can do to optimize web fonts. I don't wanna speak on it too much. I do think, yeah, it's a better API then, cuz the way that you load a lot of them with Google fonts or whatever, it's an actual CSS file in the head, so blocks render.
[00:06:37] Unfortunately I can't really speak to that. I do think I've heard it's supposed to be an improvement, but I do know in general what you just wanna avoid is having the text not render until-
>> Speaker 3: Google fonts now has an async option which is what-
>> Jon Kuperman: And so again, these are all trade-offs though, right?
[00:06:52]
>> Speaker 3: Yeah.
>> Jon Kuperman: Because if you have your font on async it's gonna be very jarring to the user, right? It's gonna load an aerial and then it's gonna, all the whole page is gonna move in to your cool font. Again you can get into the messier solutions or you can, whatever fine it is for the nav bar, lit that jitter.
[00:07:11] So they can at least see it right away, the rest of it may be you block until [CROSSTALK]
>> Speaker 3: The ideal solution is to build your own character set, yeah. With only the characters you're using on the page.
>> Jon Kuperman: That's true yeah.
>> Speaker 3: But, no, you can do it.
[00:07:24] You guys are laughing but you can actually do that. You can make your own font with only the characters that you using in the navigation. You know which letters you're using-
>> Jon Kuperman: I did it.
>> Speaker 3: You can build a tiny font.
>> Jon Kuperman: Yeah that's a lot work-
>> Speaker 3: And load that, it is but.
[00:07:40]
>> Jon Kuperman: Yeah, the only thing is, make sure your fall backs are as good as possible, right. So, don't do my crazy font or Sans Serif whatever you have. Always find what's the closest web safe font. And the best fallback that you can specify, so it gets the closest one.
[00:07:55] That helps a lot too. Cuz I'll see them go from like a sans serif to a serif that's going to be a really jarring experience. Whereas you could find pretty close web safe one and fall back to that. Yeah