First Input Delay (FID): Apa Artinya & Bagaimana Mengoptimalkan Situs Web Anda?

Memberikan pengalaman yang cepat kepada pengunjung sangat penting untuk kesuksesan situs Anda. Namun, ada beberapa cara untuk mengukur seberapa baik itu melakukannya. Salah satunya adalah First Input Delay (FID), yang mengukur jumlah waktu dalam milidetik (ms) antara saat pengguna pertama kali berinteraksi dengan situs Anda dan saat browser mereka merespons tindakan tersebut.

Dalam posting ini, kami akan menjelaskan apa itu FID dan bagaimana mengukurnya. Kami juga akan membahas skor FID yang bagus, dan memandu Anda melalui cara mengoptimalkan skor Anda. Akhirnya, kita akan mengakhiri dengan beberapa pertanyaan yang sering diajukan. Mari kita mulai!

Berlangganan Saluran Youtube Kami

Apa itu First Input Delay (FID)?

Seperti yang kami sebutkan, FID (juga kadang-kadang disebut sebagai "Latensi Input") adalah pengukuran waktu dalam ms yang terjadi antara saat pengunjung berinteraksi dengan situs Anda dan saat browser mereka merespons. Ini adalah metrik penting yang disertakan dalam Laporan Pengalaman Pengguna Chrome. Selain itu, ini adalah salah satu dari Core Web Vitals. Ini adalah metrik yang digunakan Google untuk menentukan kualitas UX situs Anda (dan pada gilirannya, peringkat halamannya).

Dalam konteks ini, input atau interaksi dapat merujuk pada berbagai tindakan. Misalnya, itu bisa termasuk mengklik tautan, menekan tombol, atau memilih kotak centang. Namun, FID tidak berlaku saat pengguna menggulir atau memperbesar halaman, karena itu tidak memerlukan respons baru antara browser mereka dan situs web Anda.

Beberapa faktor berbeda dapat memengaruhi metrik ini. Kecepatan dan kekuatan pemrosesan perangkat pengguna mungkin berdampak. Anda tidak dapat mengontrol itu. Namun, Anda dapat mengontrol ukuran dan kompleksitas halaman web. Lebih khusus lagi, Anda dapat mengontrol berapa banyak JavaScript yang digunakan situs web Anda. Misalnya, jika Anda memiliki banyak gambar atau skrip yang dimuat dalam urutan acak, itu dapat memperlambat seluruh proses dan menunda respons dari pengguna.

Meskipun situs Anda memiliki FCP dan LCP yang solid, Penundaan Input Pertama mungkin cukup lama untuk menyebabkannya terpental. Bagi mereka mungkin terasa seolah-olah situs Anda tidak responsif dan lambat.

Singkatnya, FID digunakan untuk menentukan seberapa responsif halaman saat dimuat. Mungkin jelas, semakin cepat proses ini, semakin baik. Oleh karena itu, penting untuk mengetahui cara mengukur FID situs Anda dan cara meningkatkan skor Anda.

Bagaimana Mengukur FID

Sebelum Anda mulai mengoptimalkan skor FID Anda, penting untuk mengetahui di mana posisinya saat ini. Idealnya, untuk memberikan pengalaman pengguna (UX) yang solid, Anda ingin skor FID Anda di bawah 100 ms.

Skor 100 ms atau kurang dianggap baik , sedangkan skor antara 100 dan 300 ms memiliki ruang untuk perbaikan. Skor FID di atas 300 ms buruk .

Untuk mengukur FID Anda, Anda dapat menggunakan Google PageSpeed ​​Insights:

Ini adalah alat gratis dari Google yang menguji kinerja situs Anda dalam banyak cara. Dengannya, Anda dapat mengamati berbagai metrik utama, termasuk FID.

