Mastering Chrome Developer Tools Common Audit Problems

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

[00:00:03]
>> Speaker 1: Couple questions?
>> Jon Kuperman: Yeah?
>> Speaker 1: From Richie, do our inline styles auto vid?
>> Jon Kuperman: Are they audited for unused CSS rule or I guess I don't understand that question, sorry. Because if it's an inline style in style tags, it will be audited for unused CSS rules. If it's inline on the actual element, it's definitely used, so I don't know if that answers the question.

[00:00:36]
>> Speaker 1: I'll check on that.
>> Jon Kuperman: Cool.
>> Speaker 1: And then in your opinion, at what point I'm adding the in your opinion.
>> Jon Kuperman: Okay.
>> Speaker 1: [LAUGH] At what point in app development should you start being concerned with page mode time? It's obviously it's good habits.
>> Jon Kuperman: Sure.
>> Speaker 1: But when do you start thinking about that?

[00:00:56]
>> Jon Kuperman: I mean personally I think about it kind of the whole time that I'm building something. It would depend so much on a lot of different things, one of the big things is what is your convert. Are you selling something? Are you making money off this web app or website or whatever?

[00:01:17] And there's like there's so much that goes into it, right? Because it's a really a people thing if your already logged into your bank and it's your bank. It's super annoying to switch banks. So if I make a transfer pages slow, no one is gonna deal with that, right, because you don't have any choices.

[00:01:35] If your selling shoes and there's like 30 other shoe vendors right there competing with you. Time to page load and things like that can really, really matter. So I think you really have to like, for me it would just be something that you would talk about from the beginning.

[00:01:53] But it really matters on your market, how competitive it is our people already logged in. How easy is to switch, a bunch of different stuff like that. Yeah.
>> Speaker 3: Just to clarify, we try to do just performance budgets upfront just to help establish some of that. That way we know if something is slow, why it's slow and how we can maybe offset in different areas and so it just helps to-

[00:02:20]
>> Jon Kuperman: Yeah, I mean, it is what it is if you're just trying MVP something that really, really fast and I do understand. It's also a nice place if you're building, if you're bootstrapping some new project. It's nice to use open source libraries cuz they worry about performance a lot, right, there's a team at Facebook making react fast.

[00:02:39] So if you're just trying to put something up, use some cool open source tools because they'll help you a lot with that kind of stuff.
>> Speaker 1: So basically the answer is it depends.
>> Jon Kuperman: It depends. Yeah, yeah, you can quote me on that.
>> Speaker 1: Okay.
>> Speaker 4: I can tell our story with front end masters.com was really totally the MVP approach.

[00:02:56] We didn't really know exactly, if our money was gonna come from ticket sales and then we did the video subscription site and-
>> Jon Kuperman: Yeah.
>> Speaker 4: Before it was pay for download and now it's subscription in and then, it's always like we just hack together a bunch of WordPress plugins.

[00:03:12]
>> Jon Kuperman: Yeah.
>> Speaker 4: To get the MVPO.
>> Jon Kuperman: Yeah.
>> Speaker 4: And so even our current say, suffers today because of bad sort of past baggage, right. And we did optimize a bunch of stuff like compress images, is like the biggest thing, all right.
>> Jon Kuperman: Absolutely.
>> Speaker 4: That's like one of the biggest thing, it was just compress.

[00:03:28] You take your P and Gs, run it through P and G mini or whatever.
>> Jon Kuperman: Yeah.
>> Speaker 4: That really shrinks the page size down.
>> Jon Kuperman: Actually, I think it's my next slide. Common Audit Problems.
>> Speaker 4: Load things asynchronously, but our new site will be all in the new Google AMP.

[00:03:45]
>> Jon Kuperman: Heck, yeah. AMP is great. I kind of wanted to talk about it but it's not really relevant, but it kind of is.
>> Speaker 4: Its relevant, we should at least throw [INAUDIBLE].
>> Jon Kuperman: Yeah, it's relevant to performance. So it's the accelerated mobile pages and open source project from Google.

[00:03:58] It's on GitHub. Basically it's for mobile content producers, if you're in New York Times, Huffington Post. I mean even famous blogs and things like that and it's just basically like, it's not a framework so much as it's a set of enforced guidelines. So it's like you can't have an external stylesheet, you have to have it in style types and you don't get an extra HTTP request in the head is one of the rules.

[00:04:22] And then you can have JavaScript but they all have to be all your script sources have to be async. So you can't have any JavaScript that's required for the initial rendering path. And some some rules like that. But what they allow you to do is if you do a Google search on your phone right now, you'll see some of the items at the top have this a lightning bolt on them.

[00:04:39] Those are AMP passing pages and if you click one of those, they load so fast, I mean they really do lightning fast. It's definitely worth checking out. Even if you don't use AMP, you should read what their criteria are and see how many of those things you can apply to your site.

