چگونه خطای Defer Parsing of JavaScript در وردپرس رفع کنیم

خطای Defer Parsing of JavaScript در جی تی متریکس به علت حجم بالای فایل های JS به نمایش در می آید و از کاربر می خواهد با بهینه سازی فایل ها زمان لود صفحه را حداقل به وضعیت عادی برساند.

با وجود اینکه این خطا مشکلی را در سایت ایجاد نمی کند اما افزایش زمان لود سایت باعث از دست دادن کاربران می شود و نرخ بانس ریت سایت را بیشتر می کند.

خطای Defer Parsing of JavaScript هم از جمله پیشنهادهایی است که در GTmetrix به کاربران پیشنهاد می شود و باید به کمک به تعویق انداختن کدهای جاوا اسکریپت مشکل سایت را حل کرد.

در این مقاله می خواهیم به کمک سه راهکار خطای Defer Parsing of JavaScript را رفع کنیم و سرعت بهتری برای صفحات سایت داشته باشیم.

• چرا خطای Defer Parsing of JavaScript در وردپرس اتفاق می افتد
• کدام کدهای جاوا اسکریپت را می توانیم به تاخیر بندازیم
• چه تفاوتی در استفاده Defer با Async وجود دارد
• چگونه خطای Defer Parsing of JavaScript در وردپرس رفع کنیم

چرا خطای Defer Parsing of JavaScript در وردپرس اتفاق می افتد

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

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

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

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

فایل های جاوا اسکریپت هم باید به طور کامل شناسایی شوند و قسمت های مهم تر که برای ارائه صفحه ضروری هستند را از بخش های دیگر مثل اسکریپت خاص را تفکیک کرد و آنها را برای سرعت بخشیدن به صفحات سایت به تعویق انداخت.

در ادامه به راه هایی خواهیم پرداخت که کمک می کند اسکریپت های لازم را برای ارائه صفحه تشخیص دهید.

کدام کدهای جاوا را می توانیم به تاخیر بندازیم

معمولا وب سایت های نسبتا کوچک از حداقل های جاوا اسکریپت استفاده می کنند، بنابراین به احتمال بالا هیچ اسکریپت غیرضروری برای لود صفحه ندارند اما برای سایت های پیچیده نیاز است تا همه اسکریپت های روی سایت را دقیقا تجزیه و تحلیل کنید و موارد غیر ضروری را به تاخیر بندازید یا به اصطلاح Defer کنید.

یکی از راه های این تجزیه و تحلیل ها حذف یک به یک اسکریپت های سایت و بررسی هرگونه خطا در کنسول گوگل هنگام لود صفحه است. به طور کلی این روش نیاز به دانش کافی در مورد کدهای جاوا اسکریپت دارد و باید از روش ساده تری این مورد را حل کرد.

بهترین روش ارزیابی اسکریپت ها استفاده از خود ابزار جی تی متریکس است. کافیست در این ابزار تست سرعت آدرس وب سایت خود را وارد کنید وبعد از مرور شدن سایت، وارد تب ( PageSpeed ) شوید. با وارد شدن در قسمتDefer parsing of JavaScript می توانید لیستی از اسکریپت های غیرضروری را در طول رندر را مشاهده کنید.

چه تفاوتی در استفاده Defer با Async وجود دارد

اگر ویژگی Async را به کد جاوا اسکریپت اضافه کنید مرورگر اسکریپت ها را بارگیری نمی کند و ابتدا بارگیری منبع را شروع می کند. در زمان بارگیری منابع تجزیه HTML را ادامه می دهد. در مثال زیر ، به عنوان نمونه می توانید اضافه کردن ویژگی Async را به یک تگ اسکریپت مشاهده کنید.

<script src="path/to/script" async></script>

در حالت دوم ویژگی Defer به کد اسکریپت اضافه شده است. این ویژگی به مرورگر می گوید تا زمان بارگیری کامل تجزیه صفحه منابع را بارگیری نکند. بعد از تمام شدن تجزیه و تحلیل و ارائه ، مرورگر لیستی ار اسکریپت های معوق را که قبلا با آن رو به رو شده را آپلود می کند.

کد اسکریپت نمونه زیر نشان می دهد که کد HTML همراه ویژگی Defer اجرا شود.

<script src="path/to/script" defer></script>

تفاوت اصلی بین ویژگی Defer و Async زمان لود منابع

اگر دو اسکریپت A و B داشته باشید، B بعد از A ظاهر می شود، B وابستگی به A دارد اما A به طور قابل توجهی از B بزرگتر است. حال اگر :

• از ویژگی Acync استفاده کنید B قبل از A بارگذاری می شود اما این لود را به پایان می رساند و سپس A اجرا می کند که منجر به خطا می شود، چون B در غیاب A اجرا شده است.
• از ویژگی Defer استفاده کنید در انتها A در حین آپلود B بارگیری می شود و خطایی ایجاد نمی کند.

البته اگر سایت شما چند اسکریپت بیشتر ندارد تفاوت چندانی بین Acync و Defer نمی کند، می توانید از هر دوی آنها استفاده کنید.  