Perhatikan bahwa FID terkadang sulit diukur. Itu karena membutuhkan input pengguna. Namun, selama Anda baru-baru ini memiliki interaktivitas pengguna di situs Anda, Anda seharusnya dapat menemukan metrik ini melalui PageSpeed ​​Insights.

Untuk memulai, masukkan URL situs Anda ke dalam bidang teks dan klik tombol Analisis . Setelah alat selesai menganalisis halaman Anda, itu akan membawa Anda ke hasil dan memberi situs Anda skor keseluruhan:

Anda dapat menemukan metrik First Input Delay (FID) di bawah bagian Field Data . Di bawah bagian Peluang sedikit lebih rendah, Anda dapat menemukan saran untuk mengoptimalkan halaman dan skor Anda.

Kami juga ingin mencatat bahwa Google menunjukkan skor ini sebagai data lapangan . Ini berarti bahwa informasi tersebut didasarkan pada interaksi pengguna yang sebenarnya, bukan tes simulasi (yang disebut data lab atau ditemukan melalui alat lab ). FID cukup subjektif dan terkait erat dengan interaksi nyata pengguna, jadi pastikan Anda menggunakan data lapangan adalah penting. Simulasi hanya dapat menjelaskan begitu banyak.

Cara Mengoptimalkan Skor FID Anda

Sekarang setelah Anda memahami apa itu skor FID dan bagaimana Anda dapat mengukurnya, inilah saatnya untuk melihat bagaimana Anda benar-benar dapat meningkatkannya. Berikut adalah beberapa tip dan strategi yang dapat Anda gunakan untuk menurunkan waktu Tunda Input Pertama Anda.

Optimalkan dan Perkecil Kode CSS dan JavaScript Anda

Salah satu cara terbaik untuk mengoptimalkan skor FID Anda adalah dengan mengompresi dan mengoptimalkan kode CSS dan JavaScript Anda. Melakukannya dapat mengurangi ukuran file Anda, dan pada gilirannya meningkatkan daya tanggap. Dengan menghilangkan karakter, spasi, dan jeda baris yang tidak perlu, Anda menurunkan ukuran file, yang pada gilirannya meningkatkan kecepatan halaman dan mengurangi jumlah proses yang harus ditangani oleh browser. Dengan demikian, Anda memiliki FID yang lebih rendah.

Pengguna Divi juga harus tahu bahwa tema secara otomatis mengecilkan HTML, JavaScript, dan CSS sejak awal. Cukup mengaktifkan tema akan memampatkan semua kode ini sehingga FID Anda berada di posisi yang lebih baik dari sebelumnya.

Jika Anda bukan pengguna Divi, Anda memiliki beberapa opsi untuk memperkecil kode Anda. Pendekatan cepat dan sederhana untuk melakukan ini adalah dengan menggunakan alat online seperti Minify Code. Salin kode berukuran penuh Anda, rekatkan ke situs, situs mengecilkannya, dan kemudian Anda menyalin/menempelkan hasilnya kembali ke situs Anda.

Anda juga dapat mengecilkan kode Anda secara manual menggunakan editor kode, meskipun ini bisa sedikit lebih rumit. Namun, jika Anda berpengalaman dalam bekerja dengan kode, metode ini dapat memberi Anda lebih banyak kontrol.

Namun strategi lain adalah dengan menggunakan plugin seperti Autoptimize atau W3 Total Cache (atau sejumlah lainnya).

Ini bisa menjadi solusi yang layak untuk pengguna WordPress jika Anda tidak berpengalaman dengan kode dan ingin menerapkan modifikasi ini di situs Anda secara otomatis. Selain itu, kedua plugin ini menawarkan berbagai fitur yang berfokus pada pengoptimalan seperti cache gambar dan konten.

Pisahkan Tugas JavaScript yang Panjang menjadi Tugas yang Lebih Kecil

