آموزش رفع خطای Optimize the order of styles and scripts

از سری مقالات آموزش کامل سایت GTMetrix به رفع خطاهای pagespeed سایت جی تی متریکس پرداختیم.
در مقاله قبل به آموزش رفع خطای Optimize images در سایت GTMetrix پرداختیم. امروز در بخش رفع خطاهای pagespeed به آموزش نحوه رفع ارور و خطای Optimize the order of styles and scripts خواهیم پرداخت.

حل مشکل و رفع خطای Optimize the order of styles and scripts در سایت GTMetrix در وردپرس و جوملا موجب افزایش سرعت سایت و کاهش زمان بارگذاری سایت می‌شود که بشدت روی بهبود سئوی سایت تاثیر مثبت و خوبی دارد.

خلاصه‌ای از خطای 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 در سایت GTMetrix مواجه شدید باید بدانید که چیدمان فایل های شما در سایت درست نیست و همین موضوع باعث بوجود آمدن این خطا می‌شود.

این موضوع روی بهینه سازی سرعت سایت تاثیر دارد. ترتیب درست در هنگام فراخوانی به این ترتیب است که ابتدا باید فایل های CSS و سپس فایل های JS فراخوانی شوند. به چند دلیل عمده باید ابتدا فایل های CSS فراخوانی شوند.

فایل های اصلی برای شکل ظاهری و چیدمان سایت و در کل زیبایی سایت با فراخوانی فایل های CSS شکل میگیرد. از طرفی فایل های CSS نسبت به فایل های JS سبک تر هستند. پس بهتر است که ابتدا فایل های CSS فراخوانی شوند و بعد از آن فایل های JS که کاربران بتوانند ابتدا ظاهر سایت را به درستی مشاهده نمایند.

برای انجام اینکار فقط لازم است که در هر صفحه تگ های CSS بالاتر از تگ های JS قرار بگیرند. مقاله آموزش رفع خطای Defer parsing of JavaScript را نیز مطالعه نمایید.

توضیحات گوگل در این باره:

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.

همانند مثال زیر:

url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRDZEQkZGOyIgLz48c3RvcCBvZmZzZXQ9Ijk5JSIgc3R5bGU9InN0b3AtY29sb3I6I0ZGQ0NGRjsiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIC8+PC9zdmc+);b‌ackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #D6DBFF), color-stop(99%, #FFCCFF));ba‌ckground: -moz-linear-gradient(90deg,#D6DBFF 0%,#FFCCFF 99%);bac‌kground: -webkit-linear-gradient(90deg,#D6DBFF 0%,#FFCCFF 99%);back‌ground: -o-linear-gradient(90deg,#D6DBFF 0%,#FFCCFF 99%);backg‌round: -ms-linear-gradient(90deg,#D6DBFF 0%,#FFCCFF 99%);backgro‌und: linear-gradient(90deg,#D6DBFF 0%,#FFCCFF 99%);”

<head>

<title> Title </title>

</head>

پایان مقاله حل مشکل Optimize the order of styles and scripts

سعی شده در این آموزش با موضوع آموزش رفع خطای Optimize the order of styles and scripts در سایت GTMetrix به شما در بالا بردن سرعت سایت که یکی از فاکتورهای مهم در سئو می‌باشد، کمک شایانی کنیم. این مقاله از آموزش سایت GTMetrix که مربوط به رفع خطای Optimize the order of styles and scripts در وردپرس و جوملا بود، هم به پایان رسید.

آموزش بعدی : آموزش رفع خطای Put CSS in the document head در pagespeed گوگل در سایت GTMetrix

از اینکه در این مقاله نیز با ما همراه بودید از شما عزیزان متشکریم.
درصورت بروز هرگونه سوال و مشکل می‌توانید از طریق دیدگاه‌های زیرهمین مقاله سوالات و مشکلات خود را مطرح نمایید.
کارشناسان شرکت ماکان در اسرع وقت پاسخگوی سوالات و مشکلات شما خواهند بود.

شما می‌توانید با مراجعه کردن به صفحه مقالات آموزشی ماکان، سایر مقالات ما را مطالعه کنید.

صفحه ما را در اینستاگرام دنبال کنید تا با مطالب روز در حوزه دیجیتال آشنا شوید.