در این مقاله قصد داریم درباره مشکل Optimize the order of styles and scripts و حل آن در جی تی متریکس صحبت کنیم و بررسی کنیم که چطور این خطا در جهت افزایش سرعت سایت به ما کمک میکند.
خلاصه‌ای از خطا Optimize the order of styles and scripts
نام: Optimize the order of styles and scripts
نوع: JS/CSS
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 95%
خطای Optimize the order of styles and scripts چیست؟
خطا Optimize the order of styles and scripts که به فارسی می‌توان گفت چیدمان صحیح فایل‌های CSS و JavaScript ترجمه کرد، زمانی اتفاق می‌افتد که فایل‌های CSS و JS سایت شما به ترتیب اصول لود نشده باشند. بنابراین سایت جی تی متریکس با برخورد به این ارور به شما می‌گوید که در جهت بهینه سازی سرعت سایت خود و همچنین نحوه صحیح قرارگیری المان‌ها، باید ابتدا فایل‌های CSS (فایل‌های استایل دهی) را قبل از فایل‌های JS (فایل‌های جاوا اسکریپت) فراخوانی کنید.
گاهی ممکن است توسط کدهای JS بخواهید تغییراتی در کدهای CSS ایجاد کنید و به این ترتیب باید اول کدهای CSS لود شوند، و اصولا کدهای CSS سبک‌تر هستند و حتی از نظر تجربه کاربری اولیت بیشتری برای سریع لود شدن نسبت به JS دارند، چرا که ظاهر اصلی سایت و چیدمان یک صفحه برعهده کدهای CSS است. کدهای CSS از این جهت هم مهم‌تر هستند تا کاربران را سریع از دست ندهیم و بعد از درگیر شدن کاربر با سایت، می‌توان فایل‌های نسبتا سنگین‌تر JS را لود کرد.
به زبان ساده در یک صفحه از سایت تگ‌های مربوط به استایل (CSS) باید بالاتر از تگ‌های مربوط به جاوااسکریپت (JS) قرار گیرد.
توضیحات گوگل در این باره:
Because JavaScript code can alter the content and layout of a web page, the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed. However, more importantly for round-trip times, many browsers block the downloading of resources referenced in the document after scripts until those scripts are downloaded and executed. On the other hand, if other files are already in the process of being downloaded when a JS file is referenced, the JS file is downloaded in parallel with them.
همانند مثال زیر:
<head> <title> Title </title> <style> // CSS Code </style> <script type="text/javascript"> // javascript Code </script> </head>
مطلب قبلی : رفع خطای Put CSS in the document head در gtmetrix