Tugas yang panjang cenderung memblokir utas utama dan dapat menyebabkan JavaScript membengkak, merusak respons situs Anda. Untuk mencegah hal ini terjadi, dan meningkatkan skor FID Anda dalam prosesnya, Anda dapat mencoba memecah tugas-tugas ini menjadi tugas-tugas yang lebih kecil dan tidak sinkron.

Salah satu cara paling efektif untuk melakukan ini adalah pemecahan kode. Singkatnya, ini adalah teknik yang digunakan untuk memecah dan memuat hanya potongan kode yang lebih kecil dan diperlukan, daripada satu file besar sekaligus. Anda dapat melakukan ini menggunakan alat seperti Webpack.

Pengguna Divi juga mendapatkan keuntungan di area ini, karena pembaruan kinerja besar memecah perpustakaan JavaScript besar tema dan hanya memuatnya sesuai kebutuhan. Ini akan mengurangi FID di hampir semua situs Divi. Tema WordPress cenderung datang dengan perpustakaan JS mereka sendiri, dan pengguna mungkin tidak memiliki keahlian atau izin untuk memisahkan kode dan mengoptimalkannya sendiri. Kami ingin menjadikannya bukan masalah dengan Divi.

Kurangi Dampak Kode Pihak Ketiga dan Skrip Non-Kritis

Jika Anda memiliki terlalu banyak skrip pihak ketiga, ini dapat menunda eksekusi data situs Anda sendiri. Oleh karena itu, untuk mengoptimalkan skor FID Anda, ada baiknya juga mengurangi dampak kode pihak ketiga dan menghapus skrip pihak ketiga yang tidak penting. Dan untuk menunda yang tidak dapat Anda hapus.

Saat memutuskan skrip mana yang paling penting, tanyakan pada diri Anda sendiri mana yang memainkan peran penting dalam UX situs. Misalnya, mungkin Anda dapat menghapus atau menunda beberapa iklan atau pop-up yang tidak terlalu diperlukan. Apakah pengguna Anda perlu melihat keikutsertaan email itu terlebih dahulu, atau dapatkah Anda menundanya hingga mereka berinteraksi dengan situs dengan cara tertentu?

Anda juga dapat melihat di bawah bagian Peluang pada laporan PageSpeed ​​Insights Anda untuk informasi selengkapnya tentang mengurangi JavaScript dan CSS yang tidak digunakan:

Jika Anda mengklik untuk memperluas salah satu bagian ini, itu akan mencantumkan file dan tugas tertentu yang dapat memblokir utas utama Anda. Anda juga dapat menemukan JavaScript dan CSS yang tidak digunakan menggunakan Chrome DevTools.

Dalam banyak kasus, sumber daya "pemblokiran perenderan" ini menghentikan pemuatan halaman dengan cepat yang juga memengaruhi FID Anda. Menghapus dan/atau menundanya tidak hanya dapat meningkatkan interaktivitas situs Anda, tetapi juga respons dan kecepatan yang dirasakan.

Divi memiliki tombol untuk menunda skrip non-kritis seperti ini. Dalam opsi tema, Anda dapat memilih untuk menunda skrip jQuery dan mengadopsi penangguhan CSS sebaris yang bila dikombinasikan dengan fitur CSS Kritis tema akan menghapus semua CSS yang memblokir render. Anda juga dapat mengaktifkan penangguhan stylesheet editor Google Font dan Gutenberg. Semua ini dianggap sebagai "pemblokiran render", sehingga anggota Elegant Themes akan segera melihat peningkatan skor FID.

Pertanyaan yang Sering Diajukan Keterlambatan Input Pertama (FID)

Pada titik ini, Anda mungkin memiliki pemahaman yang kuat tentang apa itu FID dan signifikansinya pada UX situs web Anda, serta cara meningkatkannya. Dengan mengingat hal itu, kami ingin memastikan bahwa kami telah membahas semua poin utama. Jadi mari kita bahas beberapa pertanyaan umum tentang FID.

Bagaimana FID Sesuai dengan Kinerja Keseluruhan Situs Web Saya?

