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

آیا تا به حال پس از تست عملکرد سایت وردپرسی خود از طریق ابزار هایی مانند gtmetrix، Google PageSpeed ​​Insights با ارور مبنی بر Defer Parsing of JavaScript مواجه شوید؟

اجرای این تغییر و به تعویق انداختن تجزیه فایل های جاوا اسکریپت، می تواند تأثیر مثبتی بر زمان بارگذاری صفحات سایت، به ویژه بازدیدکنندگان از طریق تلفن همراه داشته باشد اما درک این هشدار در ابزارهای تست عملکرد سایت ممکن است کمی دشوار به نظر برسد. در این مقاله به صورت کامل شرح داده خواهد شد که ارور Defer Parsing of JavaScript چیست و چگونه می توانید تغییرات لازم را در وب سایت وردپرسی خود برای رفع آن، پیاده سازی کنید.

آنچه در این مقاله مرور خواهد شد:

• ارور Defer Parsing of JavaScript در وردپرس به چه معنا است؟
• چگونه متوجه شوید که نیاز است تجزیه جاوا اسکریپت را به تعویق بیندازید؟
• روش های مختلف به تعویق انداختن تجزیه جاوا اسکریپت
• نحوه به تعویق انداختن تجزیه جاوا اسکریپت در وردپرس (4 روش)

ارور Defer Parsing of JavaScript در وردپرس به چه معنا است؟

اگر تا به حال سایت وردپرسی خود را از طریق Google PageSpeed ​​Insights ،GTmetrix یا سایر ابزارهای تست سرعت، بررسی کرده باشید، احتمالاً با پیشنهادی مبنی بر Defer Parsing of JavaScript مواجه شده اید. این پیشنهاد چه معنایی دارد و چرا یک فاکتور بسیار مهم در بررسی عملکرد سایت است؟

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

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

به تعویق انداختن تجزیه جاوا اسکریپت به چه معنا است؟

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

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

چگونه متوجه شوید که نیاز است تجزیه جاوا اسکریپت را به تعویق بیندازید؟

برای اطلاع از این موضوع می توانید سایت خود را از طریق GTmetrix بررسی کنید. GTmetrix به شما نمره می دهد و همچنین اسکریپت های خاصی که باید به تعویق بیفتند را فهرست می کند:

تصویر(1)

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

چند راه مختلف برای رفع ارور Defer Parsing of JavaScript وجود دارد. دو ویژگی زیر را می توانید به اسکریپت های خود اضافه کنید:

1. Async
2. Defer

هر دو ویژگی به مرورگر بازدیدکنندگان اجازه می‌دهند تا جاوا اسکریپت را بدون توقف تجزیه HTML، دانلود کنند. تفاوت در این است که Async تجزیه HTML را برای دریافت جاوا اسکریپت متوقف نمی‌کند (همانطور که به صورت پیش‌فرض انجام می‌ شود) اما به محض دریافت جاوا اسکریپت، تجزیه‌کننده HTML را برای تجزیه و اجرای اسکریپت متوقف می‌ نماید. در ویژگی Defer، مرورگر بازدیدکنندگان اسکریپت ها را در حین تجزیه HTML دانلود می کنند اما برای تجزیه آنها، تا اتمام تجزیه HTML منتظر می ماند.

تصویر زیر نحوه عملکرد این دو ویژگی را به خوبی نمایش می دهد:

تصویر(2)

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

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

نحوه رفع ارور Defer Parsing of JavaScript در وردپرس (4 روش)

برای به تعویق انداختن تجزیه جاوا اسکریپت در وردپرس، سه راه حل اصلی وجود دارد که می توانید از بین آنها انتخاب کنید:

• افزونه: چند افزونه عالی و رایگان وردپرس برای رفع ارور Defer Parsing of JavaScript وجود دارد که در ادامه به دو مورد از بهترین آنها اشاره خواهد شد.
• روش کد: اگر به کد نویسی تسلط دارید، می توانید کد سایت خود را مستقیماً ویرایش نموده و از قطعه کد Varvy (سایتی که ابزارها و اطلاعات رایگان سئو را ارائه می دهد) استفاده کنید.
• فایل functions.php: می توانید یک قطعه کد به فایل functions.php قالب خود اضافه نمایید تا به طور خودکار اسکریپت ها را به تعویق بیندازد.

1. افزونه رایگان Async JavaScript 

