Improve Webpage Loading Performance by sorting HEAD tags using Capo.js

[00:00] We'll optimize the loading performance of an example web page and we'll be using Capo.js. Capo is a tool which analyzes the order of elements that are being used in the head of an HTML document. We're going to use a Chrome Capo extension. So this is an example web page that is being served on localhost. After we install Capo extension we can click on the icon and this is what we see from Capo.

[00:30] So each tile represents an element that is a part of the HTML head section. After we open the console we can also see what is the actual order. Now the the hotter the color, the more red the color is, the higher priority of an element, like it should be at the top of the head section and This is what Kapo shows What is the actual order and it can tell that the title tag is the first one, which we can see over here, the meta car set is the second one, and so on and so forth. And it immediately tells us what should be the priority. The bigger the number, the higher it should be in the priorities.

[01:19] So the first one is the actual order and the other one is what should become after we optimize the web page. So let's optimize it. So The first one should be the meta carset and meta viewport. So let's make sure that this is the case. So let's move the viewport and let's just update the page.

[01:43] And all that we do is just clicking on Capo. Okay, so we can see that the dark red and the light red are already there and let's just move at the bottom. So the link which is basically a CSS asset and the link preload which is a JPG asset they basically should be put at the top so let's move them right after the title and let's see what is going to be result after this. And we can see that it's already improved. So thanks to Capo we were able to quickly improve the order of elements in our head of the HTML document.