ویدئوی آموزشی خطای Optimize the order of styles and scripts در gtmetrix | کدهای JS رو عقب بنداز!

در این مطلب قصد داریم به بررسی خطای Optimize the order of styles and scripts در gtmetrix بپردازیم.این خطا که به ندرت برای سایتها قرمز میشه، چه مفهومی رو میخواد به ما انتقال بده؟

اول کدهای JS یا CSS :

در نمونه کدهای بالا، کدهای CSS بالاتر از کدهای جاوا اسکریپت قرار دارند. این ترتیب درسته. حالا اگه شما این ترتیب رو رعایت نکنین، در این مورد جی تی متریکس به خطا برمیخورید. علت چیه؟ اصولاً کدهای CSS هم از نظر سرعت و هم از نظر رابط کاربری سبک تر از جاوا اسکریپت هستند. معمولاً ما با کدهای جاوا سکریپت، تغییراتی در کدهای CSS میدیم. تغییراتی در ویژگیها، اتربیوتها، المانها. با این کدها بسیاری از جابجایی ها و تغییرات در ظاهر سایت رو میشه انجام داد. CSS هم که ظاهر کل سایت رو شکل میده.

بنابراین ابتدا باید ظاهر کلی سایت به کاربر نشون داده بشه و بعد از اون با کدهای JS جاهاییکه لازمه تغییر کنه و صحیح نیست که اول جاوا اسکریپت نوشته بشه چون ممکنه اگر بالاتر از CSS  باشه اصلا اجرا نشه و اون تغییرات اعمال نشه.

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

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 aJS file is referenced, the JS file is downloaded in parallel with them

رفع خطای Optimize the order of styles and scripts در gtmetrix در سایتهای استاتیک خیلی راحته اما در سایتهای داینامیک باید از افزونه های لازم استفاده کنین. سایتهایی که طراحی سایت اختصاصی دارند باید کدهای لازم براش نوشته بشه. برای اطلاعات بیشتر در این زمینه دوره ۸ ساعت افزایش سرعت سایت با استفاده از GTmetrix رو بهتون پیشنهاد میدم.