Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Front End Web Optimization Workflow !
You have completed Front End Web Optimization Workflow !
Preview
Now that our CSS is optimized well, there is one more optimization to make with our site or app: Loading our critical, or “above the fold”, CSS inline with the the HTML document itself. This allows us to reduce the need for a HTTP header request and reduce any latency that may impede your first load.
Optimization Tools
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up