WEBVTT 00:00.380 --> 00:03.800 Hi and welcome back to the Knowledge Portal Video series. 00:04.160 --> 00:11.210 Today we are going to talk about a very important topic as far as an engine or a performance tuning 00:11.210 --> 00:15.230 aspect is concerned, and it is called as static assets. 00:17.180 --> 00:22.700 If you take a look at a normal scenario where Nginx is acting as a reverse proxy. 00:23.780 --> 00:27.530 So here there is a web browser and there is a upstream server. 00:28.340 --> 00:32.060 A web browser is sending a get request to index.html. 00:32.480 --> 00:39.920 Now this get request will arrive to the nginx reverse proxy force and nginx will forward it to the upstream 00:39.920 --> 00:40.580 server. 00:42.110 --> 00:48.200 Now if we take a look at the index.html contents, it has two jpeg files. 00:48.230 --> 00:58.550 It has two stylesheet files and two JavaScript files along with some dynamic generated content. 00:59.600 --> 01:08.480 Now generally if a client wants to load the whole index.html, there will be in total seven requests 01:08.480 --> 01:09.740 which will be made. 01:09.770 --> 01:16.230 First one will be for index.html and the next six will be for each of this particular file. 01:17.400 --> 01:25.650 Now, this does not seem to a big issue if the amount of visitors who are coming to a website are lesser 01:25.650 --> 01:26.430 numbers. 01:26.700 --> 01:34.020 Now let's say if you have 100 visitors, then for 100 visitors, the amount of requests that will be 01:34.020 --> 01:38.850 made just to load index.html will be 700 itself. 01:39.150 --> 01:46.410 So the 700 requests will go to the Nginx server first and then the Nginx server will forward all the 01:46.410 --> 01:48.630 700 requests to the web server. 01:48.840 --> 01:56.280 So in total, if we see the amount of requests that will be passed will be around 1400, which is a 01:56.280 --> 01:57.510 very big number. 01:58.860 --> 02:05.550 Now this is one of the reasons why the static assets are generally implemented in most of the enterprise 02:05.550 --> 02:06.360 websites. 02:06.930 --> 02:08.940 Let's look into how it works. 02:10.620 --> 02:16.500 So what we generally do in static assets is the static files, which are generally Jpeg or JavaScript 02:16.500 --> 02:17.160 files. 02:17.160 --> 02:23.220 We move them from the web server or from the upstream to the reverse proxy. 02:23.910 --> 02:31.770 So essentially what will happen is when a client will send a get request to index.html, the request 02:31.770 --> 02:37.230 will be forwarded to the upstream server and this dynamically generated script will be sent back to 02:37.230 --> 02:37.980 the client. 02:38.670 --> 02:46.740 However, for the rest six requests, Enginex itself will serve the response back. 02:46.830 --> 02:52.830 So for the six requests, Nginx will not contact the upstream server at all. 02:53.160 --> 02:59.700 And this is one of the reasons why the performance overall performance of the upstream server will be 02:59.700 --> 03:03.630 good as well as the overall response time will be better. 03:05.470 --> 03:15.490 Now, this is one of the reasons why in almost all the SMEs you will find static assets are implemented. 03:16.720 --> 03:25.540 Now let me show you a log file where log file of the upstream server where static assets are not implemented. 03:25.720 --> 03:31.390 So this is a log file for a single index dot HTML get request. 03:31.390 --> 03:33.250 And this is just one page. 03:33.250 --> 03:35.740 Actually there are two three more pages. 03:35.740 --> 03:40.120 But in this particular PPT, I could not fit it all. 03:40.120 --> 03:47.020 And just from a single page you can determine on how many get requests are being made to the upstream 03:47.020 --> 03:50.170 server just to load a single index dot HTML file. 03:52.030 --> 03:59.920 However, if after we have a static asset in place, the amount of requests has gone from more than 03:59.920 --> 04:08.780 50 just to three, and this is one of the reasons why having a static assets is very, very efficient. 04:09.830 --> 04:18.590 Now Enginex is very, very good in serving static contents, and this is one of the reasons why if it 04:18.590 --> 04:25.010 is feasible, then you should always load the static files to the Nginx itself. 04:26.330 --> 04:36.620 Now let me let us go back to the browser and see on how exactly static assets can prove to be useful. 04:37.190 --> 04:45.830 So I'll open up the console developer console by pressing f2 l and let's open knowledge portal in. 04:54.560 --> 04:56.180 I'll just scroll down. 04:57.140 --> 04:57.740 Okay. 04:57.740 --> 05:04.310 And if you just look over here, the amount of requests that have been made just to load a single index.html 05:04.310 --> 05:06.500 file is 47. 05:07.860 --> 05:15.130 And in the type section itself, we can see what are the type of contents that are being fetched. 05:15.150 --> 05:18.690 So you'll have either gif or you have plain. 05:19.200 --> 05:21.450 You also have lot of image files. 05:21.450 --> 05:25.680 So PNG and some of them are JavaScript files as well. 05:25.920 --> 05:35.520 So if we look over here, around 80 to 90% of the files which have been loaded for this particular index.html 05:35.550 --> 05:37.200 are the static files. 05:37.980 --> 05:44.010 So essentially taking a look at the diagram, what we can do is we can put all of the static files in 05:44.010 --> 05:51.780 the Nginx reverse proxy itself so that the query is not made to the upstream server. 05:52.050 --> 06:00.780 And this will not only result in good performance, but overall response time back to the client will 06:00.780 --> 06:03.330 also be very, very fast. 06:04.870 --> 06:08.120 So this is it about the static assets. 06:08.140 --> 06:12.880 This lecture was just a basic introduction to static assets. 06:12.910 --> 06:20.830 We will be learning on how we can implement the static assets in the Nginx reverse proxy in the next 06:20.830 --> 06:21.490 lecture. 06:22.270 --> 06:28.780 I hope this lecture has been informative for you and I look forward to see you in the next lecture. 06:28.930 --> 06:30.310 Thanks for watching.