Percepat Pemuatan Sumber Daya dengan Petunjuk Prioritas dan ambil prioritas

Seberapa cepat sumber daya Anda yang paling penting dimuat?

Pertanyaan yang tepat ini memiliki pemilik situs web (dan pakar web berpengalaman) pada pin dan jarum. Dan kebetulan itulah yang membuat atau merusak situs web Anda dalam milidetik pertama.

Dalam hal mengoptimalkan pemuatan sumber daya, Anda memiliki dua opsi:

1. Mengandalkan sepenuhnya pada mekanisme browser untuk mengunduh dan mengambil sumber daya dalam urutan yang optimal.
2. Cobalah untuk membantu mereka dengan menerapkan petunjuk sumber daya.

Sayangnya, sebaik browser modern, setiap situs/aplikasi berbeda dalam pengaturan dan konteks. Dan sementara mereka cukup baik dalam menetapkan prioritas sumber daya, dalam beberapa kasus, itu tidak cukup.

Sayangnya, petunjuk sumber daya memberikan pengaruh terbatas atas prioritas sumber daya.

Untungnya, ada petunjuk baru yang dapat Anda tambahkan ke kotak alat kinerja web Anda – Petunjuk Prioritas.

Dan dalam artikel ini, Anda akan mempelajari lebih lanjut tentang:

• Apa Petunjuk Prioritas itu;
• Kapan menggunakannya;
• Cara mengimplementasikannya melalui fetchpriority;
• Bagaimana Anda dapat mengujinya di situs Anda.

Mari kita mulai!

Apa itu Petunjuk Prioritas?

Petunjuk Prioritas adalah sinyal yang memungkinkan pemilik dan pengembang situs web untuk menunjukkan prioritas sumber daya (misalnya, gambar, font, CSS, skrip, dan iframe) saat browser memuatnya.

Browser harus mengunduh semua jenis sumber daya dalam proses membangun halaman web. Sebagai sumber prioritas, ia meminta dan mengunduh dokumen HTML terlebih dahulu.

Tetapi bagaimana browser menentukan apa yang akan dimuat selanjutnya?

Nah, browser memiliki serangkaian prioritas yang telah ditentukan untuk setiap jenis sumber daya:

Prioritas default ini biasanya bekerja dengan cukup baik, yang menghasilkan kinerja web yang baik.

Namun, seperti yang disebutkan Addy Osmani dalam artikelnya tentang Petunjuk prioritas, browser dapat membuat tebakan yang cukup baik tentang apa yang harus diambil selanjutnya.

Tapi mereka tidak tahu proyek Anda sebaik Anda.

Jadi sedikit penyesuaian mungkin diperlukan:

"Browser seperti Chrome memang memiliki heuristik untuk mencoba mengambil sumber daya dengan prioritas yang sesuai berdasarkan sinyal seperti apakah mereka berada di area pandang. Artinya, tanpa Petunjuk Prioritas, Chrome hanya dapat meningkatkan prioritas untuk gambar dalam area pandang setelah tata letak telah selesai. Ini sangat sering terlambat, dan pada titik ini, dapat bersaing dengan yang lainnya. Alasan lain untuk mempertimbangkan menggunakan petunjuk adalah bahwa sebagai pembuat halaman, Anda mungkin tahu apa yang paling penting untuk dilihat pengguna Anda terlebih dahulu dan dapat menginformasikan browser sehingga dapat mengoptimalkan kasus penggunaan Anda."

Sebelumnya, satu-satunya hal yang dapat Anda lakukan adalah menggunakan pramuat atau prakoneksi.

Dan meskipun pramuat adalah perintah wajib yang harus dipatuhi browser, dalam beberapa kasus, sumber daya yang dimuat sebelumnya masih bisa mendapatkan prioritas rendah.

Misalnya, gambar Largest Contentful Paint (LCP) yang dimuat sebelumnya bisa mendapatkan prioritas rendah dan didorong kembali oleh sumber daya berprioritas tinggi lainnya. Dalam kasus seperti itu, Petunjuk Prioritas dapat melengkapi pramuat dengan sempurna dan membantu seberapa cepat sumber daya dimuat.

Berikut adalah webinar tentang Petunjuk Prioritas, di mana Pat Meenan berbicara tentang Petunjuk Prioritas di Chrome dan bahkan menyebutnya "kode cheat" untuk LCP:

Ini adalah contoh utama kekuatan Petunjuk Prioritas.

Sekarang, mari kita lihat kapan Anda harus menerapkan Petunjuk Prioritas dalam strategi kinerja web Anda.

Kapan Menggunakan Petunjuk Prioritas

Ada 5 skenario utama di mana Petunjuk Prioritas dapat membantu, menurut Google:

1. Anda memiliki beberapa gambar paruh atas, tetapi semuanya tidak perlu memiliki prioritas yang sama. Misalnya, dalam carousel gambar, hanya gambar pertama yang terlihat yang membutuhkan prioritas lebih tinggi dibandingkan dengan yang lain.
   
2. Gambar pahlawan di dalam area pandang mulai dengan prioritas rendah. Setelah tata letak selesai, Chrome menemukan bahwa mereka berada di area pandang dan meningkatkan prioritasnya (sayangnya, alat pengembang hanya menunjukkan prioritas terakhir - WebPageTest akan menampilkan keduanya). Ini biasanya menambahkan penundaan yang signifikan untuk memuat gambar. Memberikan petunjuk prioritas dalam markup memungkinkan gambar mulai dengan prioritas tinggi dan mulai memuat lebih awal.

