یکی دیگه از خطاهای رایجی که هنگام تست سرعت سایت با 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 در جی تی متریکس برطرف خواهد شد.
استفاده بهینه از CSS برای افزایش سرعت سایت و بهبود رتبه در GTmetrix
حالا که مشکل محل قرارگیری CSS رو رفع کردیم، بد نیست به چند نکته‌ی مهم دیگه هم بپردازیم که رعایت اون‌ها باعث میشه علاوه بر رفع ارور «Put CSS in the document head»، عملکرد کلی سایتتون از نظر سرعت و بهینه‌سازی بهبود پیدا کنه.
۱. استفاده از CSS فشرده‌شده (Minified CSS)
یکی از دلایل کندی لود سایت‌ها، استفاده از فایل‌های CSS حجیم و ناخواناست. وقتی کدهای CSS رو فشرده می‌کنید (یعنی فاصله‌ها، خطوط خالی و توضیحات اضافی رو حذف می‌کنید)، مرورگر خیلی سریع‌تر می‌تونه اون‌ها رو پردازش کنه. ابزارهایی مثل CSS Minifier یا پلاگین‌های وردپرس مثل Autoptimize به راحتی این کار رو براتون انجام میدن.
۲. استفاده از CSS Critical Path
برای بهینه‌تر کردن رندر اولیه صفحه، فقط بخش‌هایی از CSS که در لود اولیه لازم هستند رو داخل تگ <style> در head قرار بدید و بقیه‌ی CSS رو به صورت فایل خارجی و در انتهای سند بارگذاری کنید. این روش باعث میشه محتوای صفحه زودتر دیده بشه و امتیاز شما در بخش First Contentful Paint (FCP) در GTmetrix بهبود پیدا کنه.
۳. بارگذاری CSS به صورت Asynchronous
اگر CSS های غیرضروری (مثل استایل‌هایی که فقط در برخی صفحات استفاده میشن) رو به صورت غیرهمزمان (asynchronously) لود کنید، سرعت بارگذاری صفحه‌ی اصلی بالا میره. برای این کار میتونید از ویژگی‌های media و onload در تگ لینک استفاده کنید:
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all';">
۴. ادغام فایل‌های CSS
اگر چند فایل CSS دارید که در همه صفحات استفاده میشن، بهتره اون‌ها رو با هم ادغام کنید تا تعداد درخواست‌های HTTP کاهش پیدا کنه. این روش به‌طور مستقیم باعث رفع یا کاهش ارور “Make fewer HTTP requests” در GTmetrix میشه.
۵. حذف CSSهای بلااستفاده (Unused CSS)
خیلی از قالب‌ها و افزونه‌ها CSSهایی رو لود می‌کنن که ممکنه اصلاً در سایت شما استفاده نشه. این فایل‌های اضافی فقط بار اضافی روی مرورگر و سرور وارد می‌کنن. ابزارهایی مثل PurifyCSS، UnCSS یا افزونه‌های وردپرسی مثل Asset CleanUp می‌تونن به‌صورت خودکار این موارد رو شناسایی و حذف کنن.
جمع بندی
ارور Put CSS in the document head فقط یکی از مواردیه که GTmetrix برای بهینه‌سازی پیشنهاد میده. اما با رعایت نکاتی مثل فشرده‌سازی، مدیریت بارگذاری و سازماندهی صحیح فایل‌های CSS میتونید عملکرد کلی سایت رو تا حد زیادی بهبود بدید. هرچه لود سایت سریع‌تر باشه، تجربه کاربری بهتر، سئوی قوی‌تر و نرخ پرش کمتر خواهید داشت.
