درباره خطای Optimize the order of styles and scripts در سایت GTMetrix.com صحبت خواهیم کرد، هر چند مفهوم این ارور بسیار ساده است ولی گاهی رفع این مشکل به سادگی مفهومش نیست.
سلام دوستان گرامی، من پوریا آریافر نویسنده این مقاله از دوره مقالات سئو و آموزش بهینه سازی PageSpeed سایت با GTmetrix در خدمت شما هستم، می‌خواهیم در این دوره سایتی بهینه توسط ابزارهای آنلاین تست سرعت سایت مثل جی تی متریکس یا Pagespeed گوگل ایجاد کنیم. در جلسه قبل درباره رفع ارور Serve scaled images پستی قرار دادیم. در این جلسه قصد داریم درباره مشکل Optimize the order of styles and scripts و حل آن در جی تی متریکس صحبت کنیم، این خطا از خطاهای PageSpeed است. در ادامه خواهیم فهمید که چطور این خطا در جهت افزایش سرعت سایت به ما کمک میکنه، پس ما میزفا همراه باشید.
خلاصه‌ای از خطای Optimize the order of styles and scripts
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 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>
امیدوارم حل مشکل Optimize the order of styles and scripts برای شما بسیار راحت باشد، سعی کردیم در این آموزش‌ها که باعث بالا بردن سرعت سایت و در نتیجه بهبود بهینه سازی سایت و بیشتر سئو داخلی می‌شود، کمک شایانی کرده باشیم، اگر سوالی داشتید حتما در نظرات سایت میزفا مطرح کنید من پوریا آریافر کارشناس سئو پاسخگوی شما خواهم بود. این جلسه از آموزش کامل GTmetrix که مربوط به رفع ارور Optimize the order of styles and scripts بود، هم به پایان رسید در جلسه بعد به نحوه رفع خطای Put CSS in the document head در PageSpeed گوگل می‌پردازیم. با ما همراه باشید.
6 پاسخ
سلام بسیار سپاسگزارم ، مطالب شما بسیار مفید و کاربردی هستند .
فقط یک سوال آیا افزونه ای برای حل این مشکل وجود داره؟
درود بر شما، متاسفانه اطلاع ندارم ولی در کل جالب هم نیست برای چنین کارهایی از افزونه استفاده بشه.
سلام
ممنون از آموزش های مفیدتون
ارور Optimize the order of styles and scripts به شکل زیر می باشد:
The following inline script blocks were found in http://www.addresssite/ between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource. Inline script block #1 Inline script block #6 The following external CSS files were included after an external JavaScript file in http://addresssite/. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript. http://www.addresssite/media/nextend/n2-ss-5/n2-ss-5.css?1524464233ممنون میشم در جهت رفع این مشکل راهنمایی نمایید
باتشکر
سلام، در مقاله اصل موضوع توضیح داده شده.
بله توضیح داده شده
اما در جهت رفع این مشکل نمیدانم چه تنظیماتی را انجام دهم؟
راه حل کلی هم به شکل شفاف در بالا اشاره شده ولی اگر دنبال راه حل یا کدی هستید که مخصوص سایت شما باشه وجود نداره، چرا که نحوه حل این مشکل در هر سایتی متفاوت است، هر چند اصل راه حل در همه سایت‌ها یکی هست و در مقاله اشاره شده ولی نحوه پیاده سازی این راه حل کاملا بستگی به نوع کدنویسی و قالب سایت شما داره و نمیشه برای وردپرس که هزاران قالب داره یا جوملا و … که هر کدوم از این قالب ها هم به شکل های مختلفی تنظیم میشن راه حل جداگانه ای ارائه داد.