Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
CSS has long been the focus of may poorly performing websites. But with better writing techniques, mobile-first strategies, minifying code and inlining essential "above the fold" CSS can help with load times and increase perceived performance for critical CSS.
New Terms:
OOCSS -- Object Oriented CSS, CSS structural concept pioneered by Nicole Sullivan.
SMACSS -- Scalable and Modular Architecture for CSS, book written by Jonathan Snook
CSS Shorthand -- CSS properties that let a developer set the values of multiple properties within a single CSS rule
Media Query -- CSS technique that constrains a block of CSS until conditions are true
Vendor prefix -- a tool that allows browser developers to release new CSS features before they have been standardized
Automated process pipeline -- a script that executes a series of process aimed at preparing code for production deployment
Npm -- Node Package Manager
Gulp -- a popular automated process pipeline tool written in JavaScript
Optimization Tools:
postCSS
autoprefixer
postcss-zindex
gulp-concat
clean-css
inline-source
Further Reading:
[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
You need to sign up for Treehouse in order to download course files.
Sign up