Welcome back in this section, we're going to be talking about some advanced topics in success, and
I'm going to start off with the critical render path.
What is that?
Well, we always should know how things work underneath the hood so we can make our websites as fast
and reliable as possible.
So based on what we've built in the previous section, let's look at what's happening underneath the
hood.
We are going to our website and ideally our website will be on a server and I'll show you how to do
that later on in the course for now is just our computer.
But let's pretend we have a server where our files are hosted.
When we go to our website, we'll call it cool website dotcom.
We request the HTML file.
And the browser now sees our Moffo, so it's read through this document and as it's looking through,
it notices that, oh, I need a success file here.
So it goes back, makes another request and says, hey, can you please give me a text file as well?
The server says, yep, no problem, let me grab that for you, grabs the case file and now it starts
looking at both.
The e-mail and The Cafferty File to try and figure out how the Web page should look, but then it also
notices that hold on a second, I need some fonts as well.
So it goes to this address and looks for fun.
Again, the website now asks the website that the fonts are hosted at in our case is the Google API
and it grabs the font file.
Now, here's the thing, while it's grabbing the font file, it could render the page and rendering
means displaying the website.
So it could display the website if it only has the human access, but it might not show up the text
because the text is looking for the font file.
So when we talk about the critical render path, we like to mention that success is a render blocking
file, so you won't be able to render a Web page until you receive your success.
And sometimes if you have font files, you'll also have to wait for the text to render on the page.
So keep that in mind when you build your websites, but what are some things that we can consider when
doing this so that our websites load up faster?
One is maybe to have our own font files.
Another one might be that you don't want to make your success too big.
If we had hundreds and hundreds of lines of code of access or the file gets bigger and bigger and it's
more and more that you have to transfer over the wire.
One method that people have used and you'll see often is something called magnifying your success and
if we open up a browser here.
Good morning.
Yeah, it's early in the morning that I'm filming this.
And CSFs Minifie, what it does is you can enter your success here, you can see an example over here.
So you enter this and you click Minifie.
And what Minifie does, it removes all the whitespace.
So everything is on one line, just really tiny together.
So even though it's the same success, it technically makes the file a little bit smaller so that the
number of bytes that you're sending over the Internet is a lot less.
And you'll see that technique used in JavaScript as well.
And we'll talk about that in that section.
But that is the critical render path, a path that a Web site takes to display something to the user.
I'll see you in the next one.
Bye bye.