در ادامه به روش های ممکن برای به تعویق انداختن کد های جاوا اسکریپت در در وردپرس بحث خواهیم کرد.

چگونه خطای Defer Parsing of JavaScript در وردپرس رفع کنیم

برای رفع خطای Defer Parsing of JavaScript در وردپرس، به تعویق انداختن کدهای جاوا اسکریپت مراحل زیر را طی کنید.

1.  فایل functions.php را ویرایش کنید

معمولا در وردپرس اسکریپت ها را مستقیما از طریق HTML اضافه نمی کنیم و به کمک توابع داخلی خود وردپرس درخواست منابع لازم را برای مرورگر ارسال می کنیم.

پس اگر بخواهیم یک ویژگی Async یا Defer را به هر یک از اسکریپت های خود اضافه کنیم باید عملکرد زیر را به فایل functions.php قالب خود اضافه کنیم.

add_filter('script_loader_tag', 'add_defer_tags_to_scripts');
function add_defer_tags_to_scripts($tag){
    # List scripts to add attributes to
    $scripts_to_defer = array('script_a', 'script_b');
    $scripts_to_async = array('script_c', 'script_d');
 
    # add the defer tags to scripts_to_defer array
    foreach($scripts_to_defer as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' defer="defer" src', $tag);
    }
 
    # add the async tags to scripts_to_async array
    foreach($scripts_to_async as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' async="async" src', $tag);
    }
     
    return $tag;
 }

فقط نباید فراموش کنید که قبل از اضافه کردن ویژگی های Defer و Async باید در کد های اسکریپت قرار دهید تا وردپرس بتواند به آن دسترسی داشته باشد.

add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_custom_js() {
    wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js');
    wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js');
    wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js');
    wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js');
}

2. از افزونه استفاده کنید

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

افزونه ی Async JavaScript کمک می کند تا کدهای جاوا اسکریپت سایت را به تعویق بندازید. استفاده از این افزونه رایگان است و با بیش از 100.000 نصب فعال در دسترس کاربران وردپرسی است.

برخی از ویژگی های افزونه Async JavaScript  :

• به دلیل اینکه Async یک ویژگی جدید در HTML5 است فقط در مرورگر های کروم، فایرفاکس، سافاری و اپرا قابل اجرا می باشد.
• کاربری بسیار ساده ای دارد.
• طراحی خوبی دارد و درتمام سایت ها قابل اجرا است.
• پیش نمایش ها را با تنظیمات مختلفی ارائه می کند.
• در کاهش زمان بارگذاری سایت بسیار موثر است.

برای فعال کردن این افزونه کافیست وارد گزینه Enable Async JavaScript در قسمت تنظیمات افزونه سایت شوید در بخش روش ها ( Method ) یکی از دو روش Async یا Defer را انتخاب کنید.

همچنین برای گزینه های پیشرفته تر به پایین صفحه تنظیمات بروید اسکریپت هایی که می خواهید را با تگ Async یا Defer همراه و در لیست وارد کنید سپس آن ها را به تعویق بندازید.

یا با ایجاد یک لیست اسکریپت های اضافی را مشخص وحذف کنید. البته این افزونه به شما امکان می دهد تا با انتخاب افزونه وقالب های در یک لیست هرگونه تغییر یا تحولی را در این افزونه حذف کنید و به حالت اولیه برگردانید.

افزونه Autoptimize

افزونه Autoptimize بیش از 1 میلیون نصب فعال دارد ، امتیاز 4.7 را در میان کاربران بدست آورده و می تواند حافظه کش اسکریپت ، استایل و کد CSS های وارد شده را ذخیره کند.

برای تصاویر با حجم زیاد ( lazy load ) بارگذاری کند داشته باشد ، فونت های گوگل را بهینه کند و با ارائه یک AAPI در دسترس هر نیاز خاص را در سایت به صورت خودکار تنظیم کند.

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

بنابراین امکان تعویق کدهای جاوا اسکریپت یکی از مواردی است که می توانید با این افزونه پرقدرت انجام دهید. برای شروع در تنظیمات افزونه گزینه های Autoptimize را بررسی کنید اسکریپت های غیرضروری را با کمک Defer یا Async ( وارد تب Extra شوید اسکریپت هایی که در نظر دارید را با ویژگی Async همراه کنید ) به تاخیر بیاندازید.

اگر خطای دیگری در پیج اسپید گوگل مشاهده کردید مقاله آموزش رفع خطاهای پیج اسپید کمک می کند تا موارد دیگری را در ابزار GTmetrix برطرف کنید.

پایان

با وجود اینکه سرعت سایت از اهمیت بالایی برخوردار است بنابراین باید به خطای Defer Parsing of JavaScript توجه ویژه ای داشت.

معمولا چنین خطاهایی در GTmetrix برای اهمیت در بارگذاری صفحات سایت و تجربه کاربری نمایش داده می شود، رعایت آن که کمک می کند سئو سایت بهبود پیدا کند وکاربران بیشتر جذب سایت شوند.

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