Now that our CSS is optimized,

there is one more really awesome optimization we can make with our site.

And that is to load our critical, or

above-the-fold CSS inline with the HTML document itself.

This removes a header request.

While this may seem out of the norm for most users,

the idea here is to reduce the need for a header request and

reduce any latency that may impede our first load.

The good news is we can automate this.

The build pipeline we just made gives us the foundation to add yet

another tool that will help automate this for us.

The hardest part really is deciding on what is critical CSS.

The critical CSS is the very CSS that makes up the initial view

of the first time a user visits your app.

I would start with some basic structural CSS that is needed like a header,

links, layout, and some core typography.

Beyond that, what are the UI components that make up this first view?

Get those in there as well.

Then make a separate CSS file that you would normally have to make a link

reference to and another header request.

Once we have that, it's all downhill from there.

A technique we can use to inline our CSS into the HTML is to add a gulp

module called gulp-inline-source.

This is really easy to add to our existing gulp file as a new task and

then add this to our default gulp process.

So let's add the variable of inlinesource

that points to the gulp-inline-source npm module.

Next, we will add another gulp task called inlinesource that references the new

variable we created, reference any HTML file within the root of our project and

pipes the result into our dist directory.

Last, let's add this new task to our default gulp task.

In order for this to work in our HTML file where we would normally reference the CSS

with a link header element, we will add a custom inline attribute.

Then we need to run the gulp command.

Oops, we have a problem.

Gulp is looking for a file that does not yet exist.

But why?

So looking over at our gulp file, it appears that inlinesource task

is firing before the process-css has completed.

Gulp doesn't care the order of the tasks in the default task array.

So, to help this, we can use a small hack called gulp-wait.

So, to install in our gulp file,

let's add the variable of wait that points to the npm module of gulp-wait.

Then in our inlinesource task, we're gonna reference wait, and

then wait say, 100 milliseconds.

By simply adding 100 milliseconds to the build script we can ensure that

the PostCSS task is completed before inlinesource is fired.

This, of course,

will vary depending on how much you have in your essential CSS file.

But I would argue that if you need more than 100 milliseconds to process,

that your essential CSS is too large.

So, after we run gulp and we look at our results, great.

Looking at our new HTML file in the dist directory, we see that the link element is

replaced with an inline style element that has our essential CSS loaded in here.

That's pretty awesome.

Using this new build pipeline, we could take advantage of other really cool things

like concatenating individual CSS files into a single file.

Think about automating the process of combining a base CSS

with the UI components needed for the first page to load.

And let’s not forget our old friend SASS.

While I didn’t spend any time here talking about how to integrate SASS or LESS,

or any preprocessor into this build pipeline, it’s all possible.

Simply process the SASS to CSS and let PostCSS take it from there.

It’s pretty cool what you can do.