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

افزودن ویژگی Defer به کدهای جاوااسکریپت در وردپرس (Add Defer to Scripts)

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

با فیلتر `script_loader_tag` ویژگی `defer="defer"` را به اسکریپت‌های قالب اضافه کنید در حالی که جی‌کوئری را از آن مستثنی می‌سازید.

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

بازبینی: 1405/06/29
پلتفرم اجرایی (Platform) wordpress
نوع کد (Code Type) Filter Hook
محل قرارگیری فایل (Location) functions.php
سطح دشواری (Difficulty) متوسط (Medium)
سطح ریسک (Risk Level) متوسط (Medium Risk)
نیاز به بکاپ اولیه؟ بله، حتماً بکاپ بگیرید
سازگاری با وردپرس تمامی نسخه‌های وردپرس (و سازگار با قابلیت جدید wp_enqueue_script در WP 6.3+)
سازگاری با ووکامرس و HPOS سازگار
هشدار ایمنی: این تغییر مستقیماً فایل‌های حساس سرور یا دیتابیس را ویرایش می‌کند. حتماً پیش از ذخیره کد از وب‌سایت یا فایل مورد نظر فایل پشتیبان (Backup) تهیه کنید.
|
<?php
/**
 * افزودن خودکار صفت defer به تگ‌های اسکریپت به جز موارد حیاتی هسته
 */
function bisco_add_defer_attribute( $tag, $handle, $src ) {
    // از افزودن دفر به پیشخوان ادمین و فایل‌های حساس مانند jquery جلوگیری شود
    if ( is_admin() || in_array( $handle, array( 'jquery', 'jquery-core', 'jquery-migrate' ), true ) ) {
        return $tag;
    }

    // اگر قبلاً دفر یا اسینک نداشته باشد، به آن اضافه شود
    if ( false === strpos( $tag, 'defer' ) && false === strpos( $tag, 'async' ) ) {
        return str_replace( ' src=', ' defer="defer" src=', $tag );
    }

    return $tag;
}
add_filter( 'script_loader_tag', 'bisco_add_defer_attribute', 10, 3 );

کد را کجا قرار دهیم؟ (Placement Guide)

این کد را در فایل functions.php ذخیره کنید.

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

این کد چگونه کار می‌کند؟ (How it Works)

هنگام خروجی تگ‌های `<script>` در HTML، فیلتر وردپرس تگ را دریافت کرده و عبارت `defer="defer"` را قبل از نشانی src درج می‌نماید.

چه زمانی از این کد استفاده کنیم؟ (Use Cases)

برای کلیه فایل‌های اسکریپت غیراضطراری و پوسته‌ها تا مانع توقف رندرینگ صفحه نشوند.

چه زمانی نباید از این کد استفاده کنیم؟ (Anti-patterns)

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

پیش‌نیازهای اجرا

وردپرس ۴.۱ به بالا.

نحوه تست و اطمینان از عملکرد

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

نحوه بازگردانی سریع (Rollback)

فیلتر را از functions.php پاک کنید.

خطاهای رایج و راه‌حل رفع

اعمال دفر بر روی کتابخانه جی‌کوئری که ممکن است باعث ارور jQuery is not defined در اسکریپت‌های اینلاین شود (کد ما هوشمندانه جی‌کوئری را استثنا کرده است).

ملاحظات و نکات امنیتی

بدون ریسک امنیتی.

تاثیر بر سرعت و پرفورمنس

کاهش چشمگیر زمان FCP (First Contentful Paint) و نمره عالی در تست سرعت لایت‌هاوس.

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

صفت async به محض دانلود اسکریپت آن را فوراً اجرا می‌کند و ممکن است ترتیب کدها به هم بریزد، اما defer اسکریپت را دانلود کرده و اجرای آن را با حفظ دقیق ترتیب به پایان رندر DOM موکول می‌کند.
منابع و مستندات رسمی بررسی‌شده (Official Sources):

سبد خرید شما

0 افزونه

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

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

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

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

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

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