Catatan: Mendeklarasikan skrip sebagai async atau defer memberi tahu browser untuk memuatnya secara asinkron. Namun, seperti yang terlihat pada gambar di atas, skrip ini juga diberi prioritas "rendah". Anda mungkin ingin meningkatkan prioritasnya sambil memastikan unduhan asinkron, terutama untuk skrip apa pun yang penting untuk pengalaman pengguna.

Anda dapat menggunakan JavaScript fetch() API untuk mengambil sumber daya atau data secara asinkron. Ambil diberi prioritas tinggi oleh browser. Mungkin ada situasi di mana Anda tidak ingin semua pengambilan Anda dieksekusi dengan prioritas tinggi dan lebih suka menggunakan petunjuk prioritas yang berbeda. Ini dapat membantu saat menjalankan panggilan API latar belakang dan menggabungkannya dengan panggilan API yang merespons masukan pengguna, seperti dengan pelengkapan otomatis. Panggilan API latar belakang dapat ditandai sebagai prioritas rendah, dan panggilan API interaktif ditandai sebagai prioritas tinggi.

Browser memberikan CSS dan font sebagai prioritas tinggi, tetapi semua sumber daya tersebut mungkin tidak sama pentingnya atau diperlukan untuk LCP. Anda dapat menggunakan petunjuk prioritas untuk menurunkan prioritas beberapa sumber daya ini.

Hampir semua situs web berada di bawah dua skenario pertama. Untuk menentukan apakah Anda harus mengerjakan sisanya, gali lebih dalam kode (HTML/JS) Anda atau cari bantuan dari pengembang web.

Cara Menerapkan Petunjuk Prioritas: Atribut fetchpriority

Anda dapat menerapkan Petunjuk Prioritas menggunakan atribut HTML fetchpriority.

Anda dapat menggunakan atribut dengan:

• tautan
• gambar
• naskah
• tag iframe

Atribut fetchpriority menerima salah satu dari tiga nilai:

• tinggi: menunjukkan bahwa Anda menganggap sumber daya penting dan ingin browser memprioritaskannya.
• rendah: menandakan bahwa Anda menganggap sumber daya kurang penting dan ingin browser tidak memprioritaskannya.
• auto: nilai default ketika Anda tidak memiliki preferensi dan membiarkan browser menentukan prioritas yang sesuai.

Atau, Anda dapat menggunakan API Pengambilan JavaScript:

Beberapa hal yang perlu diingat saat menggunakan atribut fetchpriority :

• fetchpriority tidak memastikan bahwa sumber daya dengan prioritas lebih tinggi akan dimuat sebelum sumber daya lain (berprioritas lebih rendah) dari jenis yang sama.
• fetchpriority tidak boleh digunakan untuk mengontrol urutan pemuatan itu sendiri.
• fetchpriority bukan direktif wajib, dan tidak dapat memaksa browser untuk mengambil sumber daya atau mencegahnya mengambil. Terserah browser apakah akan mengambil sumber daya atau tidak.

Penting: Mirip dengan petunjuk Sumber Daya, Petunjuk Prioritas harus digunakan dengan hati-hati, karena penggunaan yang berlebihan dapat mengakibatkan pelambatan daripada peningkatan kinerja.

Cara Menguji Situs Anda dengan Petunjuk Prioritas

Sebelum menjalankan pengujian, Anda harus mengetahui bahwa Petunjuk Prioritas hanya tersedia di Chrome 101 (atau lebih baru) dan Edge 101 (atau lebih baru):

Sekarang untuk pertanyaan yang ada:

Cara termudah adalah dengan menggunakan alat, jadi Anda tidak perlu mengubah kode secara manual.

Untungnya, fitur Eksperimen WebPageTest memungkinkan Anda menguji fitur kinerja seperti Petunjuk Prioritas tanpa mengubah kode Anda.

Namun, fitur Eksperimen WebPageTest adalah bagian dari langganan berbayar mereka, jadi Anda perlu merencanakan beberapa biaya tambahan.

Sebaliknya, jika Anda memiliki keterampilan teknologi, Anda dapat menyempurnakan kode situs Anda sendiri dan menguji dampak Petunjuk Prioritas.

Pastikan untuk menjalankan tes setelah setiap perubahan yang Anda buat.

rekap

Kami membahas banyak hal, jadi inilah rekap singkat dari poin terpenting:

• Petunjuk Prioritas memungkinkan Anda untuk menunjukkan prioritas sumber daya situs Anda.
• Petunjuk Prioritas dapat membantu Anda mempercepat pemuatan gambar paruh atas, gambar pahlawan (elemen LCP), skrip asinkron dan ditangguhkan, CSS, dan file font.
• Petunjuk Prioritas dapat diimplementasikan melalui atribut fetchpriority.
• Anda dapat menggunakan atribut fetchpriority dengan tag link, img, script, dan iframe.
• Atribut fetchpriority menerima salah satu dari tiga nilai: tinggi, rendah, dan otomatis.
• Perhatian: Petunjuk Prioritas harus diterapkan dengan hemat karena penggunaannya yang berlebihan dapat menyebabkan penurunan kinerja daripada peningkatan kecepatan.
• fetchpriority bukan direktif wajib, dan tidak dapat memaksa browser untuk mengambil sumber daya atau mencegahnya mengambil. Terserah browser apakah akan mengambil sumber daya atau tidak.
• Petunjuk Prioritas tersedia di Chrome 101 atau lebih baru.

Untuk mengukur dampak Petunjuk Prioritas pada situs Anda, jalankan pengujian setelah setiap perubahan.

Alat pengujian populer:

• Wawasan PageSpeed
• GTMetrix
• Tes Halaman Web
• Mercu suar
• Pingdom