افزونه رایگان Async JavaScript یک راه ساده برای به تعویق انداختن تجزیه جاوا اسکریپت با استفاده از async یا defer ارائه می دهد. برای شروع، می توانید این افزونه را از مخزن وردپرس دانلود، نصب و فعال نمایید. سپس برای پیکربندی افزونه به بخش "تنظیمات" سپس زیر منوی "Async JavaScript" مراجعه کنید.

تصویر(3)

سپس  می‌توانید عملکرد افزونه را فعال نموده و بین async و defer یکی را انتخاب کنید. 

یادآوری:

• Async در حین تجزیه HTML، جاوا اسکریپت را دانلود کرده و سپس تجزیه HTML را برای رندر و اجرای جاوا اسکریپت، متوقف می کند.
• Defer دانلود جاوا اسکریپت ها را در حین تجزیه HTML به تعویق می اندازد و برای تجزیه جاوا اسکریپت ها، تا پایان تجزیه HTML منتظر می ماند.

تصویر(4)

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

ایمن ترین روش، مستثنی کردن jQuery است اما می توانید جهت تست، آنها را به تعویق بیندازید. صرفا پس از اعمال تغییرات، سایت خود را به طور کامل تست و بررسی نمایید. همچنین می‌توانید به صورت دستی، اسکریپت‌های خاصی را از به تعویق افتادن مستثنی کنید. یکی از ویژگی های کاربرپسند افزونه Async JavaScript این است که می توانید قالب ها یا افزونه‌های خاصی را که در سایت فعال هستند را به صورت مجزا انتخاب نمایید:

تصویر(5)

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

افزونه WP Rocket می‌تواند کمک کند تا تجزیه جاوا اسکریپت را به تعویق بیندازید. برای این کار در منوی "بهینه سازی فایل" به دنبال گزینه "بارگذاری جاوا اسکریپت به صورت تاخیری" بگردید.

تصویر(6)

مانند Async JavaScript Async، افزونه WP Rocket نیز امکان تاخیر در اجرای jQuery را فراهم می کند:

تصویر(7)

3. از روش کد استفاده کنید

پیشنهاد می شود از یک قطعه کد استفاده نمایید تا دانلود و اجرای جاوا اسکریپت را تا زمان لود اولیه صفحه، به تاخیر بیندازید. می توانید این روش را با قطعه کدی که در ادامه ارائه شده، پیاده سازی کنید. این کد باید دقیقا قبل از بسته شدن تگ </body> اضافه گردد که به صورت زیر است:

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
 element.src = "defer.js";
 document.body.appendChild(element);
 }
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

مطمئن شوید که «defer.js» را با نام یا مسیر واقعی فایل جاوا اسکریپتی که می‌خواهید به تعویق بیندازید، جایگزین نمایید. سپس، می‌توانید از هوک wp_footer برای تزریق کد از طریق فایل functions.php قالب استفاده کنید. کد چیزی شبیه به نمونه زیر خواهد بود:

/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){ 
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

4. جاوا اسکریپت را از طریق فایل functions.php به تعویق بیندازید

می‌توانید با افزودن کد زیر به فایل functions.php، بدون نیاز به افزونه، ویژگی defer را به فایل‌های جاوا اسکریپت خود اضافه کنید:

function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) )
return $url; return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

در واقع، این قطعه کد به وردپرس می‌گوید که ویژگی defer را به همه فایل‌های جاوا اسکریپت به جز jquery، اضافه کند. این روش سریع و آسان است اما کنترل کاملی که افزونه Async JavaScript فراهم می نماید را ارائه نمی دهد.

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

1. سایت خود را آزمایش کنید تا مطمئن شوید که به تعویق انداختن اسکریپت‌های خاص، باعث بهم ریختن محتوای سایت نشده است. این مورد می تواند از طریق jQuery اتفاق بیفتد، به همین دلیل، بسیاری از ابزارها امکان مستثنی کردن jQuery.js را فراهم می کنند. با این حال، ممکن است از طریق اسکریپت های دیگر نیز اتفاق بیفتد.
2. سایت خود را مجدداً از طریق GTmetrix تست و بررسی کنید تا مطمئن شوید تا حد امکان، اسکریپت‌ها به تعویق می‌ افتند. اگر jQuery را مستثنی نمایید، ممکن است نمره کاملی کسب نکنید اما امتیاز شما باید بهتر شده باشد.