یکی دیگه از خطاهای رایجی که هنگام تست سرعت سایت با GTmetrix بهش بر میخوریم ارور Put CSS in the document head هست که مربوط به دستورات و کدهای CSS در سایت میشه. اگر به معنای لغوی این عبارت دقت کنید به ما میگه که کدهای CSS که در سایت داریم رو باید در داخل بخش HEAD داکیومنت خودمون که در اینجا منظور همون صفحات سایت هست قرار بدیم.
یعنی ممکنه ما داخل یکی از صفحات قصد داریم که ظاهر رو با شکل خاصی به کمک CSS نمایش بدیم. چون این کار صرفا برای چند صفحه محدود ممکنه انجام بگیره برای اینکه با خطای Make fewer HTTP requests در GTmetrix بخاطر اضافه شدن حجم فایل css مواجه نشیم، میایم و مستقیما دستورات CSS رو در این بخش قرار میدیم. اما اتفاقی که میفته اینه که این دستورات خارج از بخش head سایت هستند.
در این آموزش از پایگاه دانش قصد دارم به معرفی نحوه برطرف کردن خطای Put CSS in the document head در جی تی متریکس بپردازم که با استفاده از این آموزش میتونید این خطا رو برطرف کرده و اگه بخاطر استفاده از CSS با مشکل عدم بهینه سازی سایت مواجه شدید اونو برطرف کنید.
آموزش رفع خطای Put CSS in the document head در GTmetrix
همونطور که گفتم این خطا بخاطر قرار نگرفتن کدهای CSS در جای مناسب هست. کدهای CSS که ما در صفحات سایت استفاده می‌کنیم جزو بخشی هستند که باید در سایت قابل مشاهده نباشند، یعنی تو بخش body که مربوط به نمایش صفحات هست و بازدیدکننده این بخش از سایت رو میبینه نباشند. این کدها نیازی به دیده شدن ندارند و وظیفه‌شون فقط اینه که ظاهر سایت رو به شکلی که تعیین شده نمایش بدن، بنابراین فقط برای مرورگر مهم هستند و بخاطر همینم هست که داخل تگ head قرار می‌گیرند.
حالا گاهی اوقات پیش میاد که اشتباها یا به هر دلیلی ممکنه کدهای CSS رو داخل جایی غیر از تگ head قرار بدین که در این صورت با ارور Put CSS in the document head در جی تی متریکس مواجه خواهید شد. این حالت ممکنه زمانی رخ بده که سند HTML صفحه شما به شکل زیر باشه.
<html> <head> <title> Hello World! </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <style> // CSS Code </style> <body> // Content </body> </html>
همونطور که در نمونه بالا و در بخش CSS Code میبینید، کدهای مربوط به استایل در جای غیر مناسبی قرار گرفتند که خارج از تگ head قرار دارند. برای همین وقتی این حالت اتفاق بیفته با خطا در جی تی متریکس مواجه میشیم و برای برطرف کردنش کاری که باید انجام داد اینه که بخش مربوط به CSS رو به داخل تگ head ببریم که در مثال بالا باید به شکل زیر اصلاحش کرد.
<html> <head> <title> Hello World! </title> <link rel="stylesheet" type="text/css" href="style.css"> <style> // CSS Code </style> </head> <body> // Content </body> </html>
همونطور که میبینید کدهای CSS قبل از تگ بسته head قرار گرفتند که با انجام این کار مشکل Put CSS in the document head در جی تی متریکس برطرف خواهد شد.
