افزودن ویژگی Async به اسکریپتهای مستقل در وردپرس (Add Async)
با استفاده از فیلتر `script_loader_tag` میتوانید ویژگی `async` را به صورت هدفمند به هندلهای مستقل مانند اسکریپتهای آنالیتیکس اضافه کنید.
مشخصات فنی و شناسنامه کد (Code Information)
بازبینی: 1405/06/29<?php
/**
* افزودن ویژگی async به اسکریپتهای مستقل در وردپرس
*/
function bisco_add_async_attribute( $tag, $handle ) {
// آرایه هندل اسکریپتهایی که باید async شوند
$async_handles = array(
'google-tag-manager',
'clarity-tracking',
'crisp-chat',
'yandex-metrika'
);
if ( in_array( $handle, $async_handles, true ) ) {
if ( false === strpos( $tag, 'async' ) ) {
return str_replace( ' src=', ' async="async" src=', $tag );
}
}
return $tag;
}
add_filter( 'script_loader_tag', 'bisco_add_async_attribute', 10, 2 );
کد را کجا قرار دهیم؟ (Placement Guide)
کد را در functions.php قرار داده و نام هندل اسکریپتهای مورد نظر خود را در آرایه $async_handles وارد کنید.
این کد چگونه کار میکند؟ (How it Works)
هنگام رندر تگ اسکریپت در HTML، فیلتر نام هندل ثبت شده را بررسی میکند و در صورت تطابق، صفت `async="async"` را به تگ تزریق میکند.
چه زمانی از این کد استفاده کنیم؟ (Use Cases)
برای اسکریپتهای شخص ثالث و ترکینگ مانند Google Analytics، ابزارهای هیتمپ یا وبچتها که نباید زمان لود صفحه را به تأخیر بیندازند.
چه زمانی نباید از این کد استفاده کنیم؟ (Anti-patterns)
برای اسکریپتهایی که به کتابخانههای دیگر (مانند jQuery) وابسته هستند یا ترتیب اجرای آنها مهم است.
پیشنیازهای اجرا
وردپرس ۴.۱ به بالا.
نحوه تست و اطمینان از عملکرد
در سورس کد صفحه تگ اسکریپت مورد نظر را بررسی کنید؛ صفت async باید در تگ وجود داشته باشد.
نحوه بازگردانی سریع (Rollback)
کد را از functions.php حذف کنید.
خطاهای رایج و راهحل رفع
اعمال ویژگی async روی اسکریپتهای وابسته به جیکوئری که خطای `Uncaught ReferenceError: $ is not defined` ایجاد میکند.
ملاحظات و نکات امنیتی
اسکریپتهای لود شده با async از همان دامنههای معتبر باید بارگذاری شوند.
تاثیر بر سرعت و پرفورمنس
جلوگیری از قفل شدن رندرینگ مرورگر و بهبود شاخص Total Blocking Time (TBT).