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