blog posts

Another error we encounter when testing the site’s speed with GT Metrics is titled Make JavaScript and CSS external, which is related to CSS and JS files. This error is related to the site speed test based on Google’s algorithms, and that’s why we see it in the Yslow column of GT Metrics. As you know, to use CSS and JS codes in an HTML document, we can use three methods: Inline, Internal, and External, each of which is used in a specific way, and in a way, the use of any of these methods can affect the site’s loading speed. It is related to the loading and processing of css and js files, it should be effective.

In this tutorial from Hostfa’s knowledge base, going to discuss how to fix the Make JavaScript and CSS external error in Yslow GT Matrix, by using this tutorial you can fix the Make JavaScript and CSS external error in the Yslow column.

How to fix Make JavaScript and CSS external error in gtmetrix

The three methods we have for using CSS and JS code include the following.

Now, when we type a page of a site in the browser, these codes start to be loaded in a prioritized manner. That is, for example, if you come for a specific class of template and choose a specific color or the desired font using the three methods mentioned, inside the html document there is priority with the style code that is specified as Inline. If this mode does not exist, in the next step Internal mode and finally External mode will be prioritized. Exactly the same thing will happen for JS files.

Now, when you open a site, browsers will block CSS and JS resources that are loaded externally at the first moment. Because the priority is to load the sources that are inside you and your domain is located, after the internal sources are loaded, the external source is unblocked and starts to load, and finally, when this step is completed, you will have the complete appearance of a You see the site. The bad thing that happens in this situation is the blocking and unblocking stage. Because in this period of time, although very short, there is an interruption in loading the site and the browser is still trying to load the site completely. This issue will increase the load of the site, which will result in a decrease in the speed of the site and an increase in the number of HTTP requests.

Make JavaScript and CSS external

According to Yahoo’s algorithms, this error occurred in the Yslow column, forcing you to use the External method of css and javascript codes. The reason is that in this mode you will be able to use the site’s cache and the codes that were called externally in the form of a file will be cached in the user’s browser, but in the case of internal or inline use. Hopefully this did not happen and these codes will be executed every time the site is loaded. In this case, your HTTP request does not change, but due to the presence of codes inside the HTML document, the size of the page increases and the number of codes increases. If it is external and is called separately from the file, you have the option of caching and the file is also separate.

So, if the number of coded CSS and JS lines are less in internal and inline modes, it is better to remove them and put them in a separate css and js file or merge them with other files in a more standard mode. due to the reduced page size and the possibility of using cache and Gzip compression , you will have a better loading speed So, finally, it can be said that using External mode is the best choice. by using the Minify JavaScript and CSS error correction tutorial in YSlow GTmetrix the size of these files and have a better optimization