Tutorial on how to fix Put CSS in the document head error in GTmetrix
Another common error that we encounter when testing site speed with GTmetrix is the Put CSS in the document head error, which is related to CSS commands and codes on the site. If you pay attention to the literal meaning of this phrase, it tells us that the CSS codes we have on the site should be placed inside the HEAD section of our document, which here means the pages of the site. It means that we may want to display the appearance, especially with the help of CSS, on one of the pages. Because this work can only be done for a limited number of pages, in order not to encounter the Make fewer HTTP requests error in GTmetrix due to the increase in the size of the CSS file, we will directly place the CSS commands in this section. But what happens is that these commands are outside the head section of the site.
This tutorial from Hostfa’s knowledge base going to introduce how to fix the Put CSS in the document head error in GT Matrix; by using this tutorial, you can fix this error, and if you have the problem of not optimizing the site due to the use of CSS. If you encounter it, fix it.
Tutorial on how to fix Put CSS in the document head error in GTmetrix
As I said, this error is due to not placing the codes in the right place. The codes that we use on the site pages are part of the part that should not be visible on the site; that is, they should not be in the body part, which is related to the display of pages, and should not be visible to the visitor of this part of the site. These codes do not need to be seen, and their task is only to display the appearance of the site in the way that is determined, so they are only important for the browser, and that is why they are placed inside the head tag.
Now sometimes it happens that by mistake or for any reason, you may put the CSS codes in place other than the head tag, in which case you will encounter the Put CSS in the document head error in GT Matrix. This state may occur when the HTML document of your page is as follows.
<html> <head> <title> Hello World! </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <style> // CSS Code </style> <body> // Content </body> </html>
As you can see in the example above and in the CSS Code section, the style codes were placed in a wrong place outside the head tag. Therefore, when this situation happens, we will encounter an error in GT Matrix, and to fix it, what should be done is to move the section related to CSS into the head tag, which in the above example should be corrected as follows.
<html> <head> <title> Hello World! </title> <link rel="stylesheet" type="text/css" href="style.css"> <style> // CSS Code </style> </head> <body> // Content </body> </html>
As you can see, the CSS codes were placed before the head package tag, which will solve the Put in the document head problem in GT Matrix.
