افزایش سرعت و پرفورمنس Filter Hook پلتفرم: wordpress متوسط (Medium) سطح ریسک: متوسط (Medium Risk)

افزودن ویژگی Async به اسکریپت‌های مستقل در وردپرس (Add Async)

تست‌شده و بازبینی‌شده در 1405/06/29 ۱۳۰ بار کپی ۱۶۰۶ مشاهده
پاسخ سریع و خلاصه کاربردی (Quick Answer)

با استفاده از فیلتر `script_loader_tag` می‌توانید ویژگی `async` را به صورت هدفمند به هندل‌های مستقل مانند اسکریپت‌های آنالیتیکس اضافه کنید.

مشخصات فنی و شناسنامه کد (Code Information)

بازبینی: 1405/06/29
پلتفرم اجرایی (Platform) wordpress
نوع کد (Code Type) Filter Hook
محل قرارگیری فایل (Location) functions.php
سطح دشواری (Difficulty) متوسط (Medium)
سطح ریسک (Risk Level) متوسط (Medium Risk)
نیاز به بکاپ اولیه؟ بله، حتماً بکاپ بگیرید
سازگاری با وردپرس تمامی نسخه‌های وردپرس
سازگاری با ووکامرس و HPOS سازگار
هشدار ایمنی: این تغییر مستقیماً فایل‌های حساس سرور یا دیتابیس را ویرایش می‌کند. حتماً پیش از ذخیره کد از وب‌سایت یا فایل مورد نظر فایل پشتیبان (Backup) تهیه کنید.
|
<?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 وارد کنید.

مسیر فایل: functions.php

این کد چگونه کار می‌کند؟ (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).

پرسش‌های متداول پیرامون این کد (FAQ)

خیر، اسکریپت اصلی پوسته معمولاً به DOM یا توابع دیگر متکی است و بهتر است از defer استفاده شود.
منابع و مستندات رسمی بررسی‌شده (Official Sources):

سبد خرید شما

0 افزونه

سبد خرید شما خالی است

هنوز محصولی را به سبد خرید اضافه نکرده‌اید. می‌توانید از افزونه‌های اختصاصی ما دیدن فرمایید.

مشاهده فروشگاه افزونه‌ها

ثبت درخواست مشاوره

با تکمیل فرم زیر، کارشناسان فنی بیسکو وب در سریع‌ترین زمان ممکن با شما تماس می‌گیرند.

مشاور
پشتیبانی و مشاوره تخصصی
پاسخگویی سریع کارشناسان
09903336117