بهینه‌سازی اولویت دستورگان

ویژگی‌های وب: اولویت واکشی

مرورگرها اولویت‌های پیش‌فرضی را به اسکریپت‌ها اختصاص می‌دهند که براساس محل ظاهر شدن آن‌ها در سند و داشتن یا نداشتن مشخصه‌هایی مانند async یا defer است. استفاده از fetchpriority به توسعه‌دهندگان کنترل صریح می‌دهد تا مطمئن شوند که اسکریپت‌های حیاتی ابتدا بارگیری می‌شوند، درحالی‌که اسکریپت‌های غیرضروری در اولویت بعدی قرار می‌گیرند.

نحوه پیاده‌سازی

  1. شناسایی اسکریپت‌های حیاتی: مشخص کنید کدام اسکریپت‌ها برای عملکرد اصلی صفحه یا تعامل اولیه کاربر ضروری هستند.
  2. ارتقای اسکریپت‌های ناهمگام حیاتی: برای اسکریپت‌های حیاتی بارشده با async یا defer، ویژگی fetchpriority="high" را اضافه کنید تا مطمئن شوید که درطول مرحله اکتشاف اولویت‌بندی می‌شوند.
  3. اولویت اسکریپت‌های غیرضروری را کاهش دهید: برای اسکریپت‌هایی که فوراً به آن‌ها نیاز ندارید (برای نمونه، تجزیه‌وتحلیل، آگهی‌ها، یا ابزارک‌های زیر خط تا)، fetchpriority="low" را اضافه کنید و مطمئن شوید که دارای مشخصه async، defer، یا module هستند تا از مسدود شدن جلوگیری شود.
  4. اسکریپت‌های مسدودکننده تجزیه‌کننده توالی: از fetchpriority="low" در اسکریپت‌های مسدودکننده تجزیه‌کننده در انتهای بدنه استفاده کنید تا از رقابت آن‌ها برای پهنای باند با منابع حیاتی‌تر جلوگیری کنید.

کد نمونه

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

روال‌های مطلوب

  • اجباری: برای جلوگیری از تداخل شبکه و کاهش تقویت اولویت، از fetchpriority="high" فقط در حداکثر ۱ تا ۲ اسکریپت حیاتی استفاده کنید.
  • باید از fetchpriority="high" به‌طور خاص برای دستورگان‌های async که برای «تعامل تا ترسیم بعدی» (INP) حیاتی هستند استفاده کنید.
  • باید اولویت اسکریپت‌هایی را که برای تجربه کاربری اولیه لازم نیستند بااستفاده از fetchpriority="low" کاهش دهید.
  • از fetchpriority در همه برچسب‌های دستورگان استفاده نکنید؛ این ویژگی فقط باید برای تغییر اکتشافی پیش‌فرض مرورگر زمانی که مشخص است بهینه نیست استفاده شود.
  • از مشخصه منسوخ‌شده importance استفاده نکنید. fetchpriority جایگزین آن شده است.

راهبرد جایگزین

مشخصه fetchpriority یک ارتقای پیش‌رو است. مرورگرهایی که از آن پشتیبانی نمی‌کنند، این مشخصه را نادیده می‌گیرند و از منطق زمان‌بندی داخلی خود بدون خطا استفاده می‌کنند. برای استفاده پایه، به منطق بازگشت یا تشخیص ویژگی صریح نیازی نیست.