Pada dasarnya, FID mengukur interaksi pertama yang dimiliki pengunjung dengan situs web Anda. Ini adalah metrik kuantitatif dan persepsi karena memengaruhi kesan pertama pengguna dengan situs Anda. Anda dapat melihat secara objektif kapan situs tersebut responsif terhadap masukan pengguna, tetapi berdasarkan interaksi pengguna dengan situs tersebut, Anda juga dapat melihat kapan mereka menganggapnya demikian.

FID mengukur waktu antara interaksi pertama yang dilakukan pengguna dan berapa lama waktu yang dibutuhkan browser untuk merespons tindakan tersebut. Dengan kata lain, metrik menilai seberapa responsif situs Anda saat masih memuat . Semakin cepat, semakin baik pengalaman pengunjung Anda.

Selain itu, sebagai Core Web Vital (bersama dengan Largest Contentful Paint (LCP) dan Cumulative Layout Shift (CLS)), FID memainkan peran penting dalam cara Google memberi peringkat pada situs web Anda. Oleh karena itu, selain pengalaman pengguna Anda, ini juga dapat memengaruhi Pengoptimalan Mesin Telusur (SEO) situs Anda. Banyak dari strategi yang sama untuk meningkatkan FID juga akan secara dramatis menurunkan kinerja situs Anda secara keseluruhan juga.

Bagaimana Saya Bisa Mengukur FID Saya?

Ada beberapa cara berbeda untuk mengukur skor FID Anda. Metode tercepat dan termudah adalah menjalankan situs Anda melalui Google PageSpeed ​​Insights. Laporan tersebut akan merinci berbagai metrik penting, termasuk FID. Ini juga akan menawarkan beberapa saran tentang bagaimana Anda dapat meningkatkan skor Anda.

Selain itu, Anda dapat menggunakan beberapa alat lain untuk mengakses skor FID Anda. Mereka termasuk Laporan Pengalaman Pengguna Chrome, Laporan Vital Web Inti Google Search Console, dan perpustakaan JavaScript vital web. Anda juga dapat menemukan alat seperti GT Metrix dan Tes Kecepatan Pingdom untuk berguna.

Bagaimana Saya Meningkatkan Skor FID Saya?

Meningkatkan FID Anda dapat membantu meningkatkan peringkat UX dan SEO situs Anda. Biasanya, skor FID yang buruk dapat dikaitkan dengan beberapa faktor, termasuk:

• JavaScript berat
• Skrip yang tidak digunakan
• Tugas JavaScript yang panjang
• File skrip panjang

Untuk meningkatkan skor Anda, ada beberapa langkah yang dapat Anda ambil. Ini termasuk memperkecil kode situs Anda, menghapus atau menunda skrip pihak ketiga yang tidak digunakan, dan memecah tugas JavaScript yang panjang (dan file CSS) menjadi yang lebih kecil.

Kesimpulan

Anda hanya memiliki satu kesempatan untuk membuat kesan pertama yang positif pada pengunjung website Anda. Inilah sebabnya mengapa penting untuk memastikan Anda mengambil setiap kesempatan yang Anda bisa untuk mengoptimalkan skor FID Anda. Sangat penting untuk memastikan bahwa interaksi pertama pengunjung Anda adalah interaksi yang cepat.

Ingat, skor FID yang ideal adalah 100 ms atau kurang. Jika Anda perlu meningkatkan dan mengurangi waktu tersebut, beberapa strategi yang kami diskusikan di atas (seperti menunda JavaScript yang tidak digunakan, mengoptimalkan kode CSS dan JavaScript Anda, dan menunda/menghapus sumber daya yang memblokir render) tidak diragukan lagi akan membawa waktu Anda ke titik mereka perlu.

Apakah Anda memiliki pertanyaan tentang FID? Beri tahu kami di bagian komentar di bawah!

Gambar Unggulan melalui wan wei / shutterstock