[00:04:54] They're just interesting-
>> Speaker 4: Its a collection of best practices all kind of bundled up.
>> Jon Kuperman: Right, absolutely, and some of them you can do and some of them you can't with AMP. You have to specify all your images height and width, which is tough for depending on your design and stuff like that.

[00:05:11] But it's worth reading and seeing could I do some of these? Because they have some really, really genius performance solutions. And then yeah, I wanted to talk about some really common things that just, I guess this list here. To answer that question from a while ago, I think this list here, you should do from the very beginning.

[00:05:29] Any other performance audits, do whenever you can. Your production build for now should serve most likely one CSS and one JavaScript file. Let me take a small deviation because this is how complex performances, right? So on one hand you have this knowledge that multiple HTTP request is a bad thing and because if there's more than five.

[00:05:54] Some have to wait on other ones to finish, right? On the other hand, let's say you have a single page application where your landing screen is just like some texts says hello. But later it's loading in tons of complex functionality, like mint.com or something like that. Does all this stuff, do you really need to send all that cool functionality JavaScript down just to display hello on the critical, on the first render?

[00:06:20] So maybe you want to experiment with having two JavaScript files. One that's like the stuff that's absolutely necessary for the original page load. And one that has all your big app stuff that can come afterward, it gets really tricky. And there's no one right approach for any of this stuff.

[00:06:37] Aother thing is sometimes images take a long time to load and image request is sent as soon as the HTML is parsed with an image tag, all right? So one thing that you could do, just like whatever spit balling here. Is if you have a site with a bunch of face avatars like Facebook or something like that.

[00:06:57] Maybe you could experiment with passing the image down as a data attribute, so it doesn't load, your avatars don't load in the initial render. And then using JavaScript to make image attributes, so they load asynchronously or so. I mean there's so many things you can start playing with, once you start figuring out performance stuff.

[00:07:14] And there really isn't a right approach or say you have a video blog, YouTube or something like that and you know the view port size. Do you really need to pre-render the videos that are scroll down there? Cuz you can get a really fast load if you only render the first two videos, right?

[00:07:28] As opposed to 30 in your, you know? So you can start thinking about all this different stuff and these ones up here are really easy. There's a one size fits all solution, rest of the stuff it gets like yeah.
>> Speaker 4: And some of this is gonna change as best practices at [INAUDIBLE].

[00:07:41]
>> Jon Kuperman: Yeah, so for now that I keep saying yeah, and this is such a boogeyman hard to talk about thing. There are some services on a cheapy too. For those that aren't familiar, it's Google came out with this new HTTP server called Speedy. And it's kind of evolved into the next level of HTTP.

[00:07:59] And what's gonna flip on that is it's gonna be able to handle a ton of small requests. It's gonna be kind of the opposite of what we have now. So right now it's all about bundling one JavaScript, one CSS, one image Sprite, right, that's the profile. But with HTTP2, I think it's really the exact opposite or it's your little components that are gonna send down the wire really fast.

[00:08:22] So it's all gonna change. But for now, unless you specifically set up otherwise, do you have an HTTP1 server for all your stuff, all your hosts, everything like that, in one bundles. That's what you want, but yes, it is all gonna change. Gzip compression, talked about, there's a plugin for it or you can just, actually I think I have in just a hop over.

[00:08:43] I think I actually have commented out. Yeah, so this is the node compression library for Express. And so if you uncomment these two lines, that compression warning goes away just to kind of show. It's pretty easy to set this kind of stuff up. Compressor images. I use this tool image often and for those I know you're mentioning gulp task or whatever you're using, there's probably an image optimum plug in.

[00:09:05] There is what's called lossless image compression and the idea is you're making the image smaller without actually reducing the quality of the image. And that's done because I'm not even sure why this is, but images have all this meta information that they carry around with them. What program was used to edit them and sizing information a title, all this stuff.

[00:09:23] And so imageoptim can squeeze out all of that stuff. And then there's more advanced ones that are loss full compression, don't call me on that, I don't know what the opposite of lossless is. But I know those ones can actually reduce quality, so you can kind of make these trades.

[00:09:37] Again, there's no one size fits all solution, just maybe checking out how big your stuff is and if there's any gains you can make. Browser caching, again just specify how long a browser can cache items for. Your CSS should go in the document head because I don't know if you've ever seen the flash of unstyled content before.

[00:09:57] Where you hit a page and it's all black text on white and then it flashes and then it colors in. So that everything in the head blocks render. So if you have a CSS file in your head tag, your content will not render until that file is downloaded and parsed basically, which is slow but it's what you want.

[00:10:15] You want your style to just look, your site needs to look like your site the moment it's able to be seen. With other stuff like some jQuery or something like that, you wanna put it at the end of the body. Cuz if you don't want to block the render but you do want to load immediately.

[00:10:28] And then the unused CSS rules. Sorry, I can't have more check out this one easy fix to make your site way faster. Again, you wanna be careful with this because you wanna make sure that you're not actually using those in some asynchronously loaded portion of your app. But these are big, they're pretty easy to add to your site and they make a huge difference.