Loading Critical CSS

Now that our CSS is optimized, 0:01 there is one more really awesome optimization we can make with our site. 0:02 And that is to load our critical, or 0:07 above-the-fold CSS inline with the HTML document itself. 0:09 This removes a header request. 0:13 While this may seem out of the norm for most users, 0:16 the idea here is to reduce the need for a header request and 0:19 reduce any latency that may impede our first load. 0:23 The good news is we can automate this. 0:26 The build pipeline we just made gives us the foundation to add yet 0:30 another tool that will help automate this for us. 0:33 The hardest part really is deciding on what is critical CSS. 0:37 The critical CSS is the very CSS that makes up the initial view 0:42 of the first time a user visits your app. 0:46 I would start with some basic structural CSS that is needed like a header, 0:50 links, layout, and some core typography. 0:55 Beyond that, what are the UI components that make up this first view? 0:57 Get those in there as well. 1:03 Then make a separate CSS file that you would normally have to make a link 1:05 reference to and another header request. 1:09 Once we have that, it's all downhill from there. 1:14 A technique we can use to inline our CSS into the HTML is to add a gulp 1:18 module called gulp-inline-source. 1:22 This is really easy to add to our existing gulp file as a new task and 1:24 then add this to our default gulp process. 1:28 So let's add the variable of inlinesource 1:31 that points to the gulp-inline-source npm module. 1:34 Next, we will add another gulp task called inlinesource that references the new 1:39 variable we created, reference any HTML file within the root of our project and 1:44 pipes the result into our dist directory. 1:50 Last, let's add this new task to our default gulp task. 1:53 In order for this to work in our HTML file where we would normally reference the CSS 1:57 with a link header element, we will add a custom inline attribute. 2:03 Then we need to run the gulp command. 2:08 Oops, we have a problem. 2:13 Gulp is looking for a file that does not yet exist. 2:15 But why? 2:18 So looking over at our gulp file, it appears that inlinesource task 2:20 is firing before the process-css has completed. 2:24 Gulp doesn't care the order of the tasks in the default task array. 2:29 So, to help this, we can use a small hack called gulp-wait. 2:34 So, to install in our gulp file, 2:41 let's add the variable of wait that points to the npm module of gulp-wait. 2:43 Then in our inlinesource task, we're gonna reference wait, and 2:49 then wait say, 100 milliseconds. 2:54 By simply adding 100 milliseconds to the build script we can ensure that 2:58 the PostCSS task is completed before inlinesource is fired. 3:02 This, of course, 3:08 will vary depending on how much you have in your essential CSS file. 3:09 But I would argue that if you need more than 100 milliseconds to process, 3:12 that your essential CSS is too large. 3:16 So, after we run gulp and we look at our results, great. 3:19 Looking at our new HTML file in the dist directory, we see that the link element is 3:24 replaced with an inline style element that has our essential CSS loaded in here. 3:28 That's pretty awesome. 3:34 Using this new build pipeline, we could take advantage of other really cool things 3:35 like concatenating individual CSS files into a single file. 3:40 Think about automating the process of combining a base CSS 3:45 with the UI components needed for the first page to load. 3:49 And let’s not forget our old friend SASS. 3:54 While I didn’t spend any time here talking about how to integrate SASS or LESS, 3:56 or any preprocessor into this build pipeline, it’s all possible. 4:00 Simply process the SASS to CSS and let PostCSS take it from there. 4:05 It’s pretty cool what you can do. 4:09