رفع خطای Optimize the order of styles and scripts در gtmetrix

رفع ارور Optimize the order of styles and scripts
رفع خطای Optimize the order of styles and scripts

درباره خطای 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

نام: Optimize the order of styles and scripts
نوعJS/CSS
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 95%

 

رفع خطای Optimize the order of styles and scripts
رفع خطای Optimize the order of styles and scripts

 

 

خطای 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 گوگل می‌پردازیم. با ما همراه باشید.

فیلم آموزشی افزایش سرعت سایت با gtmetrix
فیلم آموزشی افزایش سرعت سایت با gtmetrix
پوریا آریافر
اولین کسب و کار آنلاین خودم رو در فیسبوک راه‌اندازی کردم، سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال رو داشتم. بعد اینکه فیسبوک خالی از کاربر ایرانی شد وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت رو دریافت کردم، در حالی که نمره بالا گرفتم ولی کسی به دلیل به خطر افتادن موقعیت شغلی خودش به عنوان کارآموز منو قبول نمی‌کرد، بعدش با شروع دوران خدمت سربازی، مسئول بهینه سازی یک سایت خبری معتبر شدم و سئو یاد گرفتم. در ابتدای سال ۲۰۱۴ تونستم از رتبه ۱۵۰۰۰ به ۴۰۰ الکسا نزدیک کنم، اون زمان الکسا خیلی مهم بود. وارد دانشگاه شدم، به دلیل عدم علاقه به دانشگاه سعی کردم زودتر تمومش کنم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، توی دانشگاه هر کسی منو میدید یاد سئو میوفتاد، در همون سال آخر دانشگاه بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو رو داشتم، که به مجتمع فنی فروختم تا بتونم تمرکز رو فقط بر روی عشق خودم یعنی سئو بذارم، وقتی کانال تلگرام فروختم حس پرواز بهم دست داد، هرچند درآمد چندین میلیون ماهانه رو از دست دادم ولی دوباره باید مثل گذشته با پوستی نو یک فصلی نو رو میساختم. در این چندین سال فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌گرفته، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کردم. در اکثر ابزارهای کاربردی گوگل تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری رو یادگیری و یاددادن می‌دونم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شد تونست چنین بستر مناسبی رو برام فراهم کنه. همینطور در حال حاضر مدیریت یک تیم ۱۰ نفری از جوانان فعال و پرانگیزه رو در میزفا به عهده دارم. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم …
لیست آموزش GTmetrix نسخه جدید

6 نظر

6 پاسخ

  1. سلام بسیار سپاسگزارم ، مطالب شما بسیار مفید و کاربردی هستند .
    فقط یک سوال آیا افزونه ای برای حل این مشکل وجود داره؟

    1. درود بر شما، متاسفانه اطلاع ندارم ولی در کل جالب هم نیست برای چنین کارهایی از افزونه استفاده بشه.

  2. سلام
    ممنون از آموزش های مفیدتون
    ارور 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

    ممنون میشم در جهت رفع این مشکل راهنمایی نمایید

    باتشکر

      1. بله توضیح داده شده
        اما در جهت رفع این مشکل نمیدانم چه تنظیماتی را انجام دهم؟

        1. راه حل کلی هم به شکل شفاف در بالا اشاره شده ولی اگر دنبال راه حل یا کدی هستید که مخصوص سایت شما باشه وجود نداره، چرا که نحوه حل این مشکل در هر سایتی متفاوت است، هر چند اصل راه حل در همه سایت‌ها یکی هست و در مقاله اشاره شده ولی نحوه پیاده سازی این راه حل کاملا بستگی به نوع کدنویسی و قالب سایت شما داره و نمیشه برای وردپرس که هزاران قالب داره یا جوملا و … که هر کدوم از این قالب ها هم به شکل های مختلفی تنظیم میشن راه حل جداگانه ای ارائه داد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=