When a browser loads and HTML page, it starts from top of the HTML and

works down towards the bottom.

As it finds assets along the way, like CSS or JavaScript, it will load them in.

Any CSS should be linked in the document head, so

that it can be parsed immediately.

If CSS is loaded after the HTML, then there will be a lot of visual popping,

because the browser will have to render the page once with out CSS,

and once with CSS.

Fortunately, that's one thing we don't have to worry about because

our CSS is all ready at the top.

Next, we should avoid using the CSS at import rule.

This is a special CSS rule that allows us to load one CSS document into another.

We should avoid this because the imported CSS is discovered

only after the CSS style sheet, with the import rule, has been parsed.

Which introduces more round trips from the browser to the server.

Lets take a look.

So if I open the CSS folder here.

And I click on main.css and scroll down to the bottom.

You can see we have an @import rule here and that's not good.

We should never use @import.

And it's importing custom-popup.css.

So let's click on that.

And it looks like it's just loading in some CSS that helps us style

that jQuery plugin that we're using.

So let's just copy all of that.

And we'll just delete this import rule, and

then paste it in and format it a little bit.

And then we can save that file.

And with custom-popup.css, well we can just delete it,

because we already have that in main.css.

Next, when loading any asset like fonts, for example,

we should try to use hosted services.

There's three good reasons for this.

First, it's certainly possible to use our own font files on CSS, but

using a hosted service like Google Fonts means that you'll get the speed and

reliability of Google, which is often even faster and

more reliable than any web host you can buy.

Second, every browser has a limit on the number of concurrent HTTP

connections per server so

the more things we can get from other servers, the faster our page will load.

Larger websites will use what's called a content delivery network,

or CDN, to load files from multiple hosts and servers all at once.

But that's more than what we need for these lessons.

Still, using a hosted resource like Google Fonts will effectively do the same thing.

And third, when using hosted assets like this, it also means that

users might have already downloaded them on another website, and

the browser is able to intelligently reuse the common files.

If you look at the code, you'll notice we're already using Google

fonts on this website, and most websites do use hosted services now.

But if you come across an older project that's self-hosting fonts,

it's a good thing to know.

There is still one problem with our font include though,

we're including more font variations than we're actually using.

So, let's take a look at our fonts and

then track them down in Google fonts, to reinclude them.

So let's open up index.html here.

And just from this URL I can see we're using two fonts.

So we're using this Changa One and then we're using Open Sans.

And for Open Sans, it's followed by a colon and

all of these different font variations.

And we're not actually using all of these, we're just using 400 and 800.

Now, I could just edit this URL, but I'd like to go

to Google Fonts to show you how to do this when you're including your font.

So, let's go to google fonts, I'll just, google it here,

it's at google.com/fonts, and

first we need to grab changa one, there it is, I'll click add to collection,

and then we need to grab open sans, I'll add that to our collection.

And now, Let's click on use, down at the bottom.

And for Changa One, we just need that Normal 400 size.

For Open Sans we need the 400, but we also need this extra bold 800,

because we're using that in our header.

So now, I scan scroll down here and

you'll see that it has the proper include code, with just 400 and 800 for open sans.

So let's copy that.

We'll go over to our work space, and we'll paste that in to index.

And then we're also using this font on other pages,

because it's used in the header.

So let's go to contact.

Paste it in there and save it and

then we'll go to about and paste it in and save it there.

Great. So

once again lets check how we did with performance using the network tab.

So I'm going to.

Go to my site here and I'll open up the network tab and refresh the page.

And not much has changed, but we're at 19 requests,

212 kilobytes, and 270 milliseconds.

So, just about the same, and even when not much has changed,

it's still a good thing, because it means we didn't make performance any worse.