آموزش رفع خطای Defer parsing of JavaScript در GTmetrix

آموزش رفع خطای Defer parsing of JavaScript در GTmetrix

آموزش رفع خطای Defer parsing of JavaScript در GTmetrix

آموزش رفع خطای Defer parsing of JavaScript در GTmetrix | یکی از خطاهای رایجی که هنگام تست سرعت سایت با 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

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

  1. قرار دادن فایل‌های JS در فوتر

اگر سایت شما به‌صورت HTML طراحی‌شده باشد می‌توانید با انتقال کدهایی که مربوط به لود فایل جاوا اسکریپت هستند به فوتر سایت باعث شوید که این فایل‌ها در آخرین مرحله از لود یک صفحه در مرورگر لود و پردازش کردن را شروع کنند. به همین دلیل این کدها را در بخش head قرار ندهید. برای انجام این کار باید کدهای JS که با تگ <script> در صفحات HTML فراخوانی می‌شوند را در فوتر، قبل از تگ بسته </body> قرار دهید تا اول متن‌ها، تصاویر، فونت‌ها و CSS ها لود شوند و بعد در مرحله آخر فایل‌های جاوا اسکریپت شروع به لود شدن بکنند. اما اگر از سیستم مدیریت محتوا مثل وردپرس یا جوملا استفاده می‌کنید این روش جواب نمی‌دهد. چون برخی افزونه‌ها داری فایل JS هستند و به‌صورت خودکار در هدر قرار می‌گیرند. برای اینکه بتوانید فایل این افزونه‌ها را در فوتر اجرا کنید، باید کدها را به فوتر اضافه کنید و سپس بخش کد نویسی شده لود فایل را از داخل خود افزونه بردارید.

این کار برای زمانی که افزونه‌ای آپدیت می‌شود هم باید تکرار شود، چون بعد از آپدیت شدن تمام فایل‌های افزونه آپدیت شده و تغییراتی که ایجاد می‌کنید از بین می‌روند. به همین علت باید از افزونه‌ها برای این کار کمک بگیرید که موارد زیر یکی از بهترین‌ها هستند.

  1. استفاده از اتربیوت‌های defer و async

اگر از دو اتربیوت defer و async در کدهای JS استفاده کنید باعث می‌شود خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در جی تی متریکس برطرف شد. وقتی از این دو اتربیوت استفاده کنید به‌مرورگر میگویید که منتظر لود شدن کامل فایل‌های جاوا اسکریپت نماند و هم‌زمان بااینکه فایل JS را لود می‌کند سایر فایل‌ها و صفحه HTML را هم لود کند که در این حالت مشکلی ازنظر لود صفحه وجود نخواهد داشت. این دو نوع اتربیوت تفاوتی که باهم دارند در این هست که اگر از حالت defer استفاده کنید، مرورگر منتظر می‌ماند تا اول صفحه HTML لود شود و بعد اجرای فایل JS را شروع کند اما درصورتی‌که از حالت async استفاده کنید، به‌محض اینکه فایل کامل لود شد، شروع به اجراشدن می‌کند و دیگر منتظر لود کامل صفحه HTML نمی‌ماند تا اجرا شود. درنتیجه بهتر است که از گزینه async استفاده کنید. برای استفاده از این دو اتربیوت باید مشابه نمونه زیر عمل کرده و defer یا async را بعد از آدرس فایل وارد کنید.

  &gt;script src="demo-defer.js" defer&gt;&lt;/script&lt; &lt;script src="demo-async.js" async&gt;&lt;/script&gt;
 
, , ,
Share:

ارسال یک پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

برای امنیت، استفاده از سرویس reCAPTCHA گوگل مورد نیاز است که موضوع گوگل است Privacy Policy and Terms of Use.

I agree to these terms.