اگر از همراهان همیشگی پرشین تولز هستید، حتماً مقاله قبلی در مورد رفع خطاهای سایت به کمک GTmetrix را خوانده‌اید! در این مقاله هم قصد داریم به بررسی ادامه این بحث بپردازیم تا بتوانید با افزایش سرعت سایت، وضعیت سئوی سایت خود را بهبود ببخشید و رضایت کاربران را هم جلب کنید.
رفع خطای Put CSS in the document head در GTmetrix
یکی دیگر از خطاهای رایجی که هنگام تست سرعت سایت با GTmetrix با آن برخورد می‌کنیم، ارور Put CSS in the document head است که مربوط به دستورات و کدهای CSS در سایت می‌باشد. اگر به معنای لغوی این عبارت دقت کنید به ما می‌گوید که کدهای CSS که در سایت داریم را باید در داخل بخش هدر داکیومنت خود که در اینجا منظور همان صفحات سایت است، قرار دهیم! یعنی ممکن است ما داخل یکی از صفحات قصد داریم که ظاهر را با شکل خاصی به کمک CSS نمایش دهیم. زیرا این کار صرفاً برای چند صفحه محدود ممکن است انجام گیرد، برای اینکه با خطای Make fewer HTTP requests در GTmetrix بخاطر اضافه شدن حجم فایل css مواجه نشویم، مستقیماً دستورات CSS را در این بخش قرار می‌دهیم. اما اتفاقی که می‌افتد، این است که این دستورات خارج از بخش head سایت هستند.
همان‌طور که گفتم این خطا بخاطر قرار نگرفتن کدهای 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 در جی تی متریکس برطرف خواهد شد.
رفع خطای Remove query strings from static resources در GTmetrix
یکی دیگر از خطاهایی که بسیار در هنگام تست سرعت سایت با آن مواجه خواهید شد، خطای Remove query strings from static resources در GTmetrix است. این پارامتر برای درخواست‌هایی است که به صورت query strings ارسال می‌شود و شامل کاراکتر ? هستند.در انتهای فایل‌های JS و CSS که به صورت مقدار VER نمایش داده خواهد شد. وجود همین Query String ها باعث می‌شود که در سورس‌هایی که در انتهای آدرس خود علامت سوال قرار دارد، کش نشوند و علاوه بر آن روی شبکه توزیع محتوا CDN و مرورگرهای دیگر هم کش نخواهند شد. پس همین موضوع باعث می‌شود که نه تنها حجم صفحات‌تان بالا می‌رود، بلکه با خطای دیگه Leave Browser Caching هم مواجه می‌شوید.
حتما این سوال به ذهن شما رسیده است که اصلاً query strings چیست و چرا باید از آن برای افزایش سرعت سایت استفاده کنیم. همان‌طور که در بالا اشاره کردیم، وجود query strings باعث می‌شود که فایل‌های مورد نظر کش نشده و در هر بار بازدید کاربر از سایت از سمت سرور لود شوند. برای همین باعث بالا رفتن سرعت لود سایت و افزایش تعداد درخواست HTTP هم می‌شود اما در مقابل وجود query strings هم باعث می‌شود تا توسعه دهندگان بتوانند تغییراتی رو که در فایل‌ها اعمال می‌کنند را بدون کش شدن زودتر آپدیت کنند! مثلاً وقتی شما قالب وردپرس خریداری می‌کنید و چند روز بعد آپدیتی براش منتشر می‌شود، تا زمانی که فایل‌ها به صورت کش‌شده ذخیره هستند، کاربران قبلی که این فایل‌ها برای آن‌ها کش شده همچنان با ظاهر قبلی سایت برایشان بالا می‌آید. برای همین بهتر است کاری کنیم که query strings را خودمان مدیریت کنیم و با تعریف بازه زمانی هر زمان که نیاز بود فایل‌های کش شده رو از حالت کش خارج کرده و آپدیت کنیم. در این صورت هر زمان که آپدیتی روی فایل‌ها انجام دادید، به راحتی می‌توانید از طریق سرور فایل را مجدداً برای مرورگر بازدیدکننده‌ها ارسال کنید تا آپدیت شده و در حالت کش برایشان لود نشود!
برای رفع مشکل Remove query strings from static resources در وردپرس دو راهکار پیش روی شما است که شامل استفاده از افزونه و کدنویسی است. در صورتی که تمایل به استفاده از افزونه دارید، می‌توانید از افزونه Remove Query Strings استفاده کنید. بعد از فعال کردن افزونه نیاز به انجام کار دیگری ندارید و منو و تنظیمات خاصی هم به سایت شما اضافه نخواهد شد. تنها کافی است افزونه وردپرس را در سایت خود فعال نگه دارید تا تنظیمات بر روی سایت شما اعمال شود. علاوه بر این اگر از افزونه wp rocket هم استفاده می‌کنید قادر هستید، با استفاده از تنظیمات افزونه این قابلیت رو در وردپرس فعال کنید.
اگر اهل افزونه نیستید و نیاز به رفع مشکل Remove query strings from static resources با استفاده از کدنویسی دارید، در مقاله بعدی به بررسی آن می‌پردازیم! همراه ما باشید.
