Mengoptimalkan prioritas skrip

Fitur web: Prioritas pengambilan

Browser menetapkan prioritas default ke skrip berdasarkan tempat skrip muncul dalam dokumen dan apakah skrip memiliki atribut seperti async atau defer. Penggunaan fetchpriority memberi developer kontrol eksplisit untuk memastikan skrip penting dimuat terlebih dahulu, sementara skrip yang tidak penting tidak mengganggu.

Cara menerapkan

  1. Identifikasi skrip penting: Tentukan skrip yang penting untuk fungsi inti halaman atau interaksi pengguna awal.
  2. Meningkatkan prioritas skrip asinkron penting: Untuk skrip penting yang dimuat dengan async atau defer, tambahkan atribut fetchpriority="high" untuk memastikan skrip tersebut diprioritaskan selama fase penemuan.
  3. Turunkan prioritas skrip yang tidak penting: Untuk skrip yang tidak segera diperlukan (misalnya, analisis, iklan, atau widget di paruh bawah), tambahkan fetchpriority="low" dan pastikan skrip tersebut memiliki atribut async, defer, atau module untuk menghindari pemblokiran.
  4. Urutkan skrip pemblokir parser: Gunakan fetchpriority="low" pada skrip pemblokir parser di akhir isi untuk mencegahnya bersaing mendapatkan bandwidth dengan resource yang lebih penting.

Kode contoh

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

Praktik Terbaik

  • WAJIB: Hanya gunakan fetchpriority="high" pada maksimal 1-2 skrip penting untuk menghindari pertentangan jaringan dan mengurangi peningkatan prioritas.
  • GUNAKAN fetchpriority="high" secara khusus untuk skrip async yang diketahui penting untuk Interaction to Next Paint (INP).
  • LAKUKAN penurunan prioritas skrip yang tidak diperlukan untuk pengalaman pengguna awal menggunakan fetchpriority="low".
  • JANGAN gunakan fetchpriority di setiap tag skrip; atribut ini hanya boleh digunakan untuk mengubah heuristik default browser jika diketahui tidak optimal.
  • JANGAN gunakan atribut importance yang tidak digunakan lagi. Metode ini telah diganti dengan fetchpriority.

Strategi penggantian

Atribut fetchpriority adalah progressive enhancement. Browser yang tidak mendukungnya akan mengabaikan atribut tersebut dan menggunakan logika penjadwalan internalnya tanpa error. Tidak diperlukan deteksi fitur eksplisit atau logika penggantian untuk penggunaan dasar.