یکی از خطاهای رایجی که هنگام تست سرعت سایت با GTmetrix بهش بر میخوریم با عنوان Defer parsing of JavaScript و Prefer asynchronous resources به ما نمایش داده میشه که هر دو مربوط به فایل‌های جاوا اسکریپت هست و برای حل هر دو خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در جی تی متریکس راهکار یکسانی وجود داره. وقتی با این دو ارور در جی تی متریکس مواجه میشید به این معنی هست که فایل‌های JS در سایت شما به صورت بهینه استفاده نشده و باعث شده که مدت زمان لود سایت بیشتر از حالت عادی باشه. منظور از بهینه سازی این هست که فایل‌ها در جایی شروع به لود شدن میکنند که باعث میشه مدت زمان لود صفحه بالا بره، در صورتی که اگه فایل‌ها رو بزاریم برای مراحل آخر و در فوتر اجراشون کنیم روی لود سایت تاثیر بدی نمیزارن.
در این آموزش از پایگاه دانش قصد دارم به نحوه برطرف کردن خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در جی تی متریکس بپردازم که اگه با این دو خطا مواجه شده باشید به راحتی میتونید با راهکارهای معرفی شده برطرف کنید.
آموزش رفع خطای Defer parsing of JavaScript در GTmetrix
همونطور که میدونید در تمامی سایت‌ها از فایل‌های جاوا اسکریپت برای اجرای برخی کارها در مرورگر استفاده میشه و این فایل‌ها هم معمولا نسبت به سایر فایل‌هایی که به صورت کدنویسی شده هستند حجم بیشتری دارند. مرورگر برای اینکه بتونه این فایل‌ها رو اجرا بکنه باید منتظر بمونه تا اول این فایل‌ها اجرا بشن و بعدش متناسب با همین محتوای سایت رو هم به مرور لود کرده و نمایش بده. مشکل درست در این زمان پیش میاد که بخاطر قرار گرفتن این فایل‌ها در Header باعث میشه که مرورگر ابتدا شروع به دانلود و پردازش این فایل‌ها بکنه و بعدش با رفتن به خطوط بعدی سایر قسمت‌های یک سایت رو که شامل محتوای اون هست نمایش بده. برای همین تا زمانی که فایل‌های JS لود بشن مرورگر همچنان در حال لود صفحه است و همین موضوع باعث میشه کاربران فکر کنند این سایت با کندی کار میکنه.
برای همین بهترین راهکاری که برای حل این مشکل وجود داره این هست که فایل‌های JS رو بیایم و در فوتر سایت اجرا کنیم. در این حالت ابتدا مرورگر میاد و صفحه رو به صورت کامل به کاربر نشون میده و وقتی به بخش کدهای جاوا اسکریپت که حالا در فوتر قرار گرفته رسید، متناسب با دستورت برنامه نویسی که این فایل‌ها دارند سایر بخش‌های سایت رو هم نشون میده. طی یک آزمایشی که گوگل در سال ۲۰۱۱ انجام داده برای لود هر ۱ کیلوبایت از یک فایل جاوا اسکریپت به طور میانگین ۱ میلی ثانیه زمان لازمه تا هم لود بشه و هم خونده بشه. برای همین اگر مجموع فایل‌های جاوا اسکریپت روی ۱۰۰ کیلوبایت قرار داشته باشند(که قطعا بیشتر از این میتونه باشه) مدت زمان ۲۰۰ میلی ثانیه صرف میشه که شاید به صورت عددی زیاد به نظر نیاد، اما رو سرعت لود سایت تاثیر زیادی میزاره.
رفع ارور Prefer asynchronous resources و Defer parsing of JavaScript
هر دو این خطاها با استفاده از راهکارهای مشترکی قابل حل شدن هستند و اگه یکی از این خطاها رو برطرف کنید به صورت خودکار اونیکی هم رفع خواهد شد که در ادامه به معرفی چند روش برای این کار می‌پردازم.
۱٫ قرار دادن فایل‌های 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 جوملا
۲٫ استفاده از اتربیوت‌های defer و async
استفاده از دو اتربیوت defer و async در کدهای JS باعث برطرف کردن خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در جی تی متریکس خواهد شد. وقتی از این دو اتربیوت استفاده کنید به مرورگر میگید که منتظر لود شدن کامل فایل‌های جاوا اسکریپت نمونه و همزمان با اینکه داره فایل JS رو لود میکنه سایر فایل‌ها و صفحه HTML رو هم لود بکنه که در این حالت مشکلی از نظر لود صفحه وجود نخواهد داشت. این دو نوع اتربیوت تفاوتی که با هم دارند در این هست که اگر از حالت defer استفاده کنید، مرورگر منتظر میمونه تا صفحه HTML هم لود بشه و بعد شروع به اجرای فایل JS بکنه اما در صورتی که از حالت async استفاده کنید، به محض لود کامل فایل شروع به اجرا شدن میکنه و دیگه منتظر نمیمونه که بعد از لود کامل صفحه HTML اجرا بشه. در نتیجه بهتره که از گزینه async استفاده کنید.
