1
00:00:00,820 --> 00:00:06,370
Welcome back in this section, we're going to be talking about some advanced topics in success, and

2
00:00:06,370 --> 00:00:09,610
I'm going to start off with the critical render path.

3
00:00:09,850 --> 00:00:10,540
What is that?

4
00:00:11,570 --> 00:00:17,510
Well, we always should know how things work underneath the hood so we can make our websites as fast

5
00:00:17,510 --> 00:00:19,130
and reliable as possible.

6
00:00:19,850 --> 00:00:24,410
So based on what we've built in the previous section, let's look at what's happening underneath the

7
00:00:24,410 --> 00:00:24,700
hood.

8
00:00:25,370 --> 00:00:31,730
We are going to our website and ideally our website will be on a server and I'll show you how to do

9
00:00:31,730 --> 00:00:35,660
that later on in the course for now is just our computer.

10
00:00:36,260 --> 00:00:40,220
But let's pretend we have a server where our files are hosted.

11
00:00:40,940 --> 00:00:44,690
When we go to our website, we'll call it cool website dotcom.

12
00:00:45,170 --> 00:00:47,150
We request the HTML file.

13
00:00:49,410 --> 00:00:59,010
And the browser now sees our Moffo, so it's read through this document and as it's looking through,

14
00:00:59,010 --> 00:01:02,940
it notices that, oh, I need a success file here.

15
00:01:04,090 --> 00:01:10,770
So it goes back, makes another request and says, hey, can you please give me a text file as well?

16
00:01:11,740 --> 00:01:19,450
The server says, yep, no problem, let me grab that for you, grabs the case file and now it starts

17
00:01:19,810 --> 00:01:21,100
looking at both.

18
00:01:23,180 --> 00:01:31,220
The e-mail and The Cafferty File to try and figure out how the Web page should look, but then it also

19
00:01:31,220 --> 00:01:35,600
notices that hold on a second, I need some fonts as well.

20
00:01:36,200 --> 00:01:39,220
So it goes to this address and looks for fun.

21
00:01:39,260 --> 00:01:47,390
Again, the website now asks the website that the fonts are hosted at in our case is the Google API

22
00:01:47,420 --> 00:01:50,150
and it grabs the font file.

23
00:01:52,700 --> 00:01:59,210
Now, here's the thing, while it's grabbing the font file, it could render the page and rendering

24
00:01:59,210 --> 00:02:02,030
means displaying the website.

25
00:02:03,460 --> 00:02:10,330
So it could display the website if it only has the human access, but it might not show up the text

26
00:02:10,330 --> 00:02:14,440
because the text is looking for the font file.

27
00:02:16,000 --> 00:02:22,510
So when we talk about the critical render path, we like to mention that success is a render blocking

28
00:02:22,510 --> 00:02:28,830
file, so you won't be able to render a Web page until you receive your success.

29
00:02:29,020 --> 00:02:35,260
And sometimes if you have font files, you'll also have to wait for the text to render on the page.

30
00:02:36,510 --> 00:02:41,430
So keep that in mind when you build your websites, but what are some things that we can consider when

31
00:02:41,550 --> 00:02:44,440
doing this so that our websites load up faster?

32
00:02:44,880 --> 00:02:47,310
One is maybe to have our own font files.

33
00:02:47,550 --> 00:02:51,870
Another one might be that you don't want to make your success too big.

34
00:02:52,620 --> 00:02:58,470
If we had hundreds and hundreds of lines of code of access or the file gets bigger and bigger and it's

35
00:02:58,470 --> 00:03:01,370
more and more that you have to transfer over the wire.

36
00:03:03,150 --> 00:03:09,930
One method that people have used and you'll see often is something called magnifying your success and

37
00:03:09,930 --> 00:03:11,550
if we open up a browser here.

38
00:03:12,240 --> 00:03:12,850
Good morning.

39
00:03:12,870 --> 00:03:15,090
Yeah, it's early in the morning that I'm filming this.

40
00:03:16,540 --> 00:03:23,590
And CSFs Minifie, what it does is you can enter your success here, you can see an example over here.

41
00:03:23,590 --> 00:03:27,910
So you enter this and you click Minifie.

42
00:03:28,150 --> 00:03:32,110
And what Minifie does, it removes all the whitespace.

43
00:03:32,110 --> 00:03:35,930
So everything is on one line, just really tiny together.

44
00:03:35,950 --> 00:03:43,000
So even though it's the same success, it technically makes the file a little bit smaller so that the

45
00:03:43,030 --> 00:03:47,830
number of bytes that you're sending over the Internet is a lot less.

46
00:03:48,220 --> 00:03:51,010
And you'll see that technique used in JavaScript as well.

47
00:03:51,190 --> 00:03:53,010
And we'll talk about that in that section.

48
00:03:53,680 --> 00:04:00,760
But that is the critical render path, a path that a Web site takes to display something to the user.

49
00:04:01,990 --> 00:04:02,920
I'll see you in the next one.

50
00:04:03,400 --> 00:04:03,780
Bye bye.