هشدار Defer parsing of JavaScript به اثر اسکریپت‌ها بر پردازش و نمایش صفحه اشاره دارد. راه‌حل، افزودن defer به هر تگ بدون شناخت وابستگی نیست. بعضی اسکریپت‌ها به ترتیب اجرا، DOM یا کد inline قبلی وابسته‌اند. برای کاهش هزینه JavaScript، حذف کار غیرضروری و اجرای درست آن را با هم بررسی کنید.
تفاوت رفتارهای اصلی
| روش | رفتار مهم |
|---|---|
| اسکریپت کلاسیک همگام | می‌تواند parsing را برای دریافت و اجرا متوقف کند. |
| defer روی اسکریپت خارجی کلاسیک | پس از parsing و با حفظ ترتیب اجرا می‌شود. |
| async | پس از آماده‌شدن اجرا می‌شود و ترتیب وابستگی را تضمین نمی‌کند. |
| type=module | رفتار ماژولی و وابستگی‌های خاص دارد؛ با کلاسیک یکسان نیست. |
چه زمانی defer مناسب است؟
برای اسکریپتی که پس از آماده‌شدن DOM کار می‌کند و ترتیب وابستگی روشن دارد می‌تواند مناسب باشد. async برای زنجیره وابسته‌ای که ترتیب می‌خواهد انتخاب عمومی نیست. defer روی یک script کلاسیک inline رفتار همان فایل خارجی را ایجاد نمی‌کند. یک inline زودهنگام که به فایل deferشده نیاز دارد ممکن است پیش از آماده‌شدن آن اجرا شود.
نمونه ثبت در وردپرس سازگار
برای فایل متعلق به کد خودتان در وردپرس 6.3 و بالاتر، API ثبت script امکان strategy دارد. نمونه زیر به فایل واقعی assets/site.js در پوسته فرزند نیاز دارد و باید در محل سفارشی‌سازی مناسب قرار گیرد.
function hn_demo_enqueue_site_script() {
wp_enqueue_script(
'hn-demo-site',
get_stylesheet_directory_uri() . '/assets/site.js',
array(),
'1.0.0',
array( 'strategy' => 'defer', 'in_footer' => true )
);
}
add_action( 'wp_enqueue_scripts', 'hn_demo_enqueue_site_script' );اگر فایل به کتابخانه‌ای وابسته است، handles واقعی را در deps معرفی کنید. وردپرس درخت وابستگی را در انتخاب راهبرد نهایی لحاظ می‌کند؛ این مثال مجوز deregisterکردن فایل‌های افزونه‌های دیگر نیست.
کاهش حجم و اجرا را فراموش نکنید
defer زمان اجرای اسکریپت را جابه‌جا می‌کند ولی همه هزینه CPU و کد بلااستفاده را حذف نمی‌کند. ابزار تبلیغ، widget و کتابخانه سنگین را بر اساس نیاز هر صفحه بررسی کنید. delay تا تعامل نیز ممکن است اولین کلیک را کند یا فرم را غیرفعال کند؛ آن را با defer یکی ندانید.
آزمون درست
- کنسول، ترتیب درخواست‌ها و تعامل‌های ضروری را در خروجی تولید بررسی کنید.
- هم بازدید اول بدون cache و هم بازدید بعدی را بسنجید.
- ورود، سبدخرید و پرداخت آزمایشی باید بدون خطای تازه کار کنند.
- یک تبدیل بهینه‌سازی را در چند افزونه هم‌زمان اعمال نکنید.
- اگر مشکل ایجاد شد، همان تغییر محدود را برگردانید؛ نمره ابزار جای عملکرد صحیح نیست.
مطالعه مرتبط
منابع و مستندات
بازبینی محتوا و منابع: ۲۶ مهر ۱۴۰۵. دستورهای نمونه برای محیط مشخص‌شده‌اند؛ پیش از استفاده روی سرویس عملیاتی، سازگاری محیط و نسخه پشتیبان را بررسی کنید.
