Tutorial on how to fix the Avoid CSS @import error in GTmetrix
Another error that you may encounter when testing site speed with GTmetrix Avoid CSS @import . In fact, it cannot be said that this message indicates an error, but you are told to try to avoid importing a file in other files in this way and use the standard method. In Persian language sites, we have to use Persian fonts, because our site will be changed by changing the font. Some people mistakenly call the font they want in the same HTML page using @ import, which is wrong.
In this article from Hostfa’s knowledge base, I am going to discuss how to fix the Avoid CSS @import error in GT Matrix. Using this tutorial, you will learn how to call the files that you are going to use on the pages.
Tutorial on how to fix the Avoid CSS @import error in GTmetrix
If you have followed the GTmetrix tutorial series in Hostfa, in the Enable Keep Alive error tutorial we saw that in order for the site to load faster, it is better to load files with the same format such as css., js., images, etc. at the same time. start loading and do not send these files from the server to the browser one by one.
Well, now, when we come and call a file on the page using the @import , until the initial file which is complementary to the subsequent files and the second files are called in it is not loaded and the second files are loaded, this will cause It is possible that after loading the initial file, the files that are called in this file will start to load again. For this reason, the number of HTTP requests increases and the server must respond to the browser’s request again and send the files to the browser again so that the page is fully loaded. For example, if we want to call the style file in this way somewhere, we use the following mode.
@import url("site.com/css/style.css")
Therefore, it is better to avoid this method and directly make the files start downloading simultaneously and in one line. Not that a file is dependent on other files that won’t start loading until that file is loaded. For this purpose, meta tags can be used, for example, the following code can be used.
<link rel="style.css" href="style.css" type="text/css">
This is the standard mode and when we use this mode, parallel loading will actually happen and at the same time the dependent files that were called will also start to be downloaded. In this case, you won’t be faced with multiple loadings and site speed drops.
