First Input Delay adalah waktu yang dihitung mulai dari saat pengguna pertama kali berinteraksi dengan halaman hingga saat browser benar-benar dapat mulai memproses tanggapan atas interaksi itu. [1]
Metrik First Input Delay pertama kali diperkenalkan pada 7 November 2019 dalam sebuah artikel di web.dev [1]. First Input Delay (FID) adalah metrik yang sulit diukur. Tapi FID juga penting untuk kesuksesan website Anda.
Dari pengertian singkat di atas mungkin kita masih belum memahami pengertian FID? Agar lebih jelas mari bahas secara lebih dalam.
Apa Itu First Input Delay?
First Input Delay adalah waktu yang dihitung mulai dari saat pengguna pertama kali berinteraksi dengan halaman hingga saat browser benar-benar dapat mulai memproses tanggapan atas interaksi itu. Click To TweetInteraksi pertama kali yang dimaksud adalah saat pengguna mengklik link, mengetuk tombol, atau menggunakan kontrol lain yang didukung JavaScript.
First Input Delay juga dapat berarti metrik yang melacak penundaan antara waktu pengguna mencoba berinteraksi dengan website, dan waktu antarmuka dapat merespons interaksi itu.
Ini bagaikan menghitung waktu mulai dari membunyikan bel pintu seseorang hingga orang itu memberikan respon.
Berikut ini videonya :
Kenapa First Input Delay Itu Penting?
Ada beberapa alasan yang membuat anda harus memberikan pehatian lebih pada metrik FID ini.
Core Web Vitals
Perlu anda ketahui bahwa First Input Delay itu adalah salah satu dari tiga metrik yang menjadi bagian dalam Core Web Vitals.
Sedangkan Core Web Vitals sendiri adalah metrik yang merupakan bagian dari Web Vitals yang dianggap paling penting dan paling mempengaruhi pengalaman pengguna.
Dan pada tanggal 28 Mei 2020 Google telah mengumumkan bahwa Core Web Vitals akan menjadi rangking faktor Google pada tahun 2021 [2].
Oleh karena itu metrik ini penting sekali dalam Search Engine Optimization (SEO). Pelajari lebih jauh mengenai SEO pada artikel saya berikut ini :
Dan anda juga dapat mempelajari lebih jauh mengenai Core Web Vitals pada artikel saya berikut ini :
User Experience (UX)
Kita tahu betapa pentingnya kesan pertama. Kesan pertama dapat menentukan kelanjutan hubungan anda :). Hal yang sama juga terjadi pada website.
Jika kesan pertamanya saja sudah jelek, maka bisa saja pengguna malah langsung berpindah menuju website yang lain.
Lalu, bagaimana membuat kesan pertama yang baik pada website? Disinilah peranan dari metrik yang satu ini.
Metrik First Input Delay (FID) membantu mengukur kesan pertama pengguna terhadap daya respons website Anda.
Kriteria First Input Delay
Seperti semua metrik dalam Core Web Vitals, metrik ini juga memiliki kriteria yang spesifik.
Terdapat tiga kriteria untuk metrik First Input Delay (FID) ini, yaitu sebagai berikut.
- Good, kurang dari sama dengan 100 mili detik.
- Needs Improvement, antara 100 mili detik sampai dengan 300 mili detik.
- Poor, sama dengan 300 mili detik atau lebih dari itu.
Cara Mengetahui Skor First Input Delay
FID adalah metrik lapangan dan tidak dapat disimulasikan di lingkungan lab. Syarat untuk dapat mengukur FID adalah adanya Interaksi pengguna nyata.
Artinya semua tools yang menggunakan data lab tidak dapat mengukur metrik FID.
Berikut ini rekomendasi Google untuk mengukur FID :
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- Chrome User Experience Report (membutuhkan akun Google dan Google Cloud Project).
Masalah Pada First Input Delay
Penyebab utama FID yang buruk adalah eksekusi JavaScript yang berat [3]. Mengoptimalkan cara JavaScript mem-parsing, mengompilasi, dan mengeksekusi di halaman web Anda akan secara langsung mengurangi FID.
Cara Optimasi First Input Delay
Ada beberapa cara yang dapat dilakukan, berikut ini diantaranya :
Kurangi Jumlah Javascript
Karena penyebab utamanya adalah javascript maka untuk menyelesaikan permasalah FID anda dapat mengurangi jumlah javascript yang digunakan.
Evaluasi kembali mengenai kegunaannya. Apakah benar-benar dibutuhkan?
Secara default, semua JavaScript akan memblokir render. Saat browser menemukan tag skrip yang tertaut ke file JavaScript eksternal, browser akan melakukan jeda.
Browser menjeda apa yang dilakukannya dan mendownload, mengurai, mengompilasi, dan menjalankan JavaScript tersebut. Oleh karena itu, Anda sebaiknya hanya memuat JavaScript yang penting saja.
Defer
Defer adalah atribut HTML. Atribut defer memberi tahu browser bahwa browser tidak perlu melakukan jeda, browser dapat terus bekerja pada halaman website tersebut dan meload skrip di background [4].
Berikut ini contohnya :
<script defer src="https://javascript.info/article/script-async-defer/satu.js"></script>
<script defer src="https://javascript.info/article/script-async-defer/dua.js"></script>Atribut defer ini hanya untuk aset yang berasal dari eksternal. Dan atribut defer akan mempertahankan urutan loadnya.
Async
Sama dengan defer, async juga merupakan atribut HTML. Atribut async memberitahu browser bahwa script tersebut sepenuhnya independen [4].
Browser juga tidak akan menunggu script yang memiliki atribut async. Script lain tidak menunggu script async, dan script async tidak menunggu. Inilah yang dimaksud dengan independen.
Berikut ini contohnya :
<script async src="https://javascript.info/article/script-async-defer/satu.js"></script>
<script async src="https://javascript.info/article/script-async-defer/dua.js"></script>Bahkan sesama script async tidak menunggu satu sama lain. Ini berdampak pada urutan load dari script tersebut. Silakan perhatikan contoh diatas.
Script dua.js dapat diload lebih dulu dari script satu.js. Jadi anda harus bijak dalam memilih antara defer dan async.
Code-splitting
Code-splitting adalah konsep membagi satu bundel JavaScript besar menjadi beberapa bagian kecil yang dapat dimuat pada waktu yang berbeda (tidak bersamaan).
Simpulan
First Input Delay adalah metrik yang sangat penting bagi Google dan bagi pengguna website anda. Untuk itu anda harus melakukan optimasi pada metrik ini.
Referensi
Demikianlah artikel mengenai apa itu first input delay, semoga bermanfaat.
