افزودن ویژگی Defer به کدهای جاوااسکریپت در وردپرس (Add Defer to Scripts)
با فیلتر `script_loader_tag` ویژگی `defer="defer"` را به اسکریپتهای قالب اضافه کنید در حالی که جیکوئری را از آن مستثنی میسازید.
مشخصات فنی و شناسنامه کد (Code Information)
بازبینی: 1405/06/29<?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 ذخیره کنید.
این کد چگونه کار میکند؟ (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) و نمره عالی در تست سرعت لایتهاوس.