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
There are several guidelines and techniques that can help optimize CSS. Removing CSS imports and using hosted font services can help speed up page load times.
Concepts
- Avoid @import - Using the @import CSS rule introduces more roundtrips from the browser to the server.
- Use Hosted Services - Using hosted services is better for speed and reliability, for additional parallel HTTP connections, and for better caching.
Resources
Validation of Google Fonts
Sometimes Google Fonts don't validate properly. This is not always critical, but if you do want full validation, be sure to replace any vertical pipes | with a %7C encoding. For example, the URL in this video will validate when modified as follows:
<link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
When a browser loads and HTML page, it
starts from top of the HTML and
0:00
works down towards the bottom.
0:04
As it finds assets along the way, like CSS
or JavaScript, it will load them in.
0:07
Any CSS should be linked in the document
head, so
0:12
that it can be parsed immediately.
0:15
If CSS is loaded after the HTML, then
there will be a lot of visual popping,
0:18
because the browser will have to render
the page once with out CSS,
0:23
and once with CSS.
0:26
Fortunately, that's one thing we don't
have to worry about because
0:29
our CSS is all ready at the top.
0:32
Next, we should avoid using the CSS at
import rule.
0:35
This is a special CSS rule that allows us
to load one CSS document into another.
0:39
We should avoid this because the imported
CSS is discovered
0:45
only after the CSS style sheet, with the
import rule, has been parsed.
0:49
Which introduces more round trips from the
browser to the server.
0:54
Lets take a look.
0:58
So if I open the CSS folder here.
1:00
And I click on main.css and scroll down to
the bottom.
1:03
You can see we have an @import rule here
and that's not good.
1:07
We should never use @import.
1:12
And it's importing custom-popup.css.
1:14
So let's click on that.
1:20
And it looks like it's just loading in
some CSS that helps us style
1:22
that jQuery plugin that we're using.
1:26
So let's just copy all of that.
1:29
And we'll just delete this import rule,
and
1:33
then paste it in and format it a little
bit.
1:37
And then we can save that file.
1:39
And with custom-popup.css, well we can
just delete it,
1:42
because we already have that in main.css.
1:46
Next, when loading any asset like fonts,
for example,
1:49
we should try to use hosted services.
1:53
There's three good reasons for this.
1:56
First, it's certainly possible to use our
own font files on CSS, but
1:58
using a hosted service like Google Fonts
means that you'll get the speed and
2:03
reliability of Google, which is often even
faster and
2:07
more reliable than any web host you can
buy.
2:11
Second, every browser has a limit on the
number of concurrent HTTP
2:15
connections per server so
2:19
the more things we can get from other
servers, the faster our page will load.
2:22
Larger websites will use what's called a
content delivery network,
2:27
or CDN, to load files from multiple hosts
and servers all at once.
2:31
But that's more than what we need for
these lessons.
2:36
Still, using a hosted resource like Google
Fonts will effectively do the same thing.
2:39
And third, when using hosted assets like
this, it also means that
2:44
users might have already downloaded them
on another website, and
2:49
the browser is able to intelligently reuse
the common files.
2:53
If you look at the code, you'll notice
we're already using Google
2:58
fonts on this website, and most websites
do use hosted services now.
3:01
But if you come across an older project
that's self-hosting fonts,
3:06
it's a good thing to know.
3:10
There is still one problem with our font
include though,
3:12
we're including more font variations than
we're actually using.
3:15
So, let's take a look at our fonts and
3:20
then track them down in Google fonts, to
reinclude them.
3:22
So let's open up index.html here.
3:28
And just from this URL I can see we're
using two fonts.
3:34
So we're using this Changa One and then
we're using Open Sans.
3:39
And for Open Sans, it's followed by a
colon and
3:43
all of these different font variations.
3:49
And we're not actually using all of these,
we're just using 400 and 800.
3:52
Now, I could just edit this URL, but I'd
like to go
3:57
to Google Fonts to show you how to do this
when you're including your font.
4:03
So, let's go to google fonts, I'll just,
google it here,
4:08
it's at google.com/fonts, and
4:13
first we need to grab changa one, there it
is, I'll click add to collection,
4:16
and then we need to grab open sans, I'll
add that to our collection.
4:22
And now, Let's click on use, down at the
bottom.
4:27
And for Changa One, we just need that
Normal 400 size.
4:33
For Open Sans we need the 400, but we also
need this extra bold 800,
4:38
because we're using that in our header.
4:43
So now, I scan scroll down here and
4:47
you'll see that it has the proper include
code, with just 400 and 800 for open sans.
4:51
So let's copy that.
4:56
We'll go over to our work space, and we'll
paste that in to index.
4:58
And then we're also using this font on
other pages,
5:05
because it's used in the header.
5:08
So let's go to contact.
5:10
Paste it in there and save it and
5:12
then we'll go to about and paste it in and
save it there.
5:14
Great.
So
5:20
once again lets check how we did with
performance using the network tab.
5:21
So I'm going to.
5:26
Go to my site here and I'll open up the
network tab and refresh the page.
5:29
And not much has changed, but we're at 19
requests,
5:38
212 kilobytes, and 270 milliseconds.
5:43
So, just about the same, and even when not
much has changed,
5:47
it's still a good thing, because it means
we didn't make performance any worse.
5:51
You need to sign up for Treehouse in order to download course files.
Sign up