Komut dosyası önceliğini optimize etme

Web özellikleri: Getirme önceliği

Tarayıcılar, komut dosyalarına dokümandaki konumlarına ve async veya defer gibi özelliklere sahip olup olmadıklarına göre varsayılan öncelikler atar. fetchpriority bileşenini kullanmak, geliştiricilere kritik komut dosyalarının önce yüklenmesini ve gerekli olmayan komut dosyalarının yüklenmemesini sağlama konusunda açık kontrol sağlar.

Nasıl uygulanır?

  1. Kritik komut dosyalarını belirleyin: Sayfanın temel işlevleri veya ilk kullanıcı etkileşimi için hangi komut dosyalarının gerekli olduğunu belirleyin.
  2. Kritik eşzamansız komut dosyalarını yükseltin: async veya defer ile yüklenen kritik komut dosyaları için fetchpriority="high" özelliğini ekleyerek keşif aşamasında önceliklendirilmelerini sağlayın.
  3. Temel olmayan komut dosyalarının önceliğini azaltın: Hemen gerekli olmayan komut dosyaları (ör. analiz, reklamlar veya ekranın alt kısmındaki widget'lar) için fetchpriority="low" ekleyin ve engellemeyi önlemek için async, defer veya module özelliğine sahip olduklarından emin olun.
  4. Ayrıştırıcıyı engelleyen komut dosyalarını sıralayın: Gövdenin sonundaki ayrıştırıcıyı engelleyen komut dosyalarında fetchpriority="low" kullanarak bunların daha kritik kaynaklarla bant genişliği için rekabet etmesini önleyin.

Örnek kod

<!-- 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>

En İyi Uygulamalar

  • ZORUNLU: Ağ çakışmasını ve öncelik artışının etkisini azaltmayı önlemek için fetchpriority="high" özelliğini en fazla 1-2 kritik komut dosyasında kullanın.
  • fetchpriority="high" özelliğini, Interaction to Next Paint (INP) için kritik olduğu bilinen async komut dosyaları için KULLANIN.
  • fetchpriority="low" kullanarak ilk kullanıcı deneyimi için gerekli olmayan komut dosyalarının önceliğini DÜŞÜRÜN.
  • fetchpriority özelliğini her komut dosyası etiketinde KULLANMAYIN. Bu özellik yalnızca tarayıcının varsayılan sezgisel yönteminin optimumun altında olduğu bilindiğinde bu yöntemi değiştirmek için kullanılmalıdır.
  • Desteği sonlandırılan importance özelliğini KULLANMAYIN. fetchpriority ile değiştirildi.

Yedek strateji

fetchpriority özelliği, progresif bir geliştirmedir. Bu özelliği desteklemeyen tarayıcılar, özelliği yoksayar ve dahili zamanlama mantığını hatasız bir şekilde kullanır. Temel kullanım için açık özellik algılama veya yedek mantık gerekmez.