در این آموزش قصد دارم، به نحوه برطرف کردن خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در جی تی متریکس بپردازم. که اگه با این دو خطا مواجه شده باشید. به راحتی میتونید، با راهکارهای معرفی شده برطرف کنید.
برای خرید کلاس آنلاین اسکای روم میتوانید در این صفحه اقدام نمایید.
آموزش رفع خطای Defer parsing of JavaScript در GTmetrix
همونطور که میدونید، در تمامی سایت‌ها از فایل‌های جاوا اسکریپت برای اجرای برخی کارها در مرورگر استفاده میشه. و این فایل‌ها هم معمولا نسبت به سایر فایل‌هایی که به صورت کدنویسی شده هستند. حجم بیشتری دارند. مرورگر برای اینکه بتونه این فایل‌ها رو اجرا بکنه باید منتظر بمونه تا اول این فایل‌ها اجرا بشن و بعدش متناسب با همین محتوای سایت رو هم به مرور لود کرده و نمایش بده.
مشکل درست در این زمان پیش میاد که بخاطر قرار گرفتن این فایل‌ها در Header باعث میشه. که مرورگر ابتدا شروع به دانلود و پردازش این فایل‌ها بکنه و بعدش با رفتن به خطوط بعدی سایر قسمت‌های یک سایت رو که شامل محتوای اون هست نمایش بده. برای همین تا زمانی که فایل‌های JS لود بشن مرورگر همچنان در حال لود صفحه است. و همین موضوع باعث میشه کاربران فکر کنند. این سایت با کندی کار میکنه.
برای همین بهترین راهکاری که برای حل این مشکل وجود داره این هست. که فایل‌های JS رو بیایم و در فوتر سایت اجرا کنیم. در این حالت ابتدا مرورگر میاد و صفحه رو به صورت کامل به کاربر نشون میده و وقتی به بخش کدهای جاوا اسکریپت که حالا در فوتر قرار گرفته رسید، متناسب با دستورت برنامه نویسی که این فایل‌ها دارند سایر بخش‌های سایت رو هم نشون میده.
رفع ارور Prefer asynchronous resources و Defer parsing of JavaScript
هر دو این خطاها با استفاده از راهکارهای مشترکی قابل حل شدن هستند. و اگه یکی از این خطاها رو برطرف کنید به صورت خودکار اونیکی هم رفع خواهد شد که در ادامه به معرفی چند روش برای این کار می‌پردازم.
برای سفارش طراحی سایت به این لینک مراجعه کنید.
1. قرار دادن فایل‌های JS در فوتر
اگر سایت شما به صورت HTML طراحی شده میتونید با انتقال کدهایی که مربوط به لود فایل جاوا اسکریپت هستند در فوتر سایت کاری کنید. که این فایل‌ها در آخرین مرحله از لود یک صفحه شروع به لود شدن و پردازش در مرورگر بکنند. برای همین از قرار دادن این کدها در بخش head جلوگیری کنید. برای انجام این کار کافیه کدهای JS که با تگ <script> در صفحات HTML فراخوانی میشه رو در فوتر، قبل از تگ بسته </body> قرار بدین تا ابتدا متن‌ها، تصاویر، فونت‌ها و CSS ها لود بشن و سپس در مرحله آخر فایل‌های جاوا اسکریپت شروع به لود شدن بکنند.
اما اگر از سیستم مدیریت محتوا مثل وردپرس یا جوملا استفاده می‌کنید این روش پاسخگو نیست. چرا که برخی افزونه‌ها هستند که داری فایل JS هستند و به صورت خودکار در هدر قرار می‌گیرند. برای اینکه بتونید فایل این افزونه‌ها رو در فوتر اجرا کنید، باید کدها رو به فوتر اضافه کنید. و سپس بخش کدنویسی شده. لود فایل رو از داخل خود افزونه بردارید. این کار برای زمانی که افزونه‌ای آپدیت میشه باز هم باید تکرار بشه، چرا که بعد از اپدیت شدن کلیه فایل‌های افزونه آپدیت شده. و تغییراتی که ایجاد می‌کنید از بین میرن. بخاطر همین موضوع باید از افزونه‌ها برای این کار کمک بگیرید که موارد زیر یکی از بهترین‌ها هستند.
- افزونه wp deferred javascripts وردپرس
- افزونه autoptimize وردپرس
- افزونه Async JavaScript وردپرس
- افزونه Speed Booster Pack وردپرس
- پلاگین Javascript Async and Defer جوملا
- پلاگین JCH Optimize جوملا
- پلاگین scriptsdown جوملا
2. استفاده از اتربیوت‌های defer و async
استفاده از دو اتربیوت defer و async در کدهای JS باعث برطرف کردن خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در جی تی متریکس خواهد شد. وقتی از این دو اتربیوت استفاده کنید. به مرورگر میگید که منتظر لود شدن کامل فایل‌های جاوا اسکریپت نمونه و همزمان با اینکه داره فایل JS رو لود میکنه سایر فایل‌ها و صفحه HTML رو هم لود بکنه که در این حالت مشکلی از نظر لود صفحه وجود نخواهد داشت.
این دو نوع اتربیوت تفاوتی که با هم دارند. در این هست که اگر از حالت defer استفاده کنید، مرورگر منتظر میمونه تا صفحه HTML هم لود بشه و بعد شروع به اجرای فایل JS بکنه اما در صورتی که از حالت async استفاده کنید، به محض لود کامل فایل شروع به اجرا شدن میکنه. و دیگه منتظر نمیمونه که بعد از لود کامل صفحه HTML اجرا بشه. در نتیجه بهتره که از گزینه async استفاده کنید.
برای استفاده از این دو اتربیوت کافیه مشابه نمونه زیر عمل کرده. و defer یا async را بعد از آدرس فایل وارد کنید.
<script src="demo-defer.js" defer></script>
<script src="demo-async.js" async></script>