For this project, the more simple you can do this project,
the better off it is.
I suggest just inlining the whole CSS file.
Honestly, like, if you're having trouble trying to figure out which CSS is
critical, which CSS is not critical, that's, it's, the idea is like, for
us to know what Google's actually looking for, you either need to use some
sort of package, like a Grunt package or a Bower package,
that people have programmed, and they've done the research already to figure out
which elements of this HTML are critical for rendering above-the-fold content.
Instead of you just having to actually just guess and
pick what type of elements and calls are critical.
So I really just recommend, inline your entire CSS, minify it,
and you should be fine, to help you deal with render blocking content.
And, again, using JavaScript to load CSS,
make sure that you're following the right instructions.
There are, if you have more questions about how to implement the JavaScript
to load the CSS, post that.
Post your code on Piazza so all of us can actually look at the code and
see how you're doing that inject JavaScript.
There could be a some sort of implementation issue that you may be
having that prevents you from successfully loading the JavaScript
after everything's been loaded.
Again, another tip is to actually put the CSS
at the bottom of the page rather than at the top,
because then that will actually help you go ahead and,
that will get rid of the render blocking content.
because, remember, in your class, the browser downloads the HTML code.
It then goes and gets, it does a get request to actually
get the CSS and the JavaScript file in your header tag.
So, and
then it waits for all the CSS and the JavaScript to load and do their magic.
Why don't you just put everything at the bottom of the HTML page?
That actually will help with the render blocking as well.
Inlining is basically, you're actually, now we're in the mindset of,
okay, how can I create production code.
We're not in development code anymore, like in project one and project two.
because where we force you to follow a very strict style.
Make sure the code is very neat, nice, and organized.
But this time, often in the real world,
developers will have development code which is nice and
pretty, and then production code which is very, very ugly.
[LAUGH] So, basically, inlining gets rid of all the extra spaces,
blank spaces, new line characters.
Anything that doesn't pertain to the actual code itself.
So basically, I have this whole page of code, I inline it, and
I actually minify it, I actually get rid of all the spaces and
extra characters into one single long line.
And you cannot read it.
And then you're inlining it, you're actually putting the CSS in that code
inside the site, because, again, our goal is create production code.
So mobile devices, devices that doesn't have that
high Internet speed could effectively download your
site as fast as possible and then they could use your site as fast as possible.
We're going for one second loading time, that's the ideal.
Or else, if it takes two to three seconds to load,
you start getting impatient.
>> Yep.
>> And you would not want to do that for our users.
>> Absolutely. And essentially, by removing those extra
spaces and new line characters, we are reducing the size of the file.
>> Yeah.
So you're reducing the critical sizes of your file as well.
That's actually critical as well.
>> So we don't want anything that's not useful.
We don't want browser to download anything that's not useful.
>> Exactly.
>> Or that's not relevant.
>> Yeah. >> And just whatever we need,
minimum amount of downloading.
>> Yeah. >> That improves the speed a lot.
>> Yeah, that improves the speed of your websites a lot.