Optimize 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