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

یکی از خطاهای رایجی که بسیاری از وب مستران در زمان ارزیابی سایت خود با فاکتور‌های جی تی متریکس با آن مواجه می‌شوند خطای Defer parsing of JavaScript است. همان‌طور از نام این خطا مشخص است، مربوط به فایل‌ها یا کدهای جاوااسکریپت وب سایت است.

می‌توان بدون شک گفت جاوا اسکریپت جز ۵ زبان برنامه نویسی برتر دنیا به شمار می‌رود و وجود آن در هر وب سایتی به ویژه در سمت کاربر وب سایت ضروی است. امروزه دیگر کم تر سایتی پیدا می‌شود که از جاوا اسکریپت یا فریم ورک‌های آن مانند جی کوئری, نود جی اس, ری اکت و … استفاده نکند.

‌

‌

چگونگی استفاده از کدها در بهینه سازی وب سایت بسیار مهم است و باید در نوع کدنویسی کدهای جاوا اسکریپت نیز نهایت دقت و حساسیت را به خرج داد. زمانی که فرد یا وب مستری در وب سایت جی تی متریکس با خطای Defer parsing of JavaScript روبرو می‌شود این معنی را باید از وب سایت جی تی متریکس دریافت کند که فایل های دارای کد های js یا همان جاوا اسکریپت و فریم ورک‌های آن به صورت بهینه و استاندارد نوشته و استفاده نشده است که نتیجه آن بالا بردن سرعت بارگذاری و معطلی کار هنگام لود شدن صفحه است.

‌

اگر در وب سایت جی تی متریکس با خطای Prefer asynchronous resources مواجه شدید می‌توانید با همین روشی که در این مقاله آموزش می‌دهیم، آن را حذف نمایید.

‌

ارور Defer parsing of JavaScript چیست؟

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

زمانی که مرورگری قرار است یک وب سایت را نمایش دهد باید قبل از اجرا وب سایت منتظر بماند تا تمامی کدهای جاوا اسکریپت لود شده و پس از آن به مرور دیگر محتوای وب سایت بارگذاری شود.

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

‌

‌

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

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

طی آماری که از سمت گوگل بعد از یک آزمایش در سال ۲۰۱۱ میلادی منتشر شد، ۱ ثانیه برای بارگذاری ۱ کیلوبایت از فایل های جاوا اسکریپت زمان لازم است. مثلا اگر لازم باشد ۲۰۰ کیلوبایت فایل جاوا اسکریپت لود و بارگذاری شود قطعا به ۴۰۰ میلی ثانیه نیازمند خواهد بود که البته ممکن است بیشتر از این هم باشد.

‌

رفع ارور Defer parsing of JavaScript

‌

‌

۱- جای‌گذاری فایل های جاوا اسکریپت در فوتر

همانطور که گفتیم انتقال فایل های جاوا اسکریپت به فوتر راه حل این مشکل است. اما چگونه؟

اگر وب سایت شما به صورت کدهای اچ تی ام ال طراحی شده باشد بایستی کدهایی که مرتبط با لود فایل های js هستند را به فوتر سایت انتقال دهید تا این فایل های js در زمان اتمام لود وب سایت، توسط مروگر شروع به پردازش و لود شدن شود. برای این کار ابتدا لازم است از عدم نوشتن یا عدم قرارگیری کدها در header وب سایت مطمئن شوید.

پس برای این کار باید تمامی کد‌های جاوا اسکریپت را در تگی با عنوان <script> ( در صفحات اچ تی ام ال کدهای جاوا اسکریپت را در این تگ می‌نویسند یا فراخوانی می‌کنند) قرار دهید و آن را قبل از بسته شدن تگ body قرار دهید. با این کار مرورگر ابتدا متون وب سایت, تصاویر و تمامی استایل‌های نوشته با css را نمایش می‌دهد و پس از بارگذاری آنان شروع به دانلود و پردازش فایل های جاوا اسکریپت می‌نماید.

اما در غیر این صورت، اگر شما از سیستم های مدیریت محتوا همچون وردپرس,جوملا و … بهره می‌برید و وب‌سایت خود را براساس این سیستم‌ها راه اندازی کرده‌اید، نمی توانید از این روش استفاده کنید.

زمانی که شما از این سیستم‌ها استفاده می‌کنید، باید آگاه باشید برخی از پلاگین‌هایی که برای رفع نیاز‌های خود استفاده کرده‌اید، کدهای جاوا اسکریپت خود را در header قرار می‌دهند. اگر شما بخواهید فایل و کدهای این افزونه را به فوتر انتقال دهید بایستی از یک افزونه یا پلاگین دیگری بهره ببرید که ۵ افزونه ای که در ادامه معرفی می کنیم از بهترین افزونه در ارتباط با Defer parsing of JavaScript هستند.

1. پلاگین wp deferred javascripts برای وردپرس
2. پلاگین autoptimize برای وردپرس
3. پلاگین Async JavaScript برای وردپرس
4. پلاگین Javascript Async and Defer در سیستم جوملا
5. پلاگین scriptsdown در سیستم جوملا

‌

۲- استفاده از ۲ متد defer و async

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

اما میان این دو اتربیوت تفاوتی وجود دارد که آن‌ها را از هم جدا می‌کند. زمانی که از اتربیوت defer استفاده می‌شود، مرورگر ابتدا فایل های html را دانلود می‌نماید و سپس فایل های js و اگر از اتربیوت async استفاده شود، سریعا پس از لود کامل صفحه وب سایت شروع به اجرا کردن و پردازش می‌کند و منتظر لود کامل کد‌های html نیست.