[MUSIC] 0:00 When it comes to performance and optimization, 0:05 CSS has had its fair share of criticism. 0:08 From bloated style sheets, unnecessarily deep selectors, and 0:11 poorly performing selectors, there are more than a handful of articles out there 0:15 telling you what to do and what not to do. 0:19 This section where we view techniques that yield promising results 0:23 in real performance improvements. 0:26 The example code from our last lesson, as a series of very common CSS mistakes, 0:29 one mistake that you see here, is not using CSS shorthands. 0:34 We should get these all addressed. 0:39 In this small example, it doesn't seem like much, but your app grows, practices 0:40 like this will add weight to your CSS, decreasing performance over time. 0:45 Remember, CSS is a render-blocking header call. 0:50 Also, the less CSS your browser has to load into the CSS object model, 0:54 the faster you get to that first meaningful paint, and 0:58 really help your perceived performance. 1:01 Another common practice is repeating CSS rules under different selector names. 1:04 Focusing on the individuality of the UI object in the HTMLversus reuseability and 1:09 performance of the CSS. 1:15 Again, it is highly recommended that you do not do this. 1:17 Let's remove all of these repeated image selectors and use a single selector that 1:21 defines its responsibility, that of painting the image frame. 1:25 Doing so, this also makes it a lot easier to make our media query calls as well. 1:30 Now that our CSS is cleaned up, let's go back to the HTML and 1:41 update these class values. 1:44 We, easily remove these selectors in favor of the more usable 1:47 image frame selector we created in the CSS a minute ago. 1:52 In the long run, having a strategy to minimize rules and 1:57 limit the number of selectors in your CSS will help keep these files lean and 2:01 your site highly performant. 2:06 With these updates, our site is still looking pretty good. 2:10 Now, that we have our selectors more standardized and 2:17 the output of CSS is reduced, 2:19 another thing you may have noticed is the media query and its initial perspective. 2:21 We made the classic mistake of starting from desktop first. 2:26 Let's go back in and re-factor the CSS, so that it's mobile first and 2:30 see how this has an effect in the browser. 2:34 As we see here, we have a series of media query rules using 2:37 the max width media query respective. 2:41 Not only can this have a possible negative impact on performance, but 2:43 we are not truly taking advantage of progressive enhancement at all. 2:48 Keeping with a mobile first approach, we want to update all of our CSS, 2:53 so that the rules we want for mobile are at the root of each selector. 2:56 This will ensure that our mobile UI's rendered first and 3:01 as the desktop rules that are inside of media queries progressively enhancing our 3:05 experience as the user increases their screen size. 3:09 So let's keep moving through here and get the background positions, 3:13 so that we have our 50% as the base and 65 when it goes to desktop. 3:18 Then another thing we need to do is remove our padding round as well. 3:24 Okay, looking good so far. 3:32 Let's move our font sizes so 3:33 we have our default font size is a bigger ren size. 3:37 So, looking good, when refreshing in the browser we see that 3:46 our view is not changed at all so our updates are completely successful. 3:50 And resizing the browser, 3:54 we see at what point our media queries are being triggered. 3:55 Good job. 4:00 We have refactored our CSS by deleting unnecessary lines of code. 4:01 And less code reduces latency and gets us to that first meaningful paint faster. 4:05 But we can do more. 4:11 All of our CSS is human readable. 4:13 When we are sending this code to a browser, it doesn't care about formatting. 4:15 We should fix that. 4:19 What about vendor prefix rules? 4:22 To maintain performance CSS we want to ensure 4:24 that we are only ever using CSS rules that we need. 4:27 While there are manual processes we can use to maintain this 4:31 we should automate this. 4:34 And in our last example we did a lot of manual fixing of CSS. 4:37 Is there a way we can automate cleaning things up? 4:41 Sure there is. 4:44 In our last example, I illustrated how you can mainly go through your CSS and 4:46 with some simple modifications, you can clean things up. 4:49 But in this example, 4:52 we have some CSS that may look like what you typically see in production code. 4:53 It'll be vendor prefexes, verbose rules, scattered media queries, 4:58 commented out code, and even selectors without any rules. 5:02 Manually going through all of this code may be a real challenge. 5:06 To fix this, how about using an automated process pipeline to help 5:11 clean things up and minify your code. 5:14 A double win for performance. 5:17 To start off we're gonna use a simple gulp file. 5:19 This'll help us get started processing our CSS. 5:22 Simply put what we are doing here is telling gulp where our css file is and 5:26 processing it to a disk directory. 5:30 Running this script doesn't really do very much as we'll see in the output that 5:33 our new css is the same as our old css. 5:37 So, the first issue that we should try to solve is vendor prefixing. 5:42 So to do this, we're gonna lean on a new policy assess technique, 5:47 a tool called autoprefixer. 5:51 To install, it's pretty simple. 5:53 We're gonna add the variable of pause css that points to the gulp 5:55 pause css mpm module. 6:00 Then, we're gonna add the variable of autoprefixer that is going to point to 6:03 thempm auto prefixer module. 6:06 Then, we need to add in a plugin statement for the autoprefixer options, and 6:10 we're gonna go back three versions. 6:14 Last, we need to reference the plugin within the return statement like so. 6:17 Let's run gulp again and see how this affects our output css. 6:22 We will see that that the hard-coated bender prefixes we put in there are not 6:25 removed because of the three-version rule. 6:29 If I go back and update the auto prefixer rules to go way back, 6:33 we will see that auto prexifer leaves in the higher coded values. 6:38 Just note that if we had not higher coded the prefixes, 6:43 the behavior would have been exactly the same, given these rules. 6:46 So, let's go back and we're gonna reset this back to three versions, and 6:51 run gulp again. 6:55 Things are looking really good at this point, but 6:57 one more thing I just wanna show is another optimization tool for 7:00 post-CSS called post-CSS z-index Adding this to our Gulp file, 7:05 this is gonna optimize our Z index rules values in our CSS. 7:09 So to install, we're gonna go back to the gulp and we're gonna add the variable of 7:15 postcss Z index, that's a big one that points to the postcssZindex MPM module. 7:20 Then, we can add another option to the plugin that we created, and 7:26 start the index at one. 7:30 So, let's run gulp here. 7:33 So, looking at our output, we will see that our previous z index 7:39 values have been replaced, this one with one, this one was two and so on. 7:45 So with venderprefixing automated and z index normalized, 7:51 the next thing that we need to do is minify our css. 7:55 There are a number of ways to do this, but for this example, 7:59 I'm gonna use a tool called clean-css and 8:02 gulp-concat to produce a min.css file in our disk directory. 8:05 To install, we're gonna add the var concat that points to the gulp-concat mpm module. 8:10 Then cleanCSS that points to the gulp-clean-css module. 8:16 Now, we need the pipe in cleanCSS, and 8:20 then concat with the new name of prod.min.css 8:25 that will be our new output file. 8:30 And we're gonna run gulp and then let's open up the new prod.min.css file and 8:34 then we'll see that our css has been minified, 8:40 we're gonna go here and then open this up. 8:44 So this is pretty awesome. 8:47 To really see the progress we have made, though, 8:49 we can use a tool called css on minifier. 8:51 We can run this in the command line and 8:54 then we can use this to view an expanded version of our minified css. 8:56 When expanded, we see that empty selectors and commented out rules have been removed. 9:01 The selector normal-rules has been completely removed and 9:12 the selector no-rules-here is reduced to only the width rule. 9:15 This is less code and less code is more performant code. 9:19 But, what about combining media queries, 9:23 combining similar adjacent selectors and automating our shorthand CSS. 9:27 There are tools in cleanCSS that were not completely taken advantage of yet, 9:32 so let's go update our gulp script and add some parameters into our task. 9:37 So one way to use all the base rules for 9:44 cleanCSS is to simply add the level option within the return statement like so. 9:46 Let's go run gulp again. 9:53 And then we're gonna use CSS unmidifier to see the results once again. 9:56 With this update, we call in the full cleanCSS API and 10:04 get a really great series of features that help us really optimize our CSS. 10:08 Vendor prefixing is addressed. 10:13 Our z-indexing is addressed. 10:15 Notice, how the no rule selector was removed and make one and make two became 10:18 adjacent selector with mirror rules as the selectors are cacatinated. 10:23 Also notice that the two media queries 10:29 were grouped into a single media query selector. 10:33 This and other features like auto short handing your CSS roles just makes for 10:37 leaner and more performance CSS and 10:42 is a great tool to add to your automation